February 2019 Summaries

In a Q&A session with the Gatsby team, key figures like Kyle Mathews, Chris Biscardi, and Dustin Schau discussed various aspects of Gatsby's development and its future direction. The team highlighted the growing trend of browser applications and the advantages of using Gatsby for performance-focused web projects, noting its ability to integrate smoothly with custom data services and deliver scalable builds. They addressed the progress on react hooks compatibility, the potential of Gatsby themes, and the introduction of incremental builds, emphasizing the platform's capability to handle large-scale sites. While Gatsby is often seen as a static site generator, the team clarified its dynamic capabilities, positioning it as a powerful alternative to other React-based solutions. They also outlined plans for global partnerships, agency programs, and the continuous enhancement of their GraphQL schema management to better support dynamic data changes. The discussion underscored Gatsby's commitment to fostering an inclusive community, providing commercial support, and advancing the JAMstack ecosystem.

Gatsby themes provide a streamlined way to build websites and applications by packaging parts of the process into reusable components, allowing developers to focus on customized elements. The guide by Katie Fujihara explains how to set up a Gatsby theme project using the gatsby-plugin-mdx package, which facilitates embedding JSX within markdown for enhanced component creation. It details the process of organizing project directories, configuring package.json files, and setting up dependencies like Gatsby, React, and ReactDOM. The tutorial also emphasizes customizing themes by creating styled components and configuring layout options in the gatsby-config.js file. Additionally, it covers troubleshooting plugin errors and encourages sharing themes on platforms like GitHub for reuse in other projects. Fujihara invites readers to share their theme-building experiences on Twitter, reflecting her passion for creating attractive user interfaces and engaging with the tech community.

React Hooks, introduced in React 16.8, have simplified the way state is used in functional components and enhanced code modularity. With the release of the useStaticQuery hook, Gatsby has improved the process of querying GraphQL data by eliminating the need for Render Props and allowing for cleaner, more succinct component code. This hook not only streamlines data access in components but also facilitates the creation of custom hooks, enabling developers to reuse queries efficiently across their applications. While useStaticQuery has a current limitation of being used only once per JavaScript file, Gatsby is working on a solution. Developers interested in implementing useStaticQuery can update their Gatsby and React versions accordingly and explore further through available documentation and community resources.

The recent "Behind the Scenes Q & A: What Makes Gatsby Great" webinar, led by Linda Watkins, explored various aspects of the Gatsby framework, focusing on its fast performance and optimization features. During the event, attendees asked over 100 questions covering a wide range of topics, such as image optimization, code splitting, GraphQL integration, and best practices for using Gatsby with different content management systems. The session also addressed comparisons with other static site generators, the scalability of Gatsby for large applications, and its use cases in dynamic web apps and e-commerce. Key discussions included environment-specific endpoint handling, TypeScript support, performance regression testing, and the potential for incremental builds. Attendees learned about integrating third-party APIs, managing dynamic content, and using Gatsby with popular CMS platforms like WordPress and Contentful. Gatsby's approach to SEO, automated testing, and continuous integration was also highlighted, along with the framework's community involvement and future developments in incremental builds and theme creation.

Gatsby themes, as introduced by Jason Lengstorf, provide a streamlined way to build websites by abstracting complex processes into a package that allows developers to focus on writing content without needing to handle code or plugins. Lengstorf highlights the simplicity of using Gatsby themes, which only require a few essential components like package.json, gatsby-config.js, and Markdown files for content. In a live stream collaboration with John Otander, Lengstorf demonstrated how to build a Gatsby theme from scratch, create child themes, use component shadowing, and install and use a Gatsby theme, with the resulting code available on GitHub for public use. The live streams, which cover various aspects of using Gatsby, are broadcast every Thursday, inviting viewers to learn more about enhancing their website development process with Gatsby themes.

The Office of Natural Resources Revenue (ONRR) undertook the task of transitioning their open data site from Jekyll to Gatsby to address several workflow challenges, such as cross-platform compatibility issues, lack of a unified data source, and dependency on a single developer for data updates. By adopting Gatsby, the team aimed to create a more modular and maintainable site architecture, leveraging GraphQL for querying data from a single canonical source and allowing team members to update data using only Excel and GitHub. Despite facing challenges such as long build times and maintaining two codebases simultaneously, the transition to Gatsby offered the ONRR team a modern framework that aligns with industry best practices and supports a sustainable content management workflow. The use of Gatsby's open-source, cross-platform capabilities enabled the team to incrementally refactor the site while ensuring a seamless user experience, ultimately positioning them for long-term maintenance and future enhancements.

Daniel Lemay's exploration of migrating a React application to use Hooks highlights the benefits and challenges of transitioning from class-based components and render prop patterns to a more streamlined hooks-based approach. By converting a Slideshow component to a custom hook, Lemay demonstrates how Hooks, such as useState and useEffect, can consolidate code, reduce complexity, and improve clarity by eliminating the need for multiple lifecycle methods and state updater functions. This transition resulted in cleaner code, a net reduction of lines, and more organized handling of side effects. Lemay suggests structuring custom hooks for easy import and emphasizes the importance of updating React and React-DOM to version 16.8.0 for compatibility with Hooks. While acknowledging that Hooks are not a replacement for class components, Lemay argues they represent a significant shift in React development, promoting more efficient and thoughtful design patterns.

Gatsby Inc, a company formed by contributors to the open-source project Gatsby.js, aims to build a robust team capable of executing its product roadmap and vision for creating feature-rich, high-performance websites. The company's hiring philosophy emphasizes the importance of securing domain experts to address both market and technical risks inherent in its projects, which include integrating modern web technologies like PWAs, React, and GraphQL, managing an open-source contributor community, and running untrusted code at scale. Gatsby Inc's team is globally distributed and well-compensated, reflecting its commitment to attracting skilled, multi-talented individuals who can adapt to diverse challenges and foster a collaborative work environment. The company also focuses on building a seniority mix within its team that aligns with project complexities, enabling both senior and mid-level engineers to contribute effectively. As part of its long-term vision, Gatsby Inc aspires to significantly influence the content web over the next decade, drawing inspiration from the success of early PayPal employees who went on to shape the tech industry.

Hapticmedia, a company specializing in 3D product configurators, transitioned from a WordPress website to using Gatsby to address their need for a more dynamic, scalable, and user-friendly platform. Initially, their WordPress site became cumbersome to manage as their business grew, resulting in slow load times and frequent breakdowns. To better reflect their technological capabilities and ensure a positive user experience, they opted for Gatsby due to its React codebase, which aligned with their existing 3D work. Despite initial concerns about integrating dynamic elements on a static site generator, they successfully incorporated features like a 3D watch configurator and a contact form using Amazon’s web API. The new Gatsby-built site offers faster load times and seamless page transitions, effectively showcasing Hapticmedia’s innovative work and supporting their expanding business needs.