Abstract

Static site generation has long been a problem that has been "solved" with tools like Jekyll, Hugo, Hexo, et al. However, a challenger looms, and that challenger is Gatsby. Gatsby is a ReactJS powered static site generation tool that is a very capable challenger to these aforementioned, established tools. This talk goes into the details of what Gatsby is, what static site generation really is, and how the listener can make performant, dynamic, and incredible static websites with the incredibly powerful combination of Gatsby and React.

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, Contenful, 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.