June 2021 Summaries

Gatsby Cloud has announced a partnership with Shopify to streamline the creation of headless e-commerce storefronts, emphasizing ease of use and enhanced performance for merchants. The integration features a significantly faster Shopify source plugin supporting incremental builds, enabling shop managers to efficiently handle larger product catalogs with quick deployment of updates. Gatsby Cloud is now accessible via the Shopify App Store, allowing users to swiftly set up a Gatsby-powered storefront and manage products across multiple channels. The platform offers performance longevity with millisecond page loads and PWA capabilities, ensuring a seamless shopping experience for all users. Additionally, forthcoming features like CMS Preview will allow managers to view product changes prior to publishing, with further insights into headless e-commerce to be shared in an upcoming webinar.

In the blog post, Grayson Hicks discusses optimizing website performance when using Gatsby in conjunction with Redux, a global state management library. While Gatsby excels at code-splitting to improve performance, integrating Redux can inadvertently lead to larger JavaScript bundles, slowing down the site. Hicks explores common patterns for incorporating Redux into Gatsby projects, explaining that wrapping the root element with Redux's Provider can result in all related JavaScript being loaded across every page, regardless of necessity. To mitigate this, he introduces two strategies: location-based and interaction-based reducers. The location-based approach confines Redux's Provider to specific pages, ensuring only necessary code is bundled for those pages, while the interaction-based approach dynamically loads reducers upon user interactions, preventing unnecessary code from loading initially. These strategies help maintain Redux's benefits without sacrificing Gatsby's performance optimizations, offering developers ways to manage state effectively while keeping JavaScript bundles lean and efficient.

The June 2021 edition of the Gatsby Gazette highlights recent developments and community activities related to Gatsby, a popular static site generator. The newsletter details several product updates, including new features for Functions on Gatsby Cloud, enhanced CMS Previews, and performance improvements that make Gatsby faster, with new support for Google and Atlassian Bitbucket. It also celebrates successful projects by agencies like Attach Digital and Novvum using Gatsby for headless commerce and content management. The community section marks Gatsby's sixth anniversary and recognizes contributions such as Megan Sullivan's rewrite of the Gatsby Tutorial and the platform's involvement in the React 18 working group. Upcoming events featuring webinars and livestreams aim to teach users about dynamic website functionalities using Gatsby Cloud. Additionally, the newsletter spotlights Gatsby's participation in the WP Engine Summit 2021 and encourages community engagement through social media and feedback on favorite Gatsby-built sites.

React 18, currently in its alpha phase, can now be tested with Gatsby 3.7 by installing the alpha versions of React and React-DOM using yarn or npm. This integration allows developers to explore new features such as StartTransition, which designates certain updates as "transitions" and prioritizes urgent updates, and Automatic State Batching, which reduces unnecessary re-renders by grouping multiple state updates in asynchronous tasks. According to Ward Peeters, the Technical Lead for Gatsby Open Source, these improvements lead to enhanced performance, exemplified by a reduction in time-to-interactive (TTI) in Gatsbyjs.com. A demonstration of React 18's capabilities is available on a sample e-commerce website, and feedback is encouraged through GitHub discussions to aid further development.

Gatsby has joined the React 18 Working Group to enhance collaboration with the React Core team, aiming to contribute to the development of the broader React ecosystem while improving web performance. This partnership allows Gatsby, a React-based framework renowned for creating high-performance websites, to test new React features and provide valuable feedback, benefiting both Gatsby users and the React community. As part of this initiative, Gatsby plans to release a Technical Blog series to update users on new features and capabilities, including guidance on upgrading projects to React 18 and utilizing concurrent features in applications. This collaboration reflects Gatsby's commitment to open-source development and its role in advancing web technologies alongside React.

Gatsby Cloud has launched Functions, a new feature that allows developers to incorporate dynamic capabilities into their Gatsby websites without maintaining additional infrastructure. These serverless functions enable developers to add functionalities such as authentication, form submissions, and real-time data updates by writing code directly in their Gatsby projects, which is then executed on Gatsby's edge network. The implementation of Functions follows patterns from the Express web app framework, allowing for easy data handling via request and response objects. Functions are version-controlled and integrated into Pull Request builds, providing a seamless experience for deploying and testing new features. With this release, Gatsby Cloud aims to simplify the process of adding interactive features to static sites, aligning with the trend of serverless architectures that reduce the need for infrastructure management. Developers can start using Functions by upgrading to the latest version of Gatsby and following the provided examples to integrate new functionalities into their sites.

Gatsby Cloud has announced support for Atlassian Bitbucket, expanding access to its platform for development teams that use this popular Git provider. This integration allows teams to build, preview, and deploy Gatsby sites directly from Bitbucket repositories with ease. Once a Bitbucket instance is connected, Gatsby Cloud automatically handles the site building process, provides a preview URL for team collaboration and feedback, and deploys the site to a global edge network for optimal performance. This enhancement aims to streamline the workflow for developers and improve website performance on Gatsby Cloud.

Gatsby Cloud is enhancing its platform by introducing Google authentication and expanding user roles to improve collaboration among different organizational roles involved in website development. Previously, authentication was limited to GitHub and GitLab, but now users can log in with their Google accounts to manage builds, deployments, and user access. Additionally, a new "Admin" role has been introduced, allowing administrators to handle billing and auditing tasks without needing shared logins or screenshots. These updates aim to streamline the workflow for developers, marketers, designers, and administrators by providing a more inclusive and secure authentication process, along with a refined roles and permissions dashboard accessible through the Gatsby Cloud settings.