La performance joue un rôle majeur dans le succès de tout projet Web. Un site Web rapide offre une meilleure expérience utilisateur, augmente la rétention des visiteurs et augmente les revenus (ROI). En contrepartie, il peut être difficile et long de parvenir à des temps de chargement en millisecondes au niveau du développement d’un projet Web. Gatsby est un générateur de site Web moderne, gratuit et open source, basé sur React, qui permet de créer et de déployer facilement des sites Web ou des applications ultrarapides. Il combine les données de multiples sources (CMS, API, Markdown, BD, JSON) en une interface GraphQL uniforme et vous permet ensuite de créer des interfaces React. Enfin, Gatsby utilise plusieurs technologies modernes JavaScript et CSS afin de fournir de hautes performances, puis construit votre site Web sous forme de fichiers prêt à être déployé sur un réseau de distribution de contenu (CDN). Venez découvrir Gatsby!

1. RÉMY SAVARD @remysavard #WAQ19#GatsbyJS

3. DONNÉES
TECHNOLOGIES
DÉPLOIEMENT

5. </>C

6. C

7. API
API
CONTENU
CONTENU

8. CONTENU
CMS
CONTENU
CONTENU
API
API

9. CONTENU
CMS

10. BASE DE DONNÉESSERVEUR WEB
CONTENU BACK-END
UI
CODE
+
EXTENSIONS
GABARITS
FRONT-END
+
CSS

11. BASE DE DONNÉES
CONTENU CODE +
GABARITS
FRONT-END
SERVEUR WEB
BACK-END
UI
API

12. CONTENU
CODE +
GABARITS
FRONT-END
SERVEUR WEB
SERVEUR WEB
CODE +
GABARITS
FRONT-END
SERVEUR WEB
CODE +
GABARITS
FRONT-END
SERVEUR WEB
?BACK-END
UI
API
BASE DE DONNÉES

13. </>

22. ▸ Planification et métriques (5)
▸ Fixer des objectifs réalistes (3)
▸ Définir l’environnement (8)
▸ Optimisations des Builds (13)
▸ Optimisations des Assets (5)
▸ Optimisations de la livraison (11)
▸ HTTP/2 (7)
▸ Tests et surveillance (4)
FRONT-END PERFORMANCE CHECKLIST 2019 - SMASHING MAGAZINE
56
https://www.smashingmagazine.com/2019/01/front-end-performance-checklist-2019-pdf-pages/

23. GATSBY
HELPS DEVELOPERS BUILD
BLAZING FAST WEBSITES AND APPS

25. DONNÉES

30. + 264 EXTENSIONS
DE SOURCE

31. EXTENSIONS DE
TRANSFORMATION

35. TECHNOLOGIES

39. https://developers.google.com/web/fundamentals/performance/critical-rendering-path/

42. https://jmperezperez.com/svg-placeholders/

46. DÉPLOIEMENT

53. QUI ?

54. 50 000 PAGES ?
https://www.danielwellington.com/ca/

55. RE-BUILD ?

56. NPM INSTALL -G GATSBY-CLI

57. Merci
RÉMY SAVARD @remysavard #WAQ19#GatsbyJS

58. ▸ https://www.gatsbyjs.org/
▸ https://www.gatsbyjs.com/
▸ https://en.wikipedia.org/wiki/Headless_content_management_system
▸ https://www.contentful.com/r/knowledgebase/headless-and-decoupled-cms/
▸ https://www.brightspot.com/blog/decoupled-cms-and-headless-cms-platforms
▸ https://www.coredna.com/blogs/headless-vs-decoupled-cms
▸ https://jamstack.org/
▸ https://medium.com/codingthesmartway-com-blog/top-static-site-generators-for-2019-26a4c8afcc05
▸ https://www.smashingmagazine.com/2019/01/front-end-performance-checklist-2019-pdf-pages/
▸ https://davidwalsh.name/introduction-static-site-generators
▸ https://snipcart.com/blog/choose-best-static-site-generator
▸ https://stateofjs.com/
▸ https://httparchive.org