A presentation at Human Talk x Software Crafters Lyon in in Lyon, France by Matthieu Auger
FAST BY DEFAULT ⚡ Des chargements de page quasi instantanés avec GatsbyJS
Salut 👋 Lyonnais depuis 3 semaines CTO Lyon ♥ JAMstack - 🎨 Daltonien @matthieuauger
LE WEB EST DEVENU BOULIMIQUE
COMMENT EN ESTON ARRIVÉ LÀ ?
AU COMMENCEMENT, ÉTAIT LE STATIQUE 💎 Des chiers HTML purs servis par un serveur 🥇 Première page créée sur le Web fi ⚡ Simple. Léger. Scalable. Rapide
PUIS, LE SERVER RENDERING FÛT ROI 👑 🐘 PHP, Python, Ruby 💻 L’HTML est généré coté serveur 💥 Dynamisme
OL’ MYSPACE
AUJOURD’HUI MARQUE LE RÈGNE DES SINGLE PAGE APPLICATIONS (SPA) ⚙ Angular, React, Vue… 📺 L’HTML est généré coté client 🖱Interactivité
LES SPA ONT PERMIS LA CRÉATION DE TRÈS BONNES APPLICATIONS
MAIS ONT CONSIDÉRABLEMENT RALENTI L’EXPÉRIENCE UTILISATEUR
PEUT-ON RÉCONCILIER L’INTERACTIVITÉ DES SPA D’AUJOURD’HUI AVEC LA PERFORMANCE DES SITES STATIQUES DES ANNÉES 90”?
MEET GATSBYJS 1⃣ Vous codez en React 2⃣ L’application est compilée en HTML (site statique) au moment du build
REQUEST FLOW Can I have the homepage please? yeah, take this HTML le, a snapshot of the page I made during the build sweet! i can see the content rst… fi fi React environment is loaded client-side and now click around! Following navigation is managed by React
EST-CE QUE GATSBY TIENT SES PROMESSES ?
NOUS AVONS VOULUS RÉUNIR LA COMMUNAUTÉ JAMSTACK À PARIS
9 MEETUPS ONT EU LIEU, 500 MEMBRES NOUS ONT REJOINT
NOUS VOULIONS UN SITE RAPIDE POUR COMMUNIQUER
NOS BESOINS 📅 A cher les meetups depuis l’API meetup.com 📸 Gallerie de photos ffi ⚡ Performant
📅 AFFICHER LES MEETUPS DEPUIS L’API DE MEETUP.COM
FLOW DE DONNÉES D’UN SITE GATSBY 1⃣ Récupérer la donnée depuis une source 2⃣ Requêter la donnée avec GraphQL 3⃣ Injecter la donnée aux composants React
1⃣ RÉCUPERER LA DONNÉE DEPUIS UNE SOURCE AVEC LES SOURCE PLUGINS
LES SOURCE PLUGINS SONT DES PACKAGES NPM
gatsby-con g.js
fi
module.exports = ({ … plugins: [ { resolve: gatsby-source-meetup, options: { key: process.env.MEETUP_API_KEY, groupUrlName: JAMstack-paris, status: “upcoming,past”, desc: “true”, page: 10 } } ] });
LA DONNÉE EST RÉCUPÉRÉE ET MAPPÉE AU MOMENT DU BUILD RÉCUPÈRE LA DONNÉE SUR L’API MEETUP
2⃣ REQUÊTER LA DONNÉE AVEC GRAPHQL 📢 Language de requête 💙 Créé par Facebook 🥢 Requête seulement ce dont vous avez besoin
LA DONNÉE PEUT ÊTRE REQUÊTÉE DANS LE CODE Homepage.js
const data = useStaticQuery( graphqlquery { meetupGroup { events { id name description local_date venue { name address_1 city } link status } name } } );
3⃣ INJECTER LA DONNÉE AUX COMPOSANTS REACT Homepage.js return ( <Layout> {data.meetupGroup.events.map(pastMeetup => { return <Meetup meetupInfo={pastMeetup} /> })} </Layout> )
AJOUTER UN PEU DE CSS 🎨 … LANCER UN BUILD ⚙
JAMSTACK.PARIS 1.0 🎉
☑ CHECKLIST POUR TRAVAILLER AVEC DE LA DONNÉE 1⃣ Chercher, installer et con gurer le plugin source ⚙ 2⃣ Forger sa requête GraphQL avec GraphiQL 🕵 fi 3⃣ Injecter la donnée à vos composants React 💉
⚡ PERFORMANCE
📸 TRANSITION FLUIDE
GATSBY DÉCOUPE VOTRE CODE PAR PAGE Homepage JS Gallery JS GATSBY-IMAGE N’EST CHARGÉE QUE SUR LA PAGE GALLERY
LES SOUS-PAGES SONT CHARGÉES AU SURVOL DES LIENS
AUTRES OPTIMISATIONS 🖱Native Lazy Loading 🎨 Inline Critical CSS 2⃣ HTTP2
GATSBY TIENT SES PROMESSES
LES LIMITES DE GATSBY
LE TEMPS DE BUILD EST CORRELÉ À LA TAILLE DU CONTENU “builds are slow (about 1.5-2 times slower than my PC) and […] 15 minutes is sometimes easy to reach” Source: https://oioannou.com/build-on-circleci-deploy-netlify
LES ERREURS PEUVENT ÊTRE MYSTÉRIEUSES
EN RÉSUMÉ 😍 Super bonne expérience 📓 Très bonne documentation 👫 La community est positive et aidante ❤ L’approche hybride dynamique et statique 🏰 Toujours en recherche d’un projet professionnel pour lequel utiliser Gatsby
SI VOUS VOULEZ DÉCOUVRIR GATSBY 📒 https://www.gatsbyjs.org/docs/ 📹 https://egghead.io/browse/frameworks/gatsby https://github.com/gatsbyjs/gatsby
MERCI
GatsbyJS is a library that adds powerful static capabilities to React-powered webapps and packs many performance optimizations, making websites load instantly, by default.
Gatsby plugins allows any datasource, including custom APIs, into a Gatsby-powered website with the expressiveness of GraphQL.
In this talk we will cover the following topics:
By the end of the talk, the audience will understand why GatsbyJS may be the next game-changer in terms of performance & DX and when to start with (or migrate over to) GatsbyJS.
for free. You
can too.