Gatsby

Why learn Gatsby?

Gatsby

  • No native asset pipelining
  • Slow, manual DOM manipulation
  • Replicate elements by copy-paste
  • Refresh to view changes
  • State coupled w/ DOM
  • ES5 + polyfill for cross-browser compatibility
  • Create document-based sites
  • Code splitting, responsive images, etc
  • Virtual DOM & declarative UI w/ React
  • Componentization
  • Hot reloading
  • One-directional data flow
  • ES6 + ES7 automatically transpiled
  • Create app-like experiences

Before: vanilla HTML, CSS, JS

=>

#2 Most Hated Technology

=>

Now: higher-level lang + patterns

A cutting-edge stack built for iteration speed

Vision

Gatsby lives and breathes modern web standards, like React and the JAMstack. No need to be tied to old systems that make best practices impossible. Gatsby makes it straightforward to use modern best practices in web development

Now: performance baked into the framework

Gatsby

  • Offline + caching => good UX even on 2G/3G
  • Initial call loads site; critical elements inlined
  • Predict likely pages to be visited and prefetch in background making link clicks instantaneous

Before: Hand-built performance tweaking

= +

=>

Throw away your performance checklist

Vision

Top 0.01%: Total = 4m, us = top 300 (https://api.github.com/search/repositories?q=stars:%3E=1,

https://api.github.com/search/repositories?q=stars:%3E=14000)

Downloads/month: Current (https://www.npmjs.com/package/gatsby), historical (https://npm-stat.com/charts.html?package=gatsby)

Contributors: archive.org, eg https://web.archive.org/web/20170617024115/github.com/gatsbyjs/gatsby/, https://web.archive.org/web/20170908055914/github.com/gatsbyjs/gatsby/, compare with github.com/gatsbyjs/gatsby

Vanity metric: #3 Google search result for “Gatsby,” ahead of Amazon for The Great Gatsby (#7)

In the last five years, there’s been a revolution in the front-end landscape. Javascript has gotten much better -- better syntax with things like arrow functions and destructuring, better bundling solutions, better package management,

Now: pull data from anywhere.

Build with React & GraphQL.

Gatsby

Before: laborious content migrations &

manually stitching data sources together

=>

Vision

Data & CMS-agnostic development

Top 0.01%: Total = 4m, us = top 300 (https://api.github.com/search/repositories?q=stars:%3E=1,

https://api.github.com/search/repositories?q=stars:%3E=14000)

Downloads/month: Current (https://www.npmjs.com/package/gatsby), historical (https://npm-stat.com/charts.html?package=gatsby)

Contributors: archive.org, eg https://web.archive.org/web/20170617024115/github.com/gatsbyjs/gatsby/, https://web.archive.org/web/20170908055914/github.com/gatsbyjs/gatsby/, compare with github.com/gatsbyjs/gatsby

Vanity metric: #3 Google search result for “Gatsby,” ahead of Amazon for The Great Gatsby (#7)

In the last five years, there’s been a revolution in the front-end landscape. Javascript has gotten much better -- better syntax with things like arrow functions and destructuring, better bundling solutions, better package management,

Gatsby

Now: Easy & free CI/CD pipeline + CDN to deploy your website

  • Content delivery networks
  • Global load balancing
  • Server redundancy and failover
  • Continuous deployment and integration
  • Performance and error profiling
  • Security vulnerabilities
  • And so much more

One-click global deployment

Vision

Before: website deployment requires ops expertise // expensive hosting

+

Top 0.01%: Total = 4m, us = top 300 (https://api.github.com/search/repositories?q=stars:%3E=1,

https://api.github.com/search/repositories?q=stars:%3E=14000)

Downloads/month: Current (https://www.npmjs.com/package/gatsby), historical (https://npm-stat.com/charts.html?package=gatsby)

Contributors: archive.org, eg https://web.archive.org/web/20170617024115/github.com/gatsbyjs/gatsby/, https://web.archive.org/web/20170908055914/github.com/gatsbyjs/gatsby/, compare with github.com/gatsbyjs/gatsby

Vanity metric: #3 Google search result for “Gatsby,” ahead of Amazon for The Great Gatsby (#7)

In the last five years, there’s been a revolution in the front-end landscape. Javascript has gotten much better -- better syntax with things like arrow functions and destructuring, better bundling solutions, better package management,

Now: Out of the box tooling to make everyone productive

Gatsby

  • Maintained for you -- no upgrading dependencies, starting five different processes in the correct order, hand-rolling a build pipeline….
  • Documented -- your new team member can Google for help when they’re stuck
  • User-friendly -- built-in hot reloading, see helpful error messages instead of confusing stacktraces, etc
  • Maintained by you -- your best dev set up the asset build pipeline, deploys, and dev server. She handles library upgrades and is the only one who understand how all the pieces fit.
  • Undocumented -- new team members frequently blocked on weird quirks you forgot to write down
  • Stack traces of death -- bugs throw application errors, NGINX timeouts, and other errors that frontend developers find impossible to debug

Before: mostly-working env maintained by your best devs in their spare cycles

A friendly local dev environment

Vision

Top 0.01%: Total = 4m, us = top 300 (https://api.github.com/search/repositories?q=stars:%3E=1,

https://api.github.com/search/repositories?q=stars:%3E=14000)

Downloads/month: Current (https://www.npmjs.com/package/gatsby), historical (https://npm-stat.com/charts.html?package=gatsby)

Contributors: archive.org, eg https://web.archive.org/web/20170617024115/github.com/gatsbyjs/gatsby/, https://web.archive.org/web/20170908055914/github.com/gatsbyjs/gatsby/, compare with github.com/gatsbyjs/gatsby

Vanity metric: #3 Google search result for “Gatsby,” ahead of Amazon for The Great Gatsby (#7)

In the last five years, there’s been a revolution in the front-end landscape. Javascript has gotten much better -- better syntax with things like arrow functions and destructuring, better bundling solutions, better package management,

What Gatsby code does at build time

Source plugin

Component

What Gatsby code

does at runtime

Gatsby site

Transformer

plugin(s)

GraphQL

queries

Source plugin

Source plugin

Source plugin

Component

Component

Component

Gatsby and Webpack generates

static files at build time

Static

host

Person visits site and clicks on things

Site returns static files

Workshop Day 1 Intro - Google Slides