I'm Georgi Yanev

💜 the Web, #perfmatters 🚀

JAMstack with:
Gatsby and Netlify


1. What is the JAMstack?

2. Netlify overview

3. Gatsby deeper look

4. Examples & Demos

Before we begin...

How many people have heard about the JAMstack before?

How many have used Netlify?

How many have used Gatsby?

What is JAMstack?

JAMstack diagram

const { J } = JAM

"Any dynamic programming during the request/response cycle is handled by JavaScript, running entirely on the client. This could be any frontend framework, library, or even vanilla JavaScript."

const { A } = JAM

"All server-side processes or database actions are abstracted into reusable APIs, accessed over HTTPS with JavaScript. These can be custom-built or leverage third-party services."

const { M } = JAM

"Templated markup should be prebuilt at deploy time, usually using a site generator for content sites, or a build tool for web apps."

Some examples

JAMstack examples

Core ideas

📈 Better Performance
🔐 Higher Security
💵 Cheaper, Easier Scaling
😍 Better Developer Experience

What the JAMstack is NOT?

  • Not a silver bullet
  • Not about specific framework or library (bring your own)

Consider the Trade-offs

  • Engineering is all about making the right trade offs based on your requirements
  • Choose the right approach for your project
JAMstack examples

Comparison of different rendering strategies

Server vs Browser rendering diagram
Server vs Browser rendering diagram, Gatsby highlighted
  • Dev Experience
  • Free Tier
  • Application Delivery Network (ADN)
  • Continuous Deployment
  • SSL Certificates
  • Custom Domain
  • Auto PR Previews!
  • Netlify Functions
  • Netlify Identity
  • Netlify Forms

30 sec deploy demo

Auto deploy from a repository

  • GitHub, Gitlab, Bitbucket
  • Auto deploys from branch with a build command
  • Blazing fast websites and apps with React
  • Modern web tech without the headache
  • Bring your own data
  • Deployable anywhere
  • Progressive Web App (PWA)
  • Dev Experience
  • Rich ecosystem
  • Amazing community 💜
Tweet 2

But seriously, how fast is Gatsby?

Gatsby default starter Lighthouse score

Performance matters!

  • Your users and Your business
  • Performance, Speed, User Satisfaction translate to Money
  • SEO benefits as of July 2018
  • Users are impatient
  • Alternatively slow sites lead to increased bounce rates
  • The next 1 billion users on the internet are coming
  • Bandwidth is expensive
WebP image format support across browsers

WebP image support

How does Gatsby help?

  • images could be up up to 70% of your site weight
  • gatsby-image is a highly optimized lazy loading image component
  • can serve WebP to browsers that support it
  • WebP could be up to half the size

One of the easiest ways to try out React and/or GraphQL with no prior experience


All of React

Gatsby architecture

How to get started?


Gatsby via CLI


Gatsby via CodeSandbox

Look for the green Netlify deploy button

Gatsby via deploy button

Or pass a starter repository to Netlify via:


Gatsby architecture focused on data sources

Data Sources

Let's try out GraphQL


Example JSON files


Gatsby plugins page


  • Reusable common functionality
  • Source plugins
  • Transformer plugins
  • Public vs Private


Gatsby starters page


Gatsby showcase

What can you build with Gatsby?

Simple sites

Gatsby showcase 2

Sites with plenty of high quality imagery

Gatsby showcase 1

Data visualization heavy apps

Gatsby showcase 3


Gatsby showcase 4


Gatsby showcase 5

Documentation sites

Gatsby showcase 6

My projects and learnings


Georgi showcase 1
Gatsby, Contentful, Netlify, Google Maps, Open Weather Map, Material UI, Markdown, JSON


Georgi showcase 2
Gatsby, Netlify, Markdown, Styled Components, Sitemap, RSS feed


Georgi showcase 3
Gatsby, Contentful, Netlify, React Reveal, React Icons

All these projects are open source


If you want to learn more

Gatsby swag


Consider contributing and get awesome swag.

Great way to learn. The community is super helpful!


  1. Performance matters
  2. Building things with Gatsby and Netlify is fun
  3. Go build something

Thank you!

Let's continue the discussion on

Happy to also talk about

🚁 Flying FPV drones
✍ Writing a book
🔁 Contributing to OSS
jumpalottahigh GitHub profileDrone build 1Drone build 2jumpalottahigh GitHub PRs