Adopter la JAMstack, comment et pourquoi ?

Introduit par Pedro Duarte, la JAMstack est une façon de simplifier la manière de travailler et d’avoir plus de temps à consacrer au code en lui même et ses évolutions. Cette stack vous permet également de réduire le coût des applications et d’avoir un processus cadré pour l’ensemble des déploiements que vous allez effectuer. La JAMstack s'adapte aussi bien à des projets personnels qu'à des projets bien plus importants nécessitant un nombre de développeurs conséquent.

• Qu’est que la JAMstack ?
• Avantages de la JAMstack
• Inconvénients de la JAMstack
• Une solution puissante pour le SEO

JAM est un acronyme qui veut dire Javascript, APIs and Markup. Prenons chaque lettre afin de déterminer les différents points à prendre en compte dans cette stack.

Javascript: Quel que soit la librairie ou le framework utilisé, Javascript est au coeur de la stack. C’est actuellement un langage qui ne fait que prendre de l’ampleur du côté des développeurs.

APIs: Également très en vogue avec les applications de type SPA, mais aussi grâce à la facilité de créer des micros service. La partie backend est souvent centralisée pour le coeur de l’application et travaille avec différentes APIs externes pour bénéficier des services déjà existants.

Markup: Le but étant de générer des fichiers statiques. Vous avez la notion de markup avec du Markdown par exemple permettant d’avoir un texte enrichi sans devoir rentrer dans le détail du HTML, tout en ayant quand même la possibilité de le faire en cas de besoin. Le fichier source sera interprété pour être converti en HTML en bout de chaîne.

Il y a plusieurs avantages à utiliser de la génération de fichiers statiques. La plus évidente est un gain de performance très important. Vous vous servez de fichiers statiques, il n’y a donc pas de langage au-dessus qui va grappiller du temps de chargement. Il y a également un aspect sécurité avec cette façon de développer. Vous n’avez pas à vous soucier vraiment des problèmes de sécurité car ils sont largement minimisés en production. Pas de base de donnée ni de partie dynamique réduisant considérablement les actions d’attaques.

L’hébergement de l’application est bien moindre également. Vous n’avez besoin que d’un serveur Apache ou Ngnix pour faire tourner votre site en production. Il existe des services gratuits qui s’occupent de toute la chaîne, des différents environnements à la production directement sans avoir à vous soucier des serveurs ou instances.

Vous allez pouvoir mettre en place des solutions de cache ou CDN pour déployer dans plusieurs régions du monde et répondre facilement aux montées en charge sans avoir à migrer votre infrastructure ou à changer de technologie en court de route.

Dernier avantage et qui n’est pas des moindres: il s’adresse aux développeurs front-end. Vous allez pouvoir développer en toute sérénité en vous focalisant sur la partie frontale sans vous souciez des problématiques de dynamisation qui peuvent poser des problèmes.

Il faut être conscient qu’il existe des contraintes pouvant être bloquantes sur certains types de projets. Il sera toujours possible de trouver des solutions pour y remédier mais cela ressemblera parfois plus à de l’acharnement qu'autre chose. Une stack différente fait déjà l’affaire et n’a pas lieu d’être forcément modifier.

Le plus gros problème avec JAM est d’intégrer de la dynamisation. Prenons l’exemple d’un e-commerce. Vous pouvez parfaitement générer vos fiches produits en statiques sans problème. La difficulté va être au moment de vouloir changer vos prix. Il faudra régénérer tout ou une partie de votre statique à chaque mouvement de prix. Ce qui peut être en fonction des types de CMS une galère monumentale et très énergivore en temps pour déployer toutes les fiches produits à chaque changement. Il faut soit avoir un moyen efficace pour ne régénérer qu’une partie du statique, chose qui n’est pas forcément prévue dans les solutions JAM soit de redéployer l’ensemble du catalogue, toutes les heures par exemple, au risque de consommer du temps de build pour rien.

Il est possible de palier au problème en ayant des zones dynamiques sur certaines pages et faire appel au web service pour avoir des données fraîches en temps réel. Le problème avec cette technique est que Google ne sait pas vraiment gérer ce genre de chose et ne prendra pas en compte les parties dynamiques chargées après le chargement de la page.

Google adore les sites qui se chargent vite favorisant ainsi son positionnement dans les résultats de recherche. Le temps qu’il passe sur votre site sera peut-être le même que sur un autre site non statique, mais le moteur de recherche aura le temps de parcourir plus de pages sur la même laps de temps.

C’est donc une solution très puissante pour les sites de contenu où la contrainte est moins forte que pour les e-commerces. Un contenu qui se charge rapidement est un atout majeur pour gagner en visibilité pouvant ainsi faire la différence avec la concurrence.

Concrètement, comment ça fonctionne ?

Avant de déployer votre site il faut sélectionner votre générateur de site statique. Il en existe une multitude. Ceux qui se distingue actuellement sont Gatsby, Next.js et Hugo. Ces générateurs sont assez différents les uns les autres, mais proposent chacun des solutions à prendre en compte en fonction de votre typologie de projet.

Il existe différent services pour déployer facilement votre site. Aujourd’hui Netlify est l'une des meilleures solutions qui existe sur le marché. Elle propose une offre gratuite complète et la possibilité d’évoluer sur des offres payantes restant à des tarifs abordables. Netlify propose des avantages très intéressants. Par exemple il est possible de pouvoir générer des fonctions dynamiques ou des services complets comme de l’authentification ou des formulaires sur le même système que des fonctions lambda AWS.

Avec Netlify vous allez connecter votre outil de versioning, jouer sur les branches pour déployer sur différents environnements et gérer vos différents noms de domaines et sous domaines. L’outil joue également le même rôle que Cloudflare et gère les problèmes liés au réseau comme les attaques DDOS et bloque automatiquement le flux vers votre site. Il permet également de bloquer les différents robots qui scannent les sites pour récupérer des informations ou effectuer du brut force.