Qu'est-ce que la JAMstack ?

Qu'est-ce que la JAMstack ?

JAMstack est une approche du développement Web frontal (la construction du contenu et des interfaces avec lesquels les utilisateurs interagissent). Elle permet aux développeurs de créer rapidement et de servir efficacement des sites Web statiques aux utilisateurs.

Dans une application Web JAMstack, la plus grande partie possible du HTML est préconstruite et stockée dans un réseau de diffusion de contenu (CDN) . Au lieu d'exécuter une application backend monolithique côté serveur pour générer du contenu dynamique, les composants dynamiques de l'application sont basés sur des API . Idéalement, cela se traduit par une expérience utilisateur beaucoup plus rapide et une expérience développeur beaucoup plus simple.

Que signifie le terme "JAMstack" ?

JAM signifie JavaScript, APIs, Markup.

• JavaScript est le langage de programmation utilisé par les applications web
• Une API (interface de programmation d'applications) est un moyen de demander des données au programme ou à l'application d'un autre utilisateur.
• Le balisage est un code (HTML et CSS) qui fournit des instructions de formatage aux navigateurs.

Stack désigne la combinaison de tous ces éléments de manière à permettre aux développeurs de créer des applications et des sites web.

Un site Web ou une application JAMstack est construit en utilisant uniquement ces trois éléments. Le site Web statique que l'utilisateur voit est construit à partir de code de balisage HTML et CSS. JavaScript est utilisé pour toute fonctionnalité dynamique nécessaire et pour appeler les API. Les API fournissent le backend de l'application.

Supposons que Bob crée une application Web qui fournit des mises à jour sur les résultats des matchs de football européens. Il crée une application dorsale qui s'exécute sur un serveur qu'il exploite et vérifie constamment les résultats des derniers matchs. Lorsqu'un utilisateur ouvre l'application Web, le serveur de Bob génère des pages HTML qui affichent ces résultats, puis envoie ces pages à l'utilisateur. Cependant, l'application Web de Bob est quelque peu lente : avant qu'un utilisateur puisse afficher ces pages, il doit attendre que l'application dorsale s'exécute, que le code HTML soit généré et que ce code atteigne son appareil.

Supposons maintenant que Bob reconstruise son application Web en utilisant une approche JAMstack. Au lieu d'écrire une application dorsale complète, il crée une série de pages HTML légères qu'il stocke dans un CDN. Lorsqu'un utilisateur ouvre l'application, le CDN lui fournit immédiatement les pages HTML correspondantes, puisque le CDN est beaucoup plus proche de l'utilisateur que le serveur de Bob. L'application fait également un appel à l'API afin de remplir les scores des matchs de football en direct sur la page. L'application Web de Bob se charge maintenant très rapidement pour l'utilisateur et, du point de vue de Bob, il est beaucoup moins nécessaire d'écrire du code qui gérera le travail en arrière-plan, côté serveur, de mise à jour des résultats.

Qu'est-ce qu'un site web statique ?

Un site Web statique est composé d'une ou plusieurs pages Web statiques, c'est-à-dire des fichiers HTML qui se chargent de la même manière dans un navigateur, quelle que soit la personne qui charge le fichier. Comme les pages Web statiques se composent uniquement de HTML, sans code supplémentaire à exécuter dans le navigateur, elles peuvent se charger extrêmement rapidement. (Pour voir à quoi ressemble le code HTML, cliquez avec le bouton droit de la souris sur une page Web lorsque vous utilisez le navigateur Chrome et cliquez sur "View Page Source".)

En revanche, les pages Web dynamiques sont différentes à chaque fois qu'elles sont chargées. Afin d'offrir une expérience utilisateur plus interactive et personnalisée, les pages Web dynamiques changent en fonction de l'utilisateur qui ouvre la page, de l'emplacement du chargement de la page, de l'heure de la journée et d'un certain nombre d'autres données variables. Lorsqu'une page web dynamique se charge, du code doit être exécuté soit sur le serveur web qui héberge la page web, soit dans le navigateur de l'utilisateur. Cette dépendance à l'égard de l'exécution du code peut ralentir l'expérience de l'utilisateur.

Les pages Web dynamiques ne sont pas le seul moyen de créer une expérience utilisateur modernisée. Un site Web JAMstack essentiellement statique peut encore offrir une expérience dynamique et personnalisée aux utilisateurs en générant occasionnellement un nouveau contenu statique ou en appelant des API pour compléter le contenu mis à jour.

Comment les applications JAMstack gèrent-elles les fonctions dorsales ?

Dans le développement d'applications, le backend est le code qui s'exécute sur un serveur en coulisse. En général, l'utilisateur n'a pas conscience de ce qui se passe en arrière-plan lorsqu'il utilise un site Web ou une application. Bien que JavaScript et le balisage dictent la façon dont une application JAMstack apparaît à l'utilisateur, elle a toujours besoin de fonctions dorsales pour fonctionner. JAMstack s'en charge en appelant les API à l'aide de JavaScript.

L'utilisation des API signifie que les développeurs JAMstack ne doivent pas construire leurs propres applications dorsales. Ils peuvent s'appuyer sur des API déjà existantes pour faire fonctionner leurs sites Web et leurs applications.

Lorsque les développeurs veulent construire leur propre fonctionnalité pour une application, ils peuvent créer une nouvelle API. Les API peuvent être réutilisées dans divers contextes. Ainsi, lorsque les développeurs créent leurs propres API pour le backend, ils ne doivent construire cette fonctionnalité qu'une seule fois afin de l'utiliser dans de futures applications.

Quel est le lien entre JAMstack et les microservices ?

L'utilisation des API permet aux développeurs de JAMstack d'adopter une approche microservices pour le backend. Dans une architecture de microservices , le backend d'une application est décomposé en petits morceaux qui s'exécutent sur commande - de la même manière qu'une application JAMstack appelle diverses API lorsque cela est nécessaire, mais n'a pas besoin de support backend.

Il est également possible de construire une application JAMstack qui utilise un backend sans serveur , partiellement ou entièrement . Les fonctions sans serveur sont de petits bouts de code réutilisables qui s'exécutent à la demande. Cependant, une architecture sans serveur exige souvent une approche plus pratique du backend par le développeur, puisqu'il construit essentiellement l'application backend lui-même au lieu d'appeler des API (bien qu'il n'ait pas à se soucier du provisionnement des serveurs).

Quels sont les avantages de l'utilisation de JAMstack ?

• Performances : La quasi-totalité du contenu d'une application JAMstack est constituée de fichiers HTML statiques qui sont servis à partir d'un CDN. C'est le moyen le plus rapide de fournir du contenu web aux utilisateurs finaux.
• Évolutivité : Si une application est "évolutive," cela signifie qu'elle répond bien à une forte augmentation de l'utilisation. Comme le front-end de JAMstack est rapide et que le back-end est léger, les applications JAMstack sont souvent extrêmement évolutives.
• Une meilleure expérience pour les développeurs : JAMstack permet aux développeurs de se concentrer sur la création d'une expérience utilisateur attrayante en front-end, sans se soucier du back-end ou des problèmes de performance.

Cloudflare permet aux développeurs de créer des applications qui sont hébergées directement sur le CDN mondial de Cloudflare. En savoir plus sur les pages Cloudflare, notre plate-forme JAMstack pour la création de sites Web statiques. Vous pouvez également en savoir plus sur le déploiement d'un site Gatsby, d'un site Hugo, d'une application React, et plus avec Cloudflare Pages, et regarder une vidéo présentant Cloudflare Pages de la société d'analyse Redmonk.