NEJS Proposals

Add proposal

Open proposals

Gatsby: Static Site Generation with React

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.

Reason / ReasonML

Just a general overview of what Reason is, some real-world examples of what you can do with it, and the benefits it can provide. Not sure of the level of interest in it, but I'd have to imagine it's not zero!

https://reasonml.github.io/

TypeScript

Not sure if there's interest in it but I've done a fair amount of work with TypeScript and I'd feel confident giving a talk on it.

Go over what it is and the benefits, how strong types in JS work, enums, generics, type guards, typing files, the typescript watcher and how it feeds into the transpilation workflow.

Observables and RxJS

I would like to give a talk introducing Observables and RxJS and demonstrating some practical use cases, and why I think Observables are awesome.

Web3 and Ethereum Blockchain

I can speak about using the Ethereum blockchain, deploying smart contracts onto the blockchain, and how to interact with the smart contracts via the Web3 javascript API, and developing decentralized applications (dapps) using a blockchain backend.

Understanding the WebSocket Protocol

I'm a really big fan of WebSockets -- they're a lightweight bi-directional communications channel that doesn't have a lot of overhead.

I've been working on a talk about the protocol itself -- more how the actual communication between the browser and the server happens, from handshake to close, and less on how to implement them/use them in practice.

Might be interesting!

WebAudio API

pitched by Gretchen Larsen at NebraskaJS Omaha on November 14th https://twitter.com/gretiegirl

alternate topics:

  • Google Text Speech Synthesis API
Check out closed proposals