Jamstack est une philosophie de développement populaire pour le web qui vise à la fois à accélérer la conception d’applications web et le temps de chargement d’une page. S’inspirant des méthodes devops et du CI/CD, elle bouleverse les techniques traditionnelles de création de pages web interactives en déplaçant l’exécution de chargement du code des serveurs web vers le JavaScript du navigateur et vers des services externes accessibles à travers des API. Le résultat final, c’est une approche conviviale pour les développeurs pour bâtir des sites web statiques qui s’affichent très rapidement et peuvent être facilement personnalisées pour de multiples plateformes.

L’architecture Jamstack

Jamstack est basé sur trois piliers qui lui donnent son nom : JavaScript, API et markup. Sur un site Jamstack, les pages web utilisent le langage de balisage standard afin que l’on puisse les bâtir et les tester n’importe où, sans dépendances vis-à-vis des serveurs d’applications ou les technologies « côté-serveur » (server-side) comme Node.js. Toute fonctionnalité interactive est apportée par du code JavaScript standard qui s’exécute dans le navigateur, qui effectue des appels vers des API réutilisables dans la page web elle-même. Ces appels sont utilisés pour accéder aux données externes ou à toute autre fonctionnalité qui peut être bâtie dans la page web elle-même.

Pour comprendre pourquoi Jamstack est révolutionnaire, il suffit de considérer la pile LAMP qui illustre la façon dont la plupart des développeurs ont envisagé le développement web au cours des 15 dernières années. LAMP est l’acronyme de Linux (le système d’exploitation qui équipe la plupart des serveurs web), Apache (le logiciel serveur qui tourne sur ces machines Linux), MySQL (la base de données où sont stockées les données des applications web) et PHP, Perl ou Python (le langage utilisé pour écrire le code côté serveur). Lorsque vous indiquez à votre navigateur vers un site web basé sur la pile LAMP, le serveur web exécute le code côté serveur qui génère la page web à la volée, en puissant les données nécessaires dans la database MySQL.

Avec l’architecture LAMP, les développeurs peuvent créer des sites web dynamiques et interactifs. Mais il faut également disposer d’un serveur web puissant et plus un site doit gérer de trafic, plus il lui faut de la puissance de traitement côté-serveur. Même avec un serveur disposant de toutes les fonctionnalités requises, les pages web peuvent exiger beaucoup de temps pour se construire et se charger. Alors que l’attention des internautes se réduit de plus en plus, tandis qu’ils consultent le web sur leurs téléphones portables, ce délai est devenu un point sensible majeur. Jamstack est né dans la mouvance des sites web statiques qui a vu le jour au milieu des années 2010 en réaction contre le modèle traditionnel de fonctionnement des sites web. Pour comprendre Jamstack, il faut comprendre la technologie qui sous-jacente aux sites web statiques. 

Sites web statiques et Jamstack

Pour expliquer à un néophyte complet la façon dont fonctionne le web, on pourrait dire : quelque part, dans le système de fichiers d’une serveur web, se trouvent des fichiers HTML accessibles au moyen d’adresses HTTP que le navigateur web télécharge puis interprète pour créer une page web. Voilà la description d’un site web statique : elle assume que les fichiers HTML existent déjà quand le navigateur web va les chercher. Mais sur la dernière décennie, le web a été dominé par des sites web dynamiques. Ces derniers génèrent des fichiers HTML à la volée en réponse aux requêtes web, souvent basées sur des paramètres transmis au serveur web sous la forme de l’URL (l’adresse) du site elle-même.

Les générateurs de sites statiques

Dans les tout premiers jours du web, lorsque les pages web étaient invariablement statiques, de nombreux développeurs web écrivaient leur code HTML à la main. Au fur et à mesure que les pages web ont gagné en complexité, des outils tels que Dreamweaver, de Macromedia, sont arrivés et ont commencé à générer des pages HTML statiques de façon programmatique. Lorsque le mouvement des sites web statiques a pris son essor, une nouvelle vague de générateurs de sites statiques a commencé à émerger, dont Gatsby, Hugo et Jeckyll. Contrairement aux outils Wysiwyg comme Dreamweaver, les générateurs de sites statiques sont pilotés par une interface en ligne de commandes et conçus pour bien s’intégrer avec les processus de CI/CD. Les fichiers HTML sont générés par ces outils, ils souvent basés sur des contenus écrits en Markdown et se chargent automatiquement vers un référentiel de contrôle de versions comme GitHub. Lorsque ces fichiers sont identifiés comme prêts pour la production, les pages statiques sont automatiquement chargées sur le site web actif.

Les réseaux de diffusion de contenus

Il est important de garder à l'esprit que, dans ce contexte, le terme « statique » n'implique pas de simples pages web 1.0 qui ne sont pas interactives. Ces pages peuvent inclure du code JavaScript avancé qui s’exécute dans le navigateur et fait des appels d’API vers les bases de données, des fonctionnalités côté-serveur ou des fonctions serverless hébergées. Mais comme aucune de ces exécutions n'a lieu sur le serveur web, un site statique n'a pas besoin d'un hôte web fonctionnant de façon industrialisée et équipé d'une base de données. De nombreux sites statiques sont déployés sur des réseaux de diffusion de contenu, ou CDN, où le contenu est reproduit sur plusieurs serveurs dans le monde entier afin d'être diffusé rapidement aux utilisateurs, où qu'ils soient.

Mathieu Dionne, responsable marketing chez Snipcart, décrit les premiers jours de ce monde de sites statiques dans un billet de blog, et mentionne que vers 2015, « les fondateurs de Netlify... venaient d'inventer le terme « Jamstack » pour contourner la connotation négative de « web statique ». Il serait maintenant utile d’évoquer brièvement Netlify et son rôle dans l'écosystème Jamstack.

Netlify et Jamstack

Netlify est un hébergeur de sites web et c’est son co-fondateur, Mathias Biilmaan, qui a inventé le terme de Jamstack.Les services de Netlify sont taillés pour les clients qui veulent créer des sites basés sur la philosophie Jamstack. Netlify affirme avoir résolu un problème spécifique qui freinait les sites web statiques, à savoir l'invalidation du cache. Les sites web dynamiques tirés par des bases de données peuvent consommer beaucoup de ressources sur les serveurs. Mais vous pouvez être certain qu’ils serviront la dernière version de votre site web à n’importe quel visiteur qui vient le visiter. Comme les sites web Jamstack sont souvent hébergés sur les multiples serveurs distribués d'un CDN, les mises à jour sont moins directs. Cela peut prendre quelques minutes à quelques heures pour que chaque serveur CDN comprenne que sa version en cache du site n’est plus valide. Pour contourner ce problème, le CDN de Netlify fournit une invalidation instantanée du cache pour les fichiers HTML. Depuis que l’éditeur Netlify a hissé le drapeau Jamstack, il utilise la technologie comme colonne vertébrale de son offre PaaS, fournissant une plateforme de contenu à de grandes entreprises comme Nike et Peleton.

Jamstack et Gatsby

Netlify n’est pas le seul hébergeur de sites dans le monde Jamstack et il n’a aucune marque déposée ni contrôle propriétaire sur le terme. Il existe diverses solutions d’hébergement et de déploiement pour Jamstack et la plupart des grands fournisseurs de services clouds le font, notamment AWSGoogle Cloud (avec Firebase) et Azure de Microsoft. D’autres entreprises plus spécialisées ont également pris pied sur ce marché dont Gatsby Inc, créateur du générateur de sites statiques du même nom. Ce dernier a élaboré une offre de services de haut vol s’appuyant sur le générateur de sites Gatsby. Comme ce logiciel est open source, il est également proposé par d’autres fournisseurs de services, dont Netlify

Les CMS « headless » 

Bien sûr, construire et héberger un site web ne sont que les premières étapes, comme le sait toute personne ayant eu à gérer un site web. Il faut aussi avoir les outils pour créer de nouveaux contenus à ajouter au site. Comme les personnes qui en sont chargées ne sont généralement pas des développeurs, il leur faudra un outil convivial à prendre en main, à savoir un système de gestion de contenus ou CMS (content management system). Les CMS traditionnels tels que WordPress proposent une interface utilisateur pour le back-end à travers laquelle on peut saisir le contenu du site, gérer une base de données où ce contenu est stocké et créer des pages web dynamiques qui présentent ce contenu en réponse aux requêtes du navigateur.

Les CMS destinés aux sites Jamstack fonctionnent différemment. On les désigne généralement sous le nom de CMS « headless » [NDLR : « sans tête »]. Ces outils présentent une interface utilisateur pour saisir et gérer le contenu et une base de données ou un autre moyen de le stocker, mais il ne génère pas lui-même de code HTML à faire analyser par un navigateur web. Au lieu de cela, les pages HTML statiques du site web utilisent JavaScript pour faire des appels aux API du CMS, et ce dernier renvoie le contenu dans un format que JavaScript peut transformer en page web.

Les CMS headless séparent complètement le contenu de la présentation, ce qui est bien sûr un idéal de longue date de la programmation. Comme ils disposent d’une API accessible, plusieurs pages web peuvent facilement l’utiliser. Par exemple, si vous avez créé des versions distinctes de votre site web pour les téléphones mobiles, les ordinateurs de bureau et les montres intelligentes, toutes ces versions peuvent accéder au même contenu stocké dans le CMS. Sur ce terrain, Netlify propose sa propre solution, NetlifyCMS, mais il existe de nombreuses autres offres. Le développeur Nebojsa Radakovic les présente dans son introduction aux CMS headless. Il y a beaucoup de nouveaux venus sur cette liste, ainsi qu'un nom très familier. Bien que nous ayons présenté WordPress comme un exemple de CMS traditionnel, ce logiciel peut également être utilisé comme un CMS headless pour alimenter un site Jamstack.

Pourquoi utiliser Jamstack ?

Voici un petit récapitulatif des avantages qu’il y a à utiliser Jamstack.

- Sa vitesse : les sites statiques se chargent plus rapidement, et ce n'est pas seulement une question de commodité. Google pénalise les sites lents en abaissant leur rang de recherche, et les internautes habitués à des réponses rapides abandonnent souvent les transactions de e-commerce lorsque certaines étapes sont lentes à charger.

- L’expérience développeurs : ceux-ci peuvent créer des sites statiques en utilisant les techniques devops qui ont transformé les pratiques et la productivité du domaine. Et la philosophie Jamstack produit des piles de sites qui séparent clairement les problématiques, ce qui permet aux développeurs de se concentrer sur leurs domaines de spécialisation : les concepteurs et les développeurs de frontaux web peuvent créer des sites sans avoir besoin de maîtriser un langage côté-serveur, tandis que les développeurs back-end peuvent se concentrer sur les API. Les questions de contenu sont entièrement traitées par le CMS.

- La flexibilité : les sites statiques peuvent être hébergés par des serveurs web traditionnels, des CDN, des services spécialisés ou une combinaison des trois. Et comme les CMS headless interagissent avec les frontaux via des API, on peut facilement créer des sites pour plusieurs plateformes qui partagent le même contenu. 

Quand ne pas utiliser Jamstack ? 

Malgré tous ses avantages, Jamstack ne convient pas à tout le monde. Le revers de la médaille est que, si vous souhaitez exploiter un site basé sur Jamstack, vous serez plus dépendant des développeurs que vous ne le souhaitez. Ce n'est pas si mal pour les entreprises qui ont déjà ou sont prêtes à embaucher une équipe de développement web dédiée ayant les compétences nécessaires pour Jamstack. Mais de nombreuses petites entreprises ont l'habitude d'utiliser des logiciels commerciaux ou open source prêts à l'emploi qui leur permettent d'exploiter leurs sites web sans avoir besoin de recourir à des développeurs au quotidien.

Les sites de commerce électronique, en particulier, ont tendance à s'appuyer sur une grande variété de plugins et de bibliothèques développés au fil des ans pour les solutions d'hébergement web traditionnelles. Leurs équivalents Jamstack ne sont pas aussi répandus ou matures, ce qui signifie que la pile n'est pas toujours le bon choix pour le commerce électronique.

Est-ce que Jamstack est populaire ?

Malgré le battage médiatique dont il fait l'objet, Jamstack n’est exploité que sur une infime partie de tous les sites web. Selon le rapport 2021 de Web Almanac, les sites construits par des générateurs de sites statiques (dont la quasi-totalité reposerait construite sur la philosophie de Jamstack) ne représentaient qu'environ 1 % de tous les sites web. Cela dit, la part de marché de Jamstack a été multipliée par plus de deux tous les ans au cours des trois dernières années. Un signe important de l'intérêt croissant pour cette technologie : environ un tiers des développeurs Jamstack sont tout à fait nouveaux dans le secteur, et présentent moins de deux ans d'expérience. 

Les tutoriels sur Jamstack 

- Hasura, une entreprise qui se consacre au système d’API GraphQL, utilisé par Gatsby et d’autres plateformes Jamstack, propose un bon tutoriel de haut niveau qui guide pas à pas à travers les considérations et choix architecturaux qui entrent dans la composition d’un site Jamstack.

- L’hébergeur Digital Ocean propose un bon tutoriel sur la création d'un portefeuille de sites Jamstack en recourant à Angular et Scully.

- Netlify propose un tutoriel vidéo qui couvre un grand nombre de sujets, des plus basiques aux plus avancés, et inclut une introduction à la création d'un site Jamstack piloté par une base de données.

Une fois que les concepts de base décrits ici seront maîtrisés, il sera possible d’utiliser les principes et technologies Jamstack pour vos sites web. Bon apprentissage !