Abstract

From the React docs to Formidable's home page to seemingly everything in between, the "ludicrously fast" static site generator Gatsby is the engine powering a growing percentage of statically generated sites. This talk goes into the details of what Gatsby is, what static site generation really is, and how each of us armed with this combo can make performant, dynamic, and truly great static sites and performant web applications with the incredibly powerful combination of Gatsby, React, and static site generation.

Details

The talk will begin with an illustration of what static site generation means, and some sample code and approaches used by existing tools, e.g. Jekyll, Hugo, etc. From this perspective, we can then shift the discussion into what a (current) modern website stack looks like, outside of static site generation.

After introducing static site generation tools, the presentation will shift into what makes a modern website performant, and why performance is such a crucial, often overlooked concern. In the age of Webpack and other bundling tools, we've lost focus on the user experience that is significantly degraded in loading these huge, monolithic bundles of JavaScript, CSS, and other content. These slow, massive applications are costing your users and your company precious time and money.

Introducing... Gatsby! Gatsby is a modern static-site generator powered by React. Just as React is "eating the world" in areas like the web and native, it similarly is now attempting to conquer static site generation and performant web applications. We will discuss how GatsbyJS makes static sites, and in particular, several of its techniques that have led to Gatsby being described as "ludicrously fast" such as progressive image loading, content aware bundling, etc.

Finally, we will discuss Gatsby's data layer, which uses another technology (GraphQL) which seems to be growing rapidly in popularity and adoption. We will discuss how GraphQL works with Gatsby, and how it allows you to pick and choose content, types of content, and even sources of content (e.g. Wordpress, Contentful, etc.). We will discuss how one could, for instance, use Gatsby to build a blog or an e-commerce site simply, quickly, and easily with the language and tooling that many of us are most familiar with: React and JavaScript. With this information in mind, each attendee will leave empowered with a greater understanding of not only Gatsby, but also static site generation, web performance, and some great techniques that they can use in their application, today.

Intended Audience

The intended audience is anyone with a passing interest in frontend development, but will, of course, be slightly more valuable to those in the audience who have used and/or are familiar with React. That said, regardless of subject matter expertise, this talk is intended to be valuable to anyone with at least a casual interest in topics such as static site generation, web performance, and modern website tooling.