Comprendre la philosophie Jamstack pour la création d'applications web

La “Jamstack” est philosophie pour l’architecture des applications web.

Jamstack signifiait il y a quelques années que l’on faisait la distinction entre JavaScript, APIs et Markup (le contenu au format markdown, HTML etc.), et on l’écrivait d’ailleurs “JAMstack”.

C’est un concept qui a beaucoup évolué depuis. Aujourd’hui, le terme en lui-même devient moins courant, mais certains pensent que c’est parce qu’il est simplement devenu le synonyme “d’application web moderne”.

Mieux comprendre la Jamstack permet aussi de mieux comprendre les frameworks modernes comme Astro.js, Next.js ou le bundler Vite.

Découplage pour une meilleure structure

À la base, la Jamstack consiste à découpler les couches techniques d’une application web. La notion de pré-rendu s’y est ensuite greffée avec l’émergence de frameworks statiques comme Gatsby.

On a donc initialement 3 couches :

1. JavaScript pour l’interactivité et la logique côté client
2. Les API pour la récupération de données et les fonctionnalités backend
3. Le “Markup” pour structurer le contenu, c’est-à-dire le HTML ou le markdown qui représente une page web ou un article par exemple

Chaque layer peut être développé et mis à l’échelle indépendamment. Les API peuvent être conçues sans se soucier de la présentation frontend qui est gérée par le markup. Et JavaScript fournit une expérience utilisateur moderne en rendant le tout interactif.

Pré-rendu du contenu : une caractéristique désormais au coeur de la Jamstack.

Un aspect devenu distinctif de la philosphie Jamstack est le pré-rendu du contenu chaque fois que possible, idéalement au moment du build de l’application. Au lieu de rendre les pages à la demande pour chaque requête, le contenu est compilé à l’avance, typiquement au format HTML.

Cela permet de servir le HTML directement depuis un CDN ou un serveur léger, sans attendre un calcul côté serveur. Les pages se chargent extrêmement rapidement et dans l’idéal peuvent même fonctionner sans JavaScript côté client, selon la logique du “progressive enhancement”.

L’hébergeur Netlify a été très porteur de cette notion. On peut aussi citer Vercel, qui considère le rendu serveur dynamique (pour chaque requête) comme étant aussi une forme de pré-rendu.

Jamstack en action

Prenons un exemple concret d’architecture Jamstack moderne, au-delà des frameworks : Slidev est un outil de présentation open-source que nous utilisons pour écrire nos formations et qui adopte une philosophie Jamstack.

Slidev utilise des fichiers Markdown comme source unique de vérité (“source of truth”). Ils sont compilés en slides PDF mais aussi en un site HTML/CSS/JS statique pour avoir une version plus accessible de nos supports de cours. C’est un exemple de situation où l’on tire parti du découplage entre le markup (le contenu) et le reste du code.

En résumé : la Jamstack aujourd’hui

Aujourd’hui, on peut dire que la philosophie Jamstack se résume à tirer intelligemment parti des technologies pour la création d’application web. Un découplage bien pensé, des calculs réalisés en amont dès que possible, conduisent à une expérience utilisateur et des performances optimales, mais aussi une plus grande efficacité des équipes de développement.