What Is Gatsby?

An overview of what Gatsby is,
how it works, and why it matters.

by Jason Lengstorf
@jlengstorf  ·  jason@gatsbyjs.com

Slides: git.io/what-is-gatsby

👋 Hi! I’m Jason.

Jason Lengstorf
  • Human Duct Tape @ Gatsby
  • Formerly: front-end architect @ IBM
  • Failed musician
  • Amateur bartender
  • Living in Portland, OR

What are the challenges of modern web development?

  • Getting started is overwhelming
  • The way we manage data is evolving
  • Getting it right is hard

What is Gatsby?

Gatsby is a shortcut to allow developers to quickly build excellent apps and sites.

Most workflows involve a lot of boilerplate to get started.

Visualization of the pipeline to get code from an editor to the browser.
Same pipeline, but now Webpack is included.
Previous image + Babel.
Previous image + PostCSS.
Previous image + Node.JS.
Previous image + Kubernetes.
Previous image + NGINX.
Previous image + Fastly.

Gatsby removes the boilerplate for getting started & deploying apps to production.

Simplified workflow with Gatsby + Netlify.
Simplified workflow with Gatsby + Netlify showing React and GraphQL as tools.

What is Gatsby?

Gatsby is an orchestration layer for taming the Content Mesh and its many sources of data.

The monolithic CMS is dying.

The future of web development is the content mesh

Learn more: gatsby.dev/content-mesh

The content mesh.
The content mesh.
The Content Mesh with Gatsby.
The Content Mesh with Gatsby.
The Content Mesh with Gatsby.
The Content Mesh with Gatsby.

Example: Gatsby’s Swag Store

The Gatsby Store.store.gatsbyjs.org

Static Data Loaded at Build Time

The Gatsby Store.store.gatsbyjs.org

Dynamic Data Loaded at Run Time

The Gatsby Store.store.gatsbyjs.org

Client-Only Routes for User Pages

The Gatsby Store.store.gatsbyjs.org

Data Loads Asynchronously

The Gatsby Store.store.gatsbyjs.org

What is Gatsby?

Gatsby is a Progressive Web App generator designed to make the right thing the easy thing.

Make the right thing the easy thing.

Design your tools so the laziest, shortcuttiest,
under-the-gunniest decisions a developer can make
will still result in an excellent user experience.

Gatsby sets the right defaults under the hood...

  • Follows the PRPL pattern and other performance best practices
  • Generates only static assets (no server required)
  • Optimizes and lazy-loads assets
  • Normalizes third-party data

...but developers keep control.

  • Webpack and Babel are fully customizable through Gatsby APIs
  • Customize only what you need — no ejection required

So what is Gatsby?

Gatsby is fast in all the ways that matter.

So what is Gatsby?

Gatsby lets you bring data from anywhere.

So what is Gatsby?

Gatsby does the right thing by default.

So what is Gatsby?

Gatsby makes developing for the web fun.

Thanks!

Jason Lengstorf

Jason Lengstorf
Follow me on Twitter: @jlengstorf