Fast by Default: Extending GatsbyJS with Plugins

FrontConf 2k19 — Munich — 27/04/2019 Fast by Default: Extending GatsbyJS with Plugins & /phacks

👋 Hi! My name is Nicolas Goutay. I am a Web Performance Evangelist at Theodo. I love building side-projects, and I’m a top GatsbyJS contributor. I have stage fright am really excited to be with all of you today! ☺ You can find me on Twitter/GitHub at @phacks. & /phacks

What is GatsbyJS? & /phacks

What is GatsbyJS? Static Site Generators (SSGs) Progressive Web Apps (PWAs) Jekyll, Hugo, Middleman React, Vue, Angular 😎 Build performant websites 📱 App-like, snappy experience 📟 Little to no backend 🏗 Easily reuse code & components 🎨 Off-the-shelf themes ✨ Build interactive websites & /phacks

What is GatsbyJS? Static Progressive Web Apps 😎 Build performant websites 📟 Little to no backend 🎨 Off-the-shelf themes 📱 App-like, snappy experience 🏗 Easily reuse code & components ✨ Build interactive websites & /phacks

What is GatsbyJS? The SSG part relies on NodeJS and GraphQL The SPA part is a fully-featured React application & /phacks

Gatsby Plugins & /phacks

Gatsby Plugins There are two ways to inject external data into a Gatsby website: & /phacks

Gatsby Plugins There are two ways to inject external data into a Gatsby website: 🛠 At build-time (GraphQL) & /phacks

Gatsby Plugins There are two ways to inject external data into a Gatsby website: 🛠 At build-time (GraphQL) * At runtime (React, fetch…) & /phacks

Gatsby Plugins 🛠 What kind of data are suitable for build time injection? Static data (e.g. blog posts) or weakly dynamic data (where one can wait ~1 minute for them to deploy to production, e.g. e-commerce catalog updates). & /phacks

Gatsby Plugins 🛠 What kind of data are suitable for build time injection? Static data (e.g. blog posts) or weakly dynamic data (where one can wait ~1 minute for them to deploy to production, e.g. e-commerce catalog updates)

• What kind of data are suitable for runtime injection? Highly dynamic data (e.g. real-time notifications, data controlled by users). & /phacks

Gatsby Plugins Gatsby plugins allows one to inject data from any datasource (remote API, database, filesystem…), through a GraphQL interface, into your Gatsby website’s React components. They abstract the complexity of remote datasources away from the frontend developer. & /phacks

Gatsby Plugins https://theatres-parisiens.fr https://github.com/phacks/theatres-parisiens & /phacks

Gatsby Plugins & /phacks

Gatsby Plugins & /phacks

Gatsby Plugins & /phacks

Gatsby Plugins & /phacks

A small story: From Digital to Analog and Back Again & /phacks

From Digital to Analog and Back Again & /phacks

From Digital to Analog and Back Again 😍🎧 & /phacks

From Digital to Analog and Back Again 😭💸 & /phacks

From Digital to Analog and Back Again & /phacks

From Digital to Analog and Back Again https://phacks.github.io/showcase-for-discogs https://github.com/phacks/showcase-for-discogs & /phacks

From Digital to Analog and Back Again 🤔 Two problems with the naive approach 🐌 Slow loading times as I fetch 60+ resources from the Discogs API & /phacks

From Digital to Analog and Back Again 🤔 Two problems with the naive approach 🐌 Slow loading times as I fetch 60+ resources from the Discogs API 👆 Hitting the Discogs API rate limit means that only one person can visit the website every minute & /phacks

From Digital to Analog and Back Again 🤔 Two problems with the naive approach 🐌 Slow loading times as I fetch 60+ resources from the Discogs API 👆 Hitting the Discogs API rate limit means that only one person can visit the website every minute 😅 (I think I invented the litteral opposite of scalability) & /phacks

Building a Gatsby Plugin & /phacks

Building a Gatsby Plugin & /phacks

Building a Gatsby Plugin & /phacks

Live coding! & /phacks

FrontConf 2k19 — Munich — 27/04/2019 🙏 Thanks! Slides, links & GitHub sources will be available later on my Twitter: @phacks ☺