Gatsby Workshop

Jan 15, 2019 | Syracuse JS Meetup | Syracuse CoWorks

What is Gatsby?

Static Site Generator built in React & GraphQL

TL;DR: It makes lightning fast sites with modern web technologies 🚀

Who uses it?

• Reactjs.org - The creators of React are using Gatsby.
• stitchfix.com - Mike Vormwald's employer's public facing site is using Gatsby
• (Soon) syracuse.io - Mike and I are rewriting it from Hugo into Gatsby
• More on Gatsby's Site Showcase

Some Notes

• You don't need much of a background with React.
• I'll go into GraphQL but give fairly small yet concrete examples of how we'll use it.
• I'm going to focus on key portions of Gatsby & the features people quickly notice.
• If you understand basic HTML, CSS, JS, I hope you should be able to follow along

Setup

npx gatsby new my-gatsby-site

or

Gatsby on Code Sandbox

Only need a GitHub account to login to Code Sandbox.

Start up the site

gatsby develop if running locally. Automatically spins up on Code Sandbox

What are some interesting things we see?

Some Gatsby magic

• No flash between page loads.
• The image goes from a low res to a high res as it loads in

Gatsby <Image> and <Link>

React Components that wrap <img> and <a> with some enhancements 🎉

Gatsby-link Component

• href -> to
• Loads pages asynchronously through Intersection Observer API
• Still is an <a> tag when rendered out.
• Note: Use Only for internal links. Won't do anything for external links

Async Loading

per-route Code splitting, intersection observer, prefetching? Huh? 🤔

Simplifying all of the jargon, links using <Link> will load the content that would load when you click the link even before you click on it.

Gatsby-image Component

• lazy loads (Also with Intersection Observer). a high resolution image may be nice but it shouldn't be loaded on first render or on your phone.
• Uses the <picture> tag. Passes image to fit your viewport.
• Will render full size image as well using Intersection Observer

⚠️ Caveat: only use Gatsby-image with JPG or PNG

The internals of gatsby-image only enhances JPGs and PNGs.

For something like SVG, import it manually given it is already optimized for any viewport.

import astro from '../images/gatsby-astronaut.svg'

return <img src={astro} />

Let's Explore the starter some more

Look around the starter and see what other pages / components are baked into the template.

• error routes (404.js)
• container components / site-wide components (layout.js, header.js)
• SEO capabilities (seo.js)

Head to the bathroom, get a drink, relax for a bit.

Be back in 10 minutes

GraphQL Intro

Gatsby's main data layer where everything can be sourced from

What is GraphQL?

A data query language developed by Facebook.

Rather than hitting tons of URLs as you do in a REST api, you have one endpoint to create queries from.

Sample Query

{
  allFile {
    edges {
      node {
        # Data from all files being sourced from the filesystem
      }
    }
  }
}

Let's explore things with GraphiQL

Where does allFile come from?

Plugins! gatsby-transformer-filesystem specifically.

Let's look at gatsby-config.js for a deeper look.

Entry for gatsby-source-filesystem

{
  resolve: `gatsby-source-filesystem`,
  options: {
    name: `images`,
    path: `${__dirname}/src/images`,
  },
}

Let's learn how to use Gatsby-Image

Gatsby-Image uses gatsby-transformer-sharp to do the majority of the work

• gatsby-transformer-sharp: Transformer plugin to take images and transform them with the Sharp image processing Library
• allows for custom sizes, lazy loading, svg traces
• Supports jpg, png. (For gif & svg, load them in manually)

Image query

const query = graphql`
  query {
    placeholderImage: file(relativePath: { eq: "gatsby-astronaut.png" }) {
      childImageSharp {
        fluid(maxWidth: 300) {
          ...GatsbyImageSharpFluid
        }
      }
    }
  }
`;

StaticQuery W/ Gatsby-Image tag

<StaticQuery
  query={/* Query from last slide */}
  render={data => {
    return <Img fluid={data.placeholderImage.childImageSharp.fluid} />;
  }}
/>

What else can we do with Plugins?

• Transform local data - gatsby-transformer-remark, gatsby-mdx, gatsby-transformer-csv
• Load content from CMSs or APIs - gatsby-source-meetup, gatsby-source-wordpress, gatsby-source-contentful
• Add PWA capabilities - gatsby-plugin-offline, gatsby-plugin-manifest
• And so much more. Currently over 600 plugins for Gatsby

What did we learn

• Core fundamentals of how Gatsby can make speedy sites
• Sourcing content from GraphQL apis
• ability to enhance gatsby with plugins
• powerful tech built into web platform (<picture>, Intersection Observer)

Want to help out?

As said earlier, Mike and I are developing Syracuse.io with Gatsby. If you'd like to help out, visit https://github.com/syracuseio/syracuseio.

We're willing to pair program if you'd like some help with contributing

Want free swag?

If you get a single PR merged into Gatsby, you can get one product in their the Gatsby store for free (Exlcuding their higher costing products. ex: sweaters, pj pants)

Resources

• Gatsby Docs: https://www.gatsbyjs.org/docs/
• Gatsby Plugin Library: https://www.gatsbyjs.org/plugins/
• @gatsbyjs on Twitter

Thank you!