presentation on gatsby to sf static web tech meetup

Gatsby: A React.jsStatic Site GeneratorKyle Mathews

@kylemathewsCo-founder RelateRocket(Enterprise SaaS, data science,GraphQL, Relay, React.js, React Native)Hiring 1st engineer soon!

My website development tools history… or how Gatsby came to be

2006 — Drupal2011 — Backbone2014 — Static sites + React.js/Webpack/React-Router/Hot-Loader

Love stack for building web apps but what about web sites…? Want React.js + ecosystem + simplicity of static sites.

Spark of inspiration — auto-generate React.js web app from staticMarkdown files?

Obsessed over idea for several months until I took a week off startup work and built v0.1 of Gatsby

Shockingly it worked…

Was able to glue together Webpack, React.js, React-Router, and React-Hot-Loader

gatsby(markdown) => SPA

8 months old but quite a few sites are built on it already

Here I make a case for why Gatsby is best choice in 2016 for building static websites

Gatsby has native support for Best Parts of 2016 Web Dev ecosystem

Postcss, Webpack, Components, React.js, NPM, etc.

Comparing static site generators with Gatsby

* Markdown — same* HTML/Templates — same-ish* CSS — more or less same, most support

Sass/Less/Postcss, etc.* Javascript — many… awkward jQuery

enhancement level, Gatsby very easy* Components — Gatsby pretty unique here w/

1st class support

Gatsby Developer experience

* Batteries included* Boilerplate + Gatsby “apps” (tentative

names)* Hot reloading* Feel very natural to React dev* Entire React ecosystem available to static

sites (npm install my-favorite-component)

Gatsby User experience

* Fast!* No-reload page transitions* Easy service worker support for client

caching + offline

DEMO

The future

* Revamp data transformation* New Plugin API* Support Gatsby “apps”

extends: { require(‘gatsby-documention-app’),},plugins: [ require(‘gatsby-plugin-markdown’), require(‘gatsby-plugin-postcss’)({ modules: true, }),],// Implement Gatsby APIspostBuild: (pages) => { // Do something after site is built.}