USING GATSBY TO SUPERCHARGE YOUR STATIC SITES

RAY GESUALDO | Connect.Tech 2018

HI!

I am Ray Gesualdo

I love great narrative, epic music, interesting code

You can find me everywhere at @raygesualdo

UI Engineer, Front End Enablement

#1 Place to Work in Atlanta

#4 Fastest Growing Software Company in N.A. (Deloitte)

A Hist. of the Internet

1

-Infinity - 1995

The Birth of the Internet

1995

Tables rule all

1995 - 1997

PHP drops

1996

CSS and JS make an appearance

2000 - 2005

The rise of the CMSes

2006

jQuery tames the cross-browser beast

2005 - 2012

CSS2.1 and CSS3 provide better styling

2007

Broadband overtakes dial-up internet

2009

Node.js moves JavaScript server-side

2010s

RESTful APIs become commonplace

2010s

Single Page Apps are everywhere

2010s

CDNs trivialized distributing static assets

2013

GitHub adds Jekyll to GitHub Pages

2015

ES2015 vaults JavaScript forward

2016

Mobile devices surge in popularity

2015 - Today

Static site hosts and generators emerge

Benefits of Static Sites

2

Static Site Generators

Performance

DATABASE

APP SERVER

WEB SERVER

CLIENT

CDN

Performance

CLIENT

CDN

Durability

CLIENT

CDN

Maintenance

CLIENT

CDN

Web Servers

App Servers

Databases

Security

CLIENT

CDN

Web Servers

App Servers

Databases

JAMstack

CLIENT

CDN

APIs

Why Gatsby?

3

The Build Process

1

Content (Markdown)

Every site starts with content.

2

Templates (React)

Templates provide the structure and context necessary to display site content.

3

Compiler (Babel/Webpack)

Compiling the content and templates brings about the final product.

4

Static Files (HTML, JS, CSS)

Static files are ready for distribution.

It’s React

With React, you get a fully expressive template system and so much more!

It’s React

  • SASS/LESS/Stylus
  • CSS Modules
  • CSS-in-JS
  • Layouts
  • Tables
  • Charts
  • UI Kits
  • Bootstrap
  • Material UI
  • Animations
  • Forms
  • Intercom
  • Segment
  • Google Analytics
  • Preact
  • TypeScript
  • Flow
  • ReasonML

If it can be server-side rendered, it will work with Gatsby!

PLUGIN

The Plugin System

Most functionality is a

Plugin System

Build Config

Build Process

Browser Runtime

Data Extraction

The Plugin System

  • A large ecosystem of plugins already
  • Both core team and community
  • Development process is well-documented

Data Fetching Layer

template: blog

Data Fetching Layer

site {

siteMetadata {

title

siteUrl

}

}

Content

GraphQL API

Multiple Data Sources

query IndexQuery {

allContentfulFeature() {

edges {

node {

id

title

icon

description {

description

}

}

}

}

allWordpressPost() {

edges {

node {

id

slug

status

title

content

featured_media_url {

alt_text

source_url

}

}

}

}

}

Multiple Data Sources

Remote Sources

  • WordPress
  • Contentful
  • Stripe
  • Drupal
  • NPM
  • Medium
  • Twitter
  • GitHub

Supported Local File Types

  • Markdown
  • JSON
  • YAML
  • TOML
  • CSV
  • PDF
  • XML
  • Excel
  • DOCX
  • IPYNB

  • MongoDB
  • Shopify
  • GraphCMS
  • Prismic
  • RSS
  • Google Sheets
  • Airtable
  • Firebase

Performance and PWA Features

43 checkboxes

Performance and PWA Features

Regular HTML Page

Code-split JS Loads

React + Service Worker

Offline Access

Page Data Prefetched

Performance and PWA Features

Developer Experience

Documented

Fast

Fun

Why Gatsby?

It’s React

The expressiveness of React with the entirety of the React ecosystem.

The Plugin System

A well architected system that gives deep access to Gatby’s configuration and build lifecycle.

Multiple Data Sources

Any number of content sources can be queried simultaneously and used throughout a Gatsby site.

Performance and PWAs

Performance best practices are built into the tool and PWA features can be enabled trivially.

Data Fetching Layer

Content is abstracted away from templates which declare the data they require via GraphQL queries.

Developer Experience

It’s well documented. It’s fast. It’s fun.

Next Steps

4

Getting Started

Official Tutorial

Starters

Repl.it - Gatsby

More to Learn

  • Programmatically creating pages
  • Building a plugin
  • Component query fragments/StaticQuery
  • Image transformations
  • Customizing the build pipeline

Additional Resources

THANKS!

Any questions?

You can find me at

@raygesualdo & raygesualdo.com

Using Gatsby to Supercharge Your Static Sites - Google Slides