Nebraska.Code() Sessions tagged react

Gatsby: Static Site Generation with React

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.

Bootstrap Your App with AWS Amplify!

Front-end development can be complicated. There are enough libraries, and enough churn, to make anyone feel lost in the shuffle. Common concerns for any non-trivial modern web application include features like authentication, user content, logging, and analytics. In this session, we break down and demo the key features of AWS Amplify – an open-source library from Amazon. Amplify abstracts away the common functionality that so many applications share and allows developers to focus on business logic – not plumbing! In this session, we walk through a simple application highlighting the features and tools the library provides. This should leave you with the knowledge of how and why you would integrate this with your own projects. The session will use React to demonstrate the features of the library, but general front-end development experience is all that is required.

Speaker

Mathew Warger

Mathew Warger

Developer, Keyhole Software