A presentation at FrontConf in in Munich, Germany by Nicolas Goutay
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)
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 ☺
GatsbyJS is a library that adds powerful static capabilities to React and packs many performance optimizations, making websites fast — by default. Gatsby plugins allows any datasource into a Gatsby-powered website with the expressiveness of GraphQL. Lets learn how to make our own on a fun example!
Here’s what was said about this presentation on social media.
for free. You
can too.