C'est quoi la Jamstack au juste ?

Source : WTF is Jamstack? de Pedro Duarte

Pedro Duarte a lancé jamstack.wtf un mini-site afin de donner une vue d’ensemble de la Jamstack.
Nous vous proposons ici sa traduction en français afin de permettre à toujours plus de développeurs de mieux comprendre et d’adopter cette approche.

La Jamstack révolutionne notre manière de travailler en proposant une expérience de développement plus simple, de meilleures performances, des coûts bien moins élevés et une grande scalabilité.

Vous vous demandez peut-être : oui OK, mais comment ? pourquoi ? c’est quoi au juste ?

C’est la raison d’être de cette page jamstack.wtf.

Le but de ce guide est de présenter de manière claire le concept de la Jamstack et d’inciter d’autres développeurs à adopter cette approche.

C’est quoi la Jamstack ?
Bien démarrer
Ressources
À propos

C’est quoi la Jamstack ?

Signification

JAM c’est pour JavaScript, APIs & Markup.

JavaScript: Les fonctionnalités dynamiques sont gérées par JavaScript. Vous êtes libres d’utiliser la bibliothèque ou le framework que vous voulez.
API: Les opérations côté serveur sont abstraites sous forme d’API réutilisables, accessibles en HTTPS à l’aide de JavaScript. Ces opérations peuvent être déléguées à des services tiers ou bien à vos propres fonctions.
Markup: Les sites web sont servis sous forme de fichiers HTML statiques. Ces fichiers peuvent être générés à partir de fichiers source, comme du Markdown, à l’aide d’un générateur de site statique.

Bénéfices

Les principaux bénéfices apportés par la Jamstack sont :

Performance accrue: Servir du code généré et des assets à partir d’un CDN
Meilleure sécurité: Plus besoin de se soucier des vulnérabilités du serveur ou de la base de données
Coût bien moindre: L’hébergement de fichiers statiques est moins cher voire gratuit
Meilleure expérience de développement: Les développeurs front end peuvent se focaliser sur la partie client, sans être dépendants d’une architecture monolithique. Cela se traduit en général par un développement plus rapide et plus ciblé
Évolutivité: Si votre site devient viral ou est soumis à un pic d’activité, le CDN compensera sans problèmes.

Bonnes pratiques

Les astuces suivantes vous aideront à tirer le meilleur parti de la stack.

Réseau de distribution de contenu (CDN): Puisque tous les fichiers et les assets sont générés en amont, ils peuvent être servis sur un CDN. Cela procure une meilleure performance et un redimensionnement à la volée.
En savoir plus
Déploiement atomique: Chaque déploiement est une photographie complète du site. Vous disposez ainsi d’une version consistante du site à l’échelle mondiale.
En savoir plus
Invalidation du cache: Une fois votre site généré poussé en ligne, le CDN va invalider son cache. Cela signifie que la nouvelle version est instantanément disponible partout.
En savoir plus
Tout est versionné: Votre code vit dans un système de gestion de versions tel que Git. Les principaux avantages sont : l’historique des changements de chaque fichier et de chaque collaborateur ainsi que la traçabilité.
En savoir plus
Générations automatiques: Votre serveur est notifié lorsqu’une nouvelle génération est requise, typiquement à l’aide de webhooks. Le serveur génère le projet, met à jour les CDNs et le site est en ligne.
En savoir plus

Chaîne de publication

Voici à quoi ressemblerait la chaîne de publication Jamstack idéale.

Historique

Un bref historique montrant l’augmentation de la popularité de cette approche.

2015: Les générateurs statiques sont de plus en plus en vogue, grâce à des générateurs populaires comme Jekyll.
2016: Quelques développeurs pensent que les sites statiques n’ont pas à être forcément statiques, le terme “Jamstack” fait son apparition.
2017: La révolution du web moderne commence à prioriser la performance, le redimensionnement à la volée et l’expérience de développement. Le terme Jamstack est adopté par un groupe de développeurs plus important et les premières entreprises commencent à annoncer des projets basés sur la Jamstack.
2018: Des outils comme Netlify, Gatsby et Contentful contribuent à promouvoir le terme et la communauté grandit vite. C’est aussi l’année de la première conférence Jamstack.

Source : SnipCart

Bien démarrer

Développement

C’est à vous de décider comment générer vos fichiers HTML. Les trois approches les plus communes sont :

À la main

Une méthode simple et efficace d’écrire du HTML, c’est idéal pour les pages super simples.

Générateurs de site statique

La plupart des sites Jamstack sont propulsés par un générateur de site statique. Vous êtes libres de choisir votre GSS.

Voir davantage de générateurs

Framework frontend

La plupart des frameworks ne génèrent pas de fichiers HTML statiques par défaut, toutefois c’est possible si vous connaissez bien vos outils, cela demande plus d’expérience et de maintenance.

Déploiement

Vous devez héberger le résultat de la compilation de votre site. Il existe de fantastiques services qui font cela gratuitement et simplement.

Voir plus de services de déploiement

Parties dynamiques

Les sites Jamstack n’ont pas à être entièrement statiques. Il existe des services formidables pour vous aider à insérer des parties dynamiques dans votre projet.

Fonctions personnalisées: Vous pouvez également abstraire vos propres fonctions pour en faire des APIs réutilisables. Pour cela vous pouvez utiliser les fonctions AWS lambda ou les fonctions Netlify
Données personnalisées: Au fur et à mesure que vous ajoutez des fonctionnalités à votre site, vous souhaiterez peut-être enregistrer des profils utilisateurs, des paniers, des niveaux de jeu ou d’autre données dynamiques. Démarrez gratuitement avec FaunaDB Serverless GraphQL
Commentaires: Beaucoup de sites Jamstack intègrent des sections pour les commentaires, principalement sur des blogs
Formulaires: Un excellent moyen d’interagir avec votre audience
E-Commerce: Mettre en place une boutique en ligne sur un site Jamstack n’a jamais été aussi simple
Recherche: Reposez-vous sur des services tiers pour intégrer des fonctionnalités de recherche

Voir plus de services pour les sites statiques

CMS

Les sites Jamstack peuvent aussi être gérés via un système de gestion de contenu, plus précisément avec des CMS headless. Chaque changement effectué dans le CMS va entraîner une nouvelle génération du site, qui sera ensuite déployé sous forme de fichiers statiques.

Voir plus de services de gestion de contenu

Ressources

Voici une sélection de ressources sur la Jamstack qui comporte des matériaux d’apprentissage ainsi que des listes de services.

Services

Articles

Vidéos

Livres

À propos

Cette page a été mise en place par @peduarte et présentée au meetup Jamstack de Londres — (voir les slides).