Aurevoir Wordpress, bonjour, Gatsby

Voilà maintenant plusieurs semaines que je n’ai publié aucun article. Ce n’est pas un manque d’inspiration, on pourrait même dire que c’est tout le contraire tant ma liste d’articles à faire ne cesse de s’allonger. J’étais en fait bien occupé à donner un coup de jeune à ce blog en utilisant un outil que j’affectionne tout particulièrement: Gatsby. Avant d’entrer un peu plus dans le détail sur ce qu’est Gatsby, laissez-moi vous présenter les raisons de ce changement.

WordPress commence à sentir le poids des années

WordPress est un système extrêmement complet qui propulse plus de 30% des sites internet dans le monde. Vous connaissez sans doute le pitch commercial et c’est juste énorme il faut bien l’avouer. Au fil des années, cet outil de blogging s’est vu rajouter de nombreuses fonctionnalités au point de devenir aujourd’hui un acteur majeur dans la création de sites internet de tous types. On ne compte plus les demandes de développement spécifique pour WordPress sur les sites de freelance.

Ce système qui ressemble à un couteau suisse du Web a pour moi un gros défaut : sa lenteur. Cette lenteur est principalement due aux nombreux appels à la base de données par le serveur pour piocher chaque information nécessaire pour l’affichage du site avec les fonctionnalités attendues.

Je pourrais également dire que la création d’un thème spécifique est un casse tête étant donné qu’il faut l’intégrer à la machinerie WordPress. Mais ce n’est pas la raison principale. La difficulté ne me fait pas peur :p bref, au lieu de rester bloqué sur une façon de faire qui ne me convenait vraiment pas, je me suis tourné vers React que j’utilisais depuis quelques temps déjà.

Gatsby, la rapidité à l’état pur.

Après de nombreux essais, je me suis tourné vers un outil que j’adore tout particulièrement: Gatsby. C’est ni plus ni moins une facette du futur du développement Web. C’est un outil de développement pour React qui permet de créer des sites qui se chargent à la vitesse de la lumière. C’est aussi ce que l’on appelle un générateur de « Static Progressive Web Apps ». Parfait représentant de ce que le JAMstack fait de mieux. Point définition : le JAMstack c’est une architecture moderne pour créer des sites rapides et sécurisés à l’aide de JavaScript, d’APIs et d’un Markup prérendu (d’où JAM).

Le chargement des pages se compte en quelques millisecondes et non pas en secondes, à la manière de ce que vous retrouvez dans vos applications mobiles natives sur iOS et Android. Le chargement est tellement rapide qu’il est souvent imperceptible pour l’oeil humain. Il se raconte que même Flash a eu l’impression que le chargement était instantané.

Comme vous pourrez le constater à l’usage, tout est ici optimisé pour se charger rapidement. Les images utilisent un chargement progressif afin d’éviter de bloquer le chargement de la page. Si nous imaginons un utilisateur dépourvu d’une bonne connexion internet, il ne se sentira pas lésé, car le contenu lui sera servi instantanément et les images seront progressivement chargées par la suite.

Je vais très bientôt publier un article pour vous détailler le fonctionnement de Gatsby, mais laissez-moi vous présenter succinctement comment opère la magie.

Un fonctionnement en 3 étapes

Pour qu’un site Gatsby puisse voir le jour, cela se passe en trois étapes.

Étape 1 : indiquez-lui votre source de données

Pour fonctionner, Gatsby a besoin de données. C’est la base de la recette : pas de page sans contenu. Vous n’imagineriez pas faire une omelette sans oeufs n’est-ce-pas ? Ces données peuvent se situer n’importe où et c’est là une des grandes forces de Gatsby.

Vous avez un site Wordpress, Drupal ou Joomla (ou que sais-je encore) avec des centaines de pages ? Pas de soucis, Gatsby peut récupérer tout le contenu de ces pages pour vous permettre de créer une version Progressive Web Apps.

Vous voulez récupérer les données d’une API distante du genre Google Maps ou Twitter et l’intégrer à vos pages ? Aucun problème.

Vous voulez que Gatsby traduise un fichier texte Markdown présent sur votre disque dur en une page internet qui décoiffe ? Pas de problème, ça peut se faire u

Tout cela se fait à l’aide de la puissance de GraphQL qui vous permettra de récupérer les données dont vous avez besoin et uniquement celles dont vous avez besoin.

Étape 2: Gatsby compile votre site

Une fois que vous avez indiqué à Gatsby comment traiter vos données et comment les présenter (c’est à dire faire votre travail de dévelopeur), vous n’avez plus qu’à demander gentiment à Gatsby de compiler votre site. Oui, j’ai bien dit compiler votre site. Un peu comme si vous compiliez une application iOS avec Xcode.

Gatsby va alors générer un ensemble de pages HTML et CSS saupoudrée d’une bonne dose de React pour que la magie opère. Le déploiement est alors d’un simplicité enfantine.

Étape 3 : déployer votre site

Ici, pas besoin d’un serveur à configurer et à gérer, car toutes vos pages sont créées lors de la compilation de sorte qu’elles tournent directement côté client. Tout ce qu’il vous faut c’est un hébergeur de site statique du type Netlify, GitHub Pages, AWS Amplify, ZEIT Now, etc. Pour commencer, il vous en coutera … 0 euro. Oui, ce type d’hébergement est souvent gratuit jusqu’à un nombre conséquent de visites. Ce type d’infrastructures c’est le cloud à l’état pur ce qui vous permet de servir n’importe quel utilisateur à la vitesse de l’éclair où qu’il se situe dans le monde. La seule chose que vous aurez à payer au départ c’est votre nom de domaine … !

Si vous utilisez GitHub en tant que contrôleur de version (ce que je ne peux qu’encourager étant donné que les dépôts privés sont maintenant gratuits), vous allez pouvoir déployer votre site en continu via Netlify ou AWS Amplify sans que vous n’ayez à vous soucier de quoi que ce soit. La seule difficulté ici est de taper git push, je suis certain que tout le monde peut surmonter cette épreuve. Une fois qu’on y a gouté, difficile de revenir en arrière.

Le futur commence dès maintenant

Gatsby fait partie de ces solutions qui permettent d’envisager un futur radieux pour le développement Web qui est loin de stagner comme certains semblent le penser. L’idée est de toujours être en mouvement et ne pas se reposer sur ses vieilles habitudes qui peuvent vous empêcher d’aller de l’avant.

La technique progresse rapidement et JavaScript prend de plus en plus d’ampleur. C’est indéniablement un choix à considérer sans rougir par rapport à des techniques plus anciennes de type PHP, Ruby, .NET, etc. Le JAMstack est adopté par de nombreux grands groupes pour leurs sites internet et développement spécifiques et ce n’est pas pour rien. La liste des avantages est longue pour une liste d’inconvénients plus que minime.

Série d’articles à venir

J’ai prévu toute une série d’articles sur Gatsby et React pour vous présenter en détail la puissance de cet outils et comment intégrer certaines fonctionnalités. J’ai également prévu de faire un focus sur GraphQL et toutes les techniques à la mode. Vous n’allez pas vous ennuyer.

A très vite donc, c’est tout … pour le moment !