June 2018 Summaries

In a recent initiative to enhance the usability of documentation on gatsbyjs.org, a card sort exercise was conducted with 36 Gatsby users who categorized 90 cards into logical groups. Using OptimalSort software, the data revealed common categories such as "Get Started," "Core Concepts," and "Advanced Guides," although some documents like "Building apps with Gatsby" and deployment-related docs lacked clear categorization. This ambiguity highlights the need for more clarity in presenting Gatsby's capabilities, particularly beyond static site generation, and suggests possible enhancements like introducing "Deployment & Hosting" as a primary category. Additionally, the overlap between "Core Concepts" and "Advanced Guides" suggests a need for better linkage between related content. Following this, usability testing is being carried out, which has already shown that users often resort to Google searches over internal navigation and find some category names, like "Recipes," unclear. The results of these tests and a redesigned sidebar are anticipated to further refine the documentation structure, inviting feedback through a Doc Redesign RFC to ensure the documentation meets user needs effectively.

Escalade Sports, a sports equipment company based in Evansville, Indiana, transitioned its websites from Drupal to Gatsby to address stability issues and reduce hosting costs. Lead developer Kennedy Rose initially encountered challenges with Drupal's instability, particularly during traffic spikes caused by successful marketing efforts. After experimenting with Node/Express and Next.js, Rose chose Gatsby for its plugin system that simplified data management and reduced data bloat by using GraphQL. This transition allowed Escalade to utilize React knowledge efficiently, improve project timelines by reusing prototype code, and significantly cut hosting costs from $5,000 to $5 per month by moving to Netlify. Although the shift to Gatsby required educating others about the new technology stack and addressing misconceptions about the need for a CMS, it ultimately eliminated previous complexities and enhanced Escalade's web infrastructure.

Gatsby V2 introduces significant changes to its layout system, moving away from the automatic application of layout components in favor of a more explicit, React-style approach. This shift aims to reduce complexity and mystery bugs by requiring developers to manually import and use layout components, thereby enhancing code transparency and simplifying data flow between layouts and pages. The update also includes faster hot reloading, the ability to add GraphQL queries to any component with StaticQuery, and improved CSS handling for better performance. These enhancements are part of a broader effort to make app development with Gatsby more intuitive and enjoyable, as reflected in the V2 migration guide and additional new features.

Khaled Garbaya's blog post explores the transition from using create-react-app to Gatsby.js, highlighting the advantages and key differences between the two. While create-react-app simplifies the process of starting a React app by preconfiguring tools like webpack and Babel, Gatsby is a static site generator that offers a more comprehensive framework with built-in best practices for creating Progressive Web Apps. Gatsby provides features such as code and data splitting, which enhance performance by loading critical resources first, and utilizes a flexible plugin system to integrate various data sources. It leverages React components for reusability and uses GraphQL for efficient data sharing across pages. The blog post also discusses the process of converting static and dynamic routes from a React app to Gatsby, using examples like blog posts loaded from Contentful. Gatsby's ability to build static files allows for easy deployment on platforms such as Netlify and AWS S3, and the post concludes with references to additional resources and documentation for further exploration.

Narative, a venture studio focused on brand and product development, has embraced Gatsby for its ability to efficiently build both page-based websites and complex web apps using the React ecosystem. This adoption has allowed Narative to rapidly expand its team and achieve significant revenue growth by leveraging Gatsby's features, such as fast development and performance optimizations, which eliminate the need for additional setup. Gatsby's clear separation between data and view layers aligns with headless CMS principles, providing flexibility and reducing complexity without CMS lock-in. Its robust plugin system and integrations further enhance Narative's capability to deliver superior products. By using Gatsby, Narative's engineering team maintains a cohesive and adaptable workflow, enabling them to focus on crafting compelling narratives and experiences for their partners.

Gatsby has launched the first beta of its version 2, featuring significant improvements over version 1, which was released in July 2017. The update includes the introduction of StaticQuery to replace confusing layout components, renaming several APIs for consistency, and enhancing hot reloading by decoupling data updates from webpack builds, which accelerates content update speeds. Version 2 also benefits from upgraded dependencies, including Babel to v7, React to v16, and webpack to v4, allowing users to leverage performance enhancements and new features. Gatsby encourages users to upgrade and provides resources like a migration guide to facilitate the transition, while also inviting feedback and contributions to refine the final release. The development of v2 involved contributions from 36 developers, and Gatsby is continuing to work on additional improvements as outlined in their v2 roadmap.

Linda Watkins shares her enthusiasm for Gatsby, a website development tool that eliminates traditional hosting challenges by leveraging a serverless architecture. Gatsby pre-compiles content and stores it on a content delivery network (CDN), allowing websites to scale quickly and load almost instantaneously, which is particularly beneficial during traffic spikes. This approach enhances security by eliminating server vulnerabilities and protects databases and CMSs from potential hackers. Watkins recounts her firsthand experience of a Gatsby site loading effortlessly even with poor in-flight WiFi, illustrating its speed and reliability. The tool is positioned as ideal for marketers, managers, agencies, and developers looking to enhance website performance and user experience, and a new one-page overview helps communicate these benefits to both technical and non-technical audiences.

Tony Spiro's tutorial guides readers through building a fast and simple blog using React, Gatsby, and Cosmic, with an emphasis on integrating the Cosmic source plugin to connect data from Cosmic to a Gatsby site. The process begins with setting up the development environment by installing Node.js, npm, and Gatsby, followed by creating a new site and configuring it with the Cosmic plugin to fetch data using GraphQL. The tutorial includes steps for displaying posts on the homepage and creating individual post layouts, leveraging Gatsby's createPages API for URL management. The project is designed to be easily deployable on platforms like Netlify and offers a foundation for exploring further capabilities of both Gatsby and Cosmic. The source code is available on GitHub, allowing users to clone the repository, view a live demo, and build upon the initial setup for enhanced website performance.