Pourquoi nous avons choisi Gatsby ?

Chez Attineos, on aime bien la nouveauté, mais on aime surtout les technologies innovantes et qui apportent un réel gain à l’utilisateur final. Pour transmettre cette vision, nous avons décidé de réécrire notre site de zéro en incorporant des technologies du futur telles que Gatsby ou React. A priori, cette idée a porté ses fruits car vous avez le résultat sous les yeux !

Disclaimer: Je suis un intimement convaincu que Gatsby, et plus généralement React, font partie des technologies Web du futur. Cet article regroupe donc les raisons qui me poussent à défendre ces technologies, et est donc forcément un peu (beaucoup) biaisé !

C’est du React !

React est une librairie JS pour le développement d’interfaces créée par Facebook vers 2013. Ayant travaillé ces 3 dernières années avec, je ne peux qu’admirer les avancées proposées par rapport à un développement plus ancien en JQuery par exemple.

Globalement React est un moteur de templates, sauf que son approche composants permet de réaliser des interfaces modulables et réutilisables où chaque composant gère lui-même son cycle de vie et ses actions. Au final, on reste proche du DOM HTML avec le concept de composants parents/enfants, mais on obtient aussi un flux de données clair et séparé entre les événements (qui remontent l’arborescence) et le rendu (qui descend le long de cette arborescence).

C’est rapide !

React est rapide. Ce n’est plus un sujet à prouver! Le rendu côté client permet d’afficher le contenu d’une page sans avoir à charger la totalité de la page depuis le serveur.

On a donc d’une part un code React ultra lisible et ultra rapide côté client. Mais d’autre part, on a la puissance d’un rendu statique ultra performant grâce à Gatsby. En effet, à chaque changement de contenu, les pages du site sont régénérées et construites lors de la mise en production, pour être sauvegardées sur le serveur.

Lorsqu’un client va arriver sur une page du site, il va d’abord recevoir une page totalement statique, contenant le rendu final. Cette version est ultra rapide et permet un premier rendu visible en quelques millisecondes. Ensuite, son navigateur va recevoir de manière transparente le reste de l’application React. C’est-à-dire que pendant que l’utilisateur est déjà en train de lire le contenu de la première page, les composants moins importants tels que les images ou les parties interactives du site vont se charger en arrière plan. Une fois que ces parties moins importantes seront prêtes, elles vont venir remplacer une à une les parties statiques affichées sans que l’utilisateur ne s’en rende compte.

Pour aller encore plus loin, Gatsby utilise une technique appelée link prefetching. Chaque lien interne au site va pré-charger sa destination avant que l’utilisateur ne clique dessus. C’est à dire que lorsque l’utilisateur aura pris la décision d’accéder à telle ou telle page, le contenu aura déjà été téléchargé et sera déjà prêt à s’afficher.

L’architecture

Il faut voir l’architecture de Gatsby comme une immense base de données dans un immense tunnel. Cette base de données est représentée par un schéma GraphQL, c’est à dire que l’on peut la requêter comme bon nous semble.

Au démarrage, la base de données est vide. Le tunnel commence à lire tous les plugins spécifiés par l’utilisateur. Gatsby va commencer par exécuter les source plugins, qui vont remplir la base de données à partir d’autres sources. Il va ensuite générer la liste des pages a partir des données dans le GraphQL. Enfin, pour chaque page on a la possibilité de lancer une requête GraphQL supplémentaire pour récupérer les données de cette page. Le résultat est ensuite exécuté, sauvegardé sur le disque puis compilé avec Webpack.

Cette architecture en tunnel permet de se brancher à n’importe quel moment de ce fonctionnement de base pour y rajouter du code customisé. Par exemple, le plugin analytics insère un code analytics a la fin de chaque .html généré. Le plugin source filesystem permet de charger dans la base de données des fichiers du disque dur. Le plugin prism Markdown permet de parser du Markdown contenu dans le GraphQL pour en faire un rendu html.

Gatsby intègre aussi un éditeur GraphQL, qui permet simplement de consulter le format de données. Avec cet outil, c’est relativement simple de se débrouiller en GraphQL, même sans en avoir fait auparavant. La documentation Gatsby nous offre en prime un tuto de prise en main extrêmement claire.

L’expérience développeur

C’est totalement subjectif mais chaque feature de Gatsby a été pensée pour être fun à utiliser! Quelques lignes de configuration, un yarn install et on se retrouve avec un environnement et des plugins prêts à fonctionner. Peu importe la source de données, à partir du moment où il y a un standard, il y a un plugin. Gatsby supporte le live-reload (rechargement auto), donc plus besoin de rafraîchir manuellement la page, les modifications dans le code sont visibles en live en quelques secondes. Enfin, la documentation pour le projet est solide, propre et claire!

Embarquer un nouveau développeur front sur ce projet est trivial. Un simple yarn install && yarn run dev permet d’avoir instantanément un environnement de dev iso-prod, avec live-reload et avec des données prêtes à tester. Le tout sans suivre 200 lignes de README obscures, installer X dépendances a la main, et se connecter à je ne sais quelle base de données.

Finies les pertes de temps inutiles, finis les fichiers de config à rallonge, et finies les prises de têtes parce qu’il manque quelque chose sur le PC du petit nouveau…

Ce petit article vous à convaincu? Allez plus loin et découvrez comment héberger votre site statique nouvellement créé sur netlify !