June 2019 Summaries

Mediacurrent, a web strategy and development agency, transformed its development process by adopting Gatsby, which significantly improved the integration and performance challenges faced with Drupal. Initially, Mediacurrent utilized a component-driven approach in Drupal, breaking down web page designs into components built with HTML, CSS, and JavaScript, but faced issues with complex integration logic and performance setbacks within the Drupal CMS. By transitioning to Gatsby in 2018, they leveraged GraphQL to streamline integration, allowing frontend and backend teams to focus on their respective expertise without cumbersome CMS issues. Gatsby's static HTML generation and built-in performance features solved previous performance challenges, enhancing productivity and enabling the team to focus on frontend innovations like React. This transition has allowed Mediacurrent to efficiently handle smaller, frontend-focused projects and opened new opportunities for growth and development within the agency.

Gatsby offers a compelling alternative to WordPress for agencies seeking to increase profitability and simplify site maintenance, primarily due to its lower total cost of ownership and reduced technical upkeep. While WordPress developers may initially dismiss Gatsby as just another trendy tool, the static site generator can significantly cut costs by offering free or low-cost hosting options, unlike the more expensive hosting typically required for WordPress. Gatsby's architecture, which separates frontend and backend functionalities, can also simplify troubleshooting and reduce the incidence of break-fix scenarios that often drive up maintenance costs for WordPress sites. Additionally, the Gatsby ecosystem frequently provides generous free tiers for third-party services, further enhancing cost efficiency. Agencies using Gatsby can offer competitive pricing for clients, as illustrated by Brian Webster's experience of winning more bids due to lower project costs. Thus, for agencies focusing on long-term site management and aiming to maximize margins, Gatsby presents a viable and profitable alternative to traditional WordPress solutions.

Kevin Green, Co-founder and Lead Engineer at The Couch, a web development team, has effectively utilized Gatsby to significantly reduce website development time and costs while enhancing site performance. Focusing on e-commerce projects, The Couch has leveraged Gatsby's ability to integrate with a variety of headless services, enabling them to create fast and feature-rich websites for clients like Prima, a CBD oil company. By serving content as static HTML, Gatsby allows for quicker loading times and lower hosting costs, which are key benefits for content-heavy sites. Kevin's experience with Gatsby, coupled with headless CMSs like Sanity and e-commerce platforms like Shopify, has streamlined his workflow, allowing him to adjust tools to each project's needs and cut development time in half compared to traditional tools. The successful launch of Prima's site, which integrates educational content and a product line, underscores Gatsby's capability to deliver fast, smooth user experiences, making it a preferred choice for Kevin and his clients.

Gatsby Preview has launched its open beta, allowing content creators and editors to preview changes in real-time before they go live, addressing a previous gap for teams using Gatsby without their own preview infrastructure. This service connects GitHub repositories and supported CMSs like Contentful, Contentstack, DatoCMS, and Sanity, enabling users to see content changes in context. The feature is designed to streamline the editing process by integrating directly into CMS interfaces, reducing reliance on development teams for preview setups. Gatsby is expanding compatibility with more CMSs and improving integration processes to enhance user experience. Additionally, the Gatsby Cloud team is developing a feature called "Builds" aimed at ensuring developers can confidently verify code changes before production deployment. The beta offers a 14-day free trial, inviting users to test its capabilities and benefits for content management and site performance enhancement.

Gatsby announced the discontinuation of support for Node 6 in its v2.10.0 release due to Node 6 reaching its end-of-life status and the growing difficulty in maintaining compatibility with the outdated version. This decision aims to enhance the efficiency of delivering new features and fixes by aligning with the majority of Gatsby's dependencies that no longer support Node 6. The change is categorized as a potential breaking change because it impacts less than 1% of Gatsby users, allowing the team to implement it in a minor release. The technical shift involves updating the Babel preset to transpile code for Node 8, enabling the use of modern JavaScript features and reducing the need for additional workarounds. The transition to supporting Node 8 and above is designed to streamline development processes, despite the potential for minor disruption among the few users still reliant on Node 6. An upgrade guide is available for those affected, and warnings are issued to users attempting to run newer Gatsby packages on obsolete Node versions.

Dustin Schau's post provides an insightful glimpse into the multifaceted role of a Gatsby core maintainer, highlighting the challenges and strategies for maintaining productivity and balance. The core maintainer's responsibilities involve managing community needs, resolving issues, and working on feature development, which require a careful balance of time management and prioritization. Schau outlines a model for a productive day, emphasizing time-boxing, community engagement, and the importance of taking breaks to maintain mental health. He highlights the significance of both routine tasks like reviewing pull requests and issues, and more focused work that contributes to larger goals. The post also stresses the value of stepping away from tasks to gain fresh perspectives and the importance of play and experimentation in fostering creativity and innovation. Schau acknowledges that while the outlined schedule serves as a guide, the dynamic nature of the role means that each day can present different challenges and opportunities, requiring adaptability and a focus on meaningful outcomes.

Gatsby has implemented a Site Showcase to display a variety of websites built with its platform, necessitating ongoing maintenance as the number of sites increases. To manage this, a validator was developed using Node.js to automate the process of verifying whether sites in the showcase still use Gatsby, by checking for specific HTML identifiers. This validator uses GitHub Actions for deployment, allowing it to run daily without additional infrastructure. Since its integration into Gatsby Core, the validator has enhanced the reliability of the showcase by enabling maintainers to identify and address sites that no longer use Gatsby. Future improvements may involve extending the validator with additional tools to ensure continued accuracy and effectiveness in monitoring the showcase.

At Gatsby, product management is centered on creating a continuous and iterative process of product discovery and development to deliver customer value quickly while ensuring a strong product-market fit. The approach blends agile principles with strategic alignment to company-wide objectives, incorporating early involvement of research, design, and engineering to foster experimentation and innovation. Product managers are tasked with evaluating opportunities, prioritizing work, and gathering customer feedback, forming a cycle of idea generation supported by discovery research on customer needs and pain points. Prototyping and feasibility research are used to assess the practicality and cost of new features, while proof of concept work facilitates early testing with reference customers to enhance product quality and fit. Tools like Wardley mapping, intent mapping, and OKRs guide strategic planning and goal setting, maintaining focus on long-term vision and short-term outcomes. As Gatsby evolves, the emphasis remains on understanding customer challenges and providing valuable solutions, driven by consistent engagement with users to validate ideas and uncover new opportunities.

Gatsby, a performance-focused framework, has introduced a significant optimization for large-scale applications by splitting the global page manifest into individual page-specific files to enhance loading times and interactivity. This change addresses the issue where large manifests, in applications with over 5,000 pages, caused slow navigation and interaction due to the significant data load required before any user interface actions could occur. By creating a separate page-data.json for each page, which includes necessary metadata like the React component name and GraphQL query results, Gatsby eliminates the need for a monolithic manifest, thus improving metrics like Time to Interactive (TTI) and reducing perceptible lag in navigation. This update, available in Gatsby v2.9.0, also benefits hosting platforms like Netlify by reducing rebuild times, supports future incremental build capabilities, and remains fully backward compatible, enabling users to maintain fast and efficient site performance simply by upgrading to the latest version.

Gatsby, a cutting-edge technology, is sometimes challenging to explain to clients, especially as discussions shift from IT to marketing. To effectively pitch Gatsby, it’s crucial to first understand and align with the client's specific needs and problems. For example, a mid-sized retail business considering replatforming due to a poor content editorial experience and slow development velocity found value in Gatsby's microservices approach and fast React-powered frontend. Key advantages of Gatsby include alleviating developer bottlenecks by decoupling the frontend from the backend, offering a bleeding-edge solution that appeals to forward-thinking clients, and significantly improving site speed, which can enhance user engagement and revenue. However, it’s important to honestly address any challenges or trade-offs when proposing Gatsby as a solution. By focusing on how Gatsby can support organizational goals rather than its technical features, it becomes a compelling choice for clients seeking improved performance and innovation.

Brian Webster, founder of Delicious Simplicity, embarked on a journey to find a more efficient framework than WordPress and Drupal for building websites that could meet modern demands for speed and functionality. Initially struggling with various frameworks, Brian was eventually captivated by Gatsby, a platform that seamlessly integrates JavaScript, Node, and React, offering a more streamlined and reusable development process. Despite initial challenges in transitioning his team from frontend development to embrace the complexities of a headless CMS, Gatsby's intuitive syntax and logical tooling won them over, enabling them to produce higher-value projects and refactor existing ones with greater efficiency. The newfound capability to reuse components across different projects has significantly accelerated their development process, transforming their approach from scratch-built solutions to a modular, reusable library of techniques. This shift has not only enhanced the team's skills but also allowed Delicious Simplicity to deliver innovative web applications, marking the beginning of a promising partnership with Gatsby.

GraphiQL Explorer, a plugin for the GraphiQL IDE, enhances the development experience for Gatsby users by providing a graphical interface for building GraphQL queries without needing to write code manually. Developed by OneGraph, this tool simplifies the learning curve for developers new to GraphQL by allowing them to construct queries through a visual representation of available fields and inputs. It also addresses complex query structures like union types and inline fragments by listing these options, reducing user frustration. Recently integrated into Gatsby's GraphiQL IDE starting with version 2.7.3, the plugin has been further enhanced with the addition of code snippet generation in version 2.15.3, courtesy of Dan Kirkham's integration of the graphiql-code-exporter. This feature allows users to easily create scaffolds for new pages and components by exporting queries composed in the GraphiQL IDE. Future improvements aim to evaluate accessibility, support GraphQL fragments from plugins, and enhance code snippet functionality.