Jamstack: la révolution du site Web statique bouleversant le développement Web

Jamstack est une philosophie de développement Web de plus en plus populaire qui vise à accélérer à la fois le processus de développement Web et les temps de téléchargement des pages Web. S'inspirant du mouvement devops et des techniques d'intégration continue / livraison continue (CI / CD) qui deviennent la norme dans de nombreuses organisations, Jamstack bouleverse les techniques de longue date de création de pages Web interactives, en déplaçant l'exécution du code de chargement loin des serveurs Web et vers le JavaScript intégré au navigateur et les services externes accessibles via des interfaces de programmation d'application (API).

Qu'est-ce que Jamstack? Jamstack, définition

Jamstack est un modèle d'application Web basé sur trois piliers, qui fournissent les initiales de son nom: JavaScript, API et balisage. Les pages Web d'un site Jamstack sont constituées d'un langage de balisage standard, de sorte qu'elles peuvent être créées et testées n'importe où, sans dépendances sur les serveurs d'applications ou les technologies côté serveur telles que Node.js. Toute fonctionnalité interactive est fournie par un code JavaScript standard qui s'exécute dans le navigateur, qui appelle des API réutilisables via HTTPS pour accéder à des données externes ou à toute autre fonctionnalité qui ne peut pas être intégrée à la page Web elle-même.

Pour comprendre pourquoi la philosophie Jamstack est révolutionnaire, considérez la pile LAMP, qui illustre la façon dont la plupart des développeurs ont pensé au développement Web pendant la plupart des 15 dernières années. LAMP signifie Linux (le système d'exploitation qui alimente la plupart des serveurs Web), Apache (le logiciel serveur fonctionnant sur ces machines Linux), MySQL (la base de données où les informations dont l'application Web a besoin sont stockées) et PHP / Perl / Python (le langage qui le code côté serveur est écrit). Lorsque vous pointez votre navigateur vers un site Web basé sur LAMP, le serveur Web exécute le code côté serveur qui génère la page Web à la volée, puisant les données nécessaires à partir de la base de données MySQL.

L'architecture LAMP permet la création de sites Web dynamiques et interactifs, mais elle nécessite également un serveur Web puissant - et plus un site reçoit de trafic, plus il a besoin de puissance de calcul côté serveur. Même avec un serveur complet, la création et le chargement de pages Web dynamiques peuvent prendre beaucoup de temps. Dans un monde où les personnes avec une courte durée d'attention naviguent sur le Web sur leur téléphone, ce retard est devenu de plus en plus inacceptable.

Jamstack est né dans le cadre du mouvement «Web statique», né au milieu des années 2010 en réaction à ce modèle traditionnel de fonctionnement d'un site Web. Pour comprendre Jamstack, vous devez comprendre la technologie actuelle derrière  les sites Web statiques.

Sites statiques, générateurs de sites statiques et Jamstack

Si vous deviez expliquer à un débutant complet comment fonctionne le Web, cela pourrait ressembler à ceci: quelque part dans le système de fichiers d'un serveur Web, il y a des fichiers HTML, accessibles par des adresses HTTP, qu'un navigateur Web télécharge puis interprète pour créer une page Web . Mais c'est une description d'un site statique:  cela suppose que les fichiers HTML existent déjà lorsque le navigateur Web les recherche. Comme nous l'avons déjà vu, une grande partie du Web au cours de la dernière décennie a été dominée par des sites dynamiques, qui génèrent à la place des fichiers HTML à la volée en réponse à des demandes Web, souvent en fonction de paramètres transmis au serveur Web via des formulaires ou dans le URL elle-même.

Au tout début du Web, lorsque les pages Web étaient invariablement statiques, de nombreux développeurs Web écrivaient le code HTML à la main. Au fur et à mesure que les pages Web devenaient plus complexes, des outils tels que Dreamweaver de Macromedia sont arrivés, qui pouvaient générer ces pages HTML statiques par programmation. Alors que le mouvement du Web statique a décollé au milieu des années 2010, une nouvelle vague de générateurs de sites dits statiques a commencé à émerger, notamment Gatsby, Hugo et Jeckyll. Contrairement aux outils WYSIWYG tels que Dreamweaver, les générateurs de sites statiques sont pilotés par la ligne de commande et conçus pour être intégrés aux processus CI / CD. Les fichiers HTML sont générés par les outils, souvent basés sur du contenu écrit en Markdown, et automatiquement téléchargés vers un référentiel de contrôle de version comme GitHub. Comme ces fichiers sont marqués comme prêts pour la production, les pages statiques du site Web en direct sont automatiquement mises à jour.

Une chose importante à garder à l'esprit est que statique dans ce contexte ne signifie pas que ce sont de simples pages Web 1.0 qui ne sont pas interactives. N'oubliez pas que ces pages peuvent inclure du JavaScript avancé qui s'exécute dans le navigateur et effectue des appels API vers des bases de données, des fonctionnalités côté serveur ou des fonctions hébergées sans serveur. Mais comme aucune de ces exécutions ne se produit sur le serveur Web lui-même, un site statique n'a pas besoin d'un hôte Web industriel complet avec 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 mis en miroir sur plusieurs serveurs à travers le monde afin d'être livré rapidement aux utilisateurs n'importe où.

Mathieu Dionne, responsable marketing chez Snipcart, décrit les débuts de ce nouveau monde de sites statiques dans un article de blog et mentionne qu'en 2015, «les fondateurs de Netlify ... venaient de trouver le terme 'Jamstack' pour contourner le problème. la connotation négative de «Web statique». »En d'autres termes, nous avons décrit le processus Jamstack tout au long de cette section. Mais maintenant, nous devons discuter brièvement de Netlify et de leur rôle dans l'écosystème.

Qu'est-ce que Netlify?

Netlify est une société de cloud computing et d'hébergement Web. Le cofondateur de Netlify, Mathias Biilmann, a inventé le terme Jamstack, et les services de Netlify sont adaptés aux clients qui souhaitent créer des sites basés sur la philosophie Jamstack.

Netlify prétend avoir résolu un problème spécifique qui retenait les sites statiques, à savoir l' invalidation du cache. Les sites Web dynamiques basés sur une base de données peuvent consommer beaucoup de ressources de serveur, mais vous pouvez être certain qu'ils proposeront la dernière version de votre site Web à tout visiteur qui s'arrête. Étant donné que les sites Web Jamstack sont souvent hébergés sur les multiples serveurs distribués d'un CDN, les mises à jour sont moins simples. Cela peut prendre de quelques minutes à quelques heures pour chaque serveur CDN pour comprendre que sa version en cache du site n'est plus valide. Le CDN de Netfliy fournit une invalidation instantanée du cache pour que les fichiers HTML contournent ce problème.

Mais Netlify n'est pas le seul fournisseur d'hébergement dans l'espace Jamstack, et il n'a aucun type de marque ou de contrôle propriétaire sur le terme. Il existe un certain nombre de solutions d'hébergement et de déploiement Jamstack disponibles, et la plupart des grands fournisseurs de cloud se lancent dans l'action, notamment AWS, Google Firebase et Microsoft Azure.

CMS Jamstack

Si vous êtes quelqu'un qui doit gérer un site Web au jour le jour, vous savez que la création et l'hébergement du site Web n'est que le début. Vous avez également besoin d'un moyen de créer du nouveau contenu et de l'ajouter à votre site. Parce que les personnes qui feront cela ne seront généralement pas des programmeurs, elles auront besoin d'un outil convivial, à savoir un système de gestion de contenu ou CMS. Les CMS traditionnels, comme WordPress, offrent une interface utilisateur principale dans laquelle vous pouvez entrer le contenu du site Web, gérer une base de données dans laquelle ce contenu est stocké et créer des pages Web dynamiques qui présentent ce contenu en réponse aux demandes du navigateur.

Les CMS pour les sites Jamstack fonctionnent différemment et sont généralement appelés headless. Un CMS headless offre une interface utilisateur pour saisir et gérer du contenu et une base de données ou d'autres moyens de le stocker, mais ne génère pas lui-même de code HTML à analyser par un navigateur. Au lieu de cela, les pages HTML statiques du site Web utilisent JavaScript pour appeler les API du CMS, et le CMS renvoie le contenu dans un format que JavaScript peut transformer en page Web.

Ce système sépare complètement le contenu de la présentation, ce qui est bien sûr un idéal de programmation de longue date. Étant donné que le CMS dispose d'une API accessible, plusieurs pages Web peuvent facilement y accéder. Par exemple, si vous avez créé des versions mobiles, de bureau et smartwatch distinctes de votre site Web, toutes ces versions peuvent accéder au même contenu stocké dans le CMS.

Netlify, comme vous pouvez vous y attendre, a sa propre offre dans cet espace, appelée NetlifyCMS, mais il existe un certain nombre d'autres offres disponibles; le développeur Nebojsa Radakovic les décompose pour vous dans un article de blog. Il y a beaucoup de nouveaux venus sur cette liste, ainsi qu'un nom très familier. Alors que nous avons utilisé WordPress comme exemple de CMS traditionnel, WordPress peut être exécuté comme un CMS sans tête pour alimenter également un site Jamstack.

Conférence Jamstack

Netlify travaille également à créer une communauté Jamstack et sponsorise des conférences Jamstack. La société a organisé des événements à New York, Londres et San Francisco en 2019 et a organisé un événement virtuel en mai 2020. Au moment d'écrire ces lignes, vous pouvez vous inscrire à l'événement de San Francisco prévu du 6 au 7 octobre 2020, cependant la pandémie de coronavirus a toujours des plans de conférence d'automne en suspens. 

Si vous souhaitez des mises à jour, vous pouvez suivre la conférence sur Twitter. Vous pouvez également consulter les discussions passées sur la chaîne YouTube Jamstack Conf.

[Aussi sur: Les 6 meilleurs IDE JavaScript | Les 10 meilleurs éditeurs JavaScript]

Tutoriels Jamstack

Vous cherchez à aller plus loin? Consultez ces didacticiels Jamstack qui vous donneront une expérience pratique de la création d'un site Jamstack:

  • Le développeur David Neal a un bon tutoriel d'introduction sur la création d'un site Jamstack, en commençant très simplement et en devenant de plus en plus complexe. 
  • Sur le blog LogRocket, l'ingénieur logiciel Ogundipe Samuel fournit un aperçu détaillé et étape par étape de la création d'un site de commerce électronique sur les principes de Jamstack. 
  • Netlify propose un didacticiel vidéo de plus de trois heures qui couvre beaucoup de terrain, des bases aux sujets plus avancés. 

Une fois que vous aurez maîtrisé les concepts de base décrits ici, vous serez prêt à commencer à travailler avec le développement Jamstack dans votre vie professionnelle. Bon apprentissage!