Beyond Static
with Gatsby, React, and GraphQL

Dustin Schau

Asset 3
whoami

Development has changed.

JavaScript development has never been
better.

We have so. many. tools.

🔧

React
import React from 'react'

export default function Waddup() {
  return <h1>It's dat boi</h1>
}
GraphQL
{
  repository(owner: "dschau", name: "gatsby-mail") {
    stargazers {
      totalCount
    }
  }
}
Node.js
Gatsby

We'll come back to this.

These are tools developers want to use.

But we can't.

And this sucks.

A lot.

But we can't.

This is changing.

Excellent APIs are ubiqituous.

Software as a Service = 🚀

Auth0
Stripe
Shopify

The de-coupling of the CMS.

(even the CMS is going headless)

Contentful
Drupal
Strapi
The (monolithic) CMS is dead.
Long live the (headless) CMS.

Static Site Generators are so hot right now.

"Markup"

JAMStack

Javascript

APIs

Markup

This is...
Fantastic

Developers can use the tools they want to use.

  • ✅ React
  • ✅ GraphQL
  • ✅ Node.js
Use the best services.
(and hey, less time spent re-implementing those services!)

Build UIs from these disparate, best-of-breed services and tools.

But this also...
kind of sucks.

Performance can easily degrade

Complex business logic to combine data sources

Challenging to implement state-management

Introducing...
The Content Mesh

Separate content and data sources are unified into a single experience.

Content Mesh

Use the best tools for the job

Join disparate data sources with GraphQL

Serve optimized static assets

This is...
amazing

Get a blazing fast experience doing so

(We say this... a lot. But it's true!)

Gatsby

(I told you we'd come back to this)

WWWU: #WhatWouldWesUse

Node APIs to load any data source into GraphQL

Inject dynamic data at build time

Static... as much as possible!

Blazing fast, by default

Perf. Acronyms

H/2PRPLRAILFLIPSPASWTTIFMPFCPTTFPPWATTFB
How many do you actually know?

Deploy your content... wherever.

(on the edge or the server in your basement)

Neat.

Gatsby's just a static site generator though, right?

🙅‍♀️ 🙅‍♀️ 🙅‍♀️ 🙅‍♀️ 🙅‍♀️

static assets !== static app
What if I told you...
A Gatsby site is a React application
gatsby-mail
(not a real product; just for funsies)
Development has changed.
#buildwithgatsby