Fast by Default : Near Instant Load Times at Scale with GatsbyJS

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