The Great Gatsby

From the roaring 20s to the blazing fast 21st century

whoami

UI Designer

Frontend Developer

Remotely for @frylondon

@tricinel on Twitter and Github

What today is about

  • Leonardo DiCaprio
  • Static site generators
  • Gettting started with GatsbyJS
  • GraphQL and content
  • Deploying your site
  • Live demo

What today is not about

  • How React works
  • How GraphQL works
  • Detailed tutorial of using GatsbyJS
  • Why not just use AwesomeGenerator?
  • Leonardo DiCaprio

Who is Gatsby?

Jay Gatsby

What is GatsbyJS

Blazing-fast static site generator for React

...on steroids

Why static site generators?

  • What's a static site generator?
  • Static vs. Dynamic website

how dynamic websites work

how static websites work

how static websites work with cdn

Static websites advantages

  • No server
  • No database interactions
  • No backend whatsoever
  • Easy to distribute globally

Static websites are fast!

So hot right now

Why GatsbyJS?

  • React
  • Performant
  • Ecosystem
  • Data layer
  • Easy to get started

React


import React from 'react';
import SiteWrapper from '../components/Layout/SiteWrapper';

const TemplateWrapper = ( { children }) => (
  
    {children()}
  
);

export default TemplateWrapper;
  

Performance

53%
of visits are abandoned if a mobile site takes more than 3 seconds to load

1 out of 2
people expect a page to load in less than 2 seconds

Source: DoubleClick Mobile Speed Matters

Ecosystem

  • Source plugins
  • CSS-in-JS and SSR plugins
  • Offline with service workers
  • Application manifests
  • Image optimisations
  • and more

~320
Gatsby plugins

Data layer

  • Can come from anywhere
  • No vendor lock-in

~100
Gatsby source plugins

Easy to get started

  • Easy-to-follow tutorial
  • Gatsby Starters

What are you building?

  • Blog
  • Documentation
  • Portfolio
  • Crowdfunding
  • Presentations
  • and more

~65
Gatsby starters

Why not use GatsbyJS?

  • User input
  • No admin interface
  • Real-time content

How to get started


$ yarn global add gatsby-cli
  

$ gatsby new my-awesome-site
$ cd my-awesome-site
$ gatsby develop # Open http://localhost:8000
  

GraphQL

  • Pull data and content via plugins
  • Needed during build-phase
  • How much should you learn?

Simple query


query layoutsAboutQuery {
  site {
    siteMetadata {
      title
      description
    }
  }
}
  

module.exports = {
  siteMetadata: {
    title: 'My Gatsby site',
    description: 'An amazingly fast website done with GatsbyJS',
    keywords: 'gatsby website, fast, static site'
  }
};
  

{
  site: {
    siteMetadata: {
      title: 'My Gatsby site',
      description: 'An amazingly fast website done with GatsbyJS'
    }
  }
}
  

More complex query


query postByPath($path: String!) {
  postByPath: markdownRemark(frontmatter: { path: { eq: $path } }) {
    html
    frontmatter {
      date(formatString: "MMMM DD, YYYY")
      path
      title
    }
  }
}
  

---
path: '/my-awesome-post'
date: '2018-06-28'
title: 'My awesome post'
---
# Awesome post

Here be dragons!
  

GraphiQL

An in-browser IDE for exploring GraphQL

graphiql

Content

  • File system
  • Contentful
  • Wordpress
  • Github
  • Medium
  • Twitter

What I've used

  • gatsby-source-filesystem
  • gatsby-transformer-remark

How GatsbyJS works

how gatsbyjs works

GatsbyJS Build Step

  1. Source plugins
  2. Generate GraphQL schema
  3. Create pages and layouts
  4. Run GraphQL queries
  5. Write static pages

How fast are Gatsby sites?

  • Time to first paint
  • Time to interactive

Performance tools

  • Lighthouse
  • webpagetest.org

A typical GatsbyJS site

< 1.5s
Time to first paint

< 2.5s
Time to interactive

3G device with a slow CPU (e.g. Moto G4)

A typical GatsbyJS site

< 250ms
Time to first paint

< 300ms
Time to interactive

Desktop with no CPU throttling

Why are Gatsby sites so fast?

  • Inline critical CSS
  • Per-route code/data splitting
  • Prefetch soon-to-be-needed resources
  • Soon...Machine learning

Deploying a Gatsby site

  • Amazon S3
  • Github pages
  • Surge.sh
  • Now.sh
  • Netlify

How Netlify works

how netlify works

Netlify FTW

  • HTTPS
  • HTTP/2
  • Custom domains
  • Atomic deploys
  • Lambda functions
  • Forms and Identity management

Where it shines

  • Deploy previews
  • Branch deploys

Deploy previews

deploy previews

Branch deploys

  • Automatic per-branch deploys
  • Minimal setup

It's free!





*No one paid me to say these things!

Today's takeaway

Make building websites great again

Links

Thank you!

Live demo