agency-training

Link to slides

Modules

Day 1

What is Gatsby?

• React
• GraphQL
• Node.js
• Tooling (webpack, Babel, Parcel)

Why Gatsby?

The Data Layer

The Build Lifecycle

• gatsby-node
• gatsby-ssr
• gatsby-browser

Starters

Node Management

Dependency Management

• npm/yarn
• lock files
• sharp

Typescript

Styles

GraphiQL

Creating Pages

Flex Pages

Queries and Fragments

gatsby-plugin-image

Schema Customization

Creating GraphQL Relationships

Debugging Build Failures

Day 2

Fonts

SVGs

• imports vs. sprites

Bundling

Code-Splitting

Lazy-Loading

Render Modes

Gatsby Functions

Authentication

Client Side Routes

Themes

Memory Issues

• context stuffing
• debugging

Build Output

• HTML
• page-data.json, etc.

Preview

Incremental Builds

• data update
• code update

Measuring Performance

• CWVs
• WebPageTest
• PageSpeed
• DevTools

Third-Party Libraries

Content Modelling in the CMS