Qu’est-ce que la « pile JAM ? » Devriez-vous l’utiliser ? – CloudSavvy IT

La pile JAM, souvent stylisée comme Jamstack ou JAMStack, fait référence à l’utilisation JavaScript, UNEIP, et Markup pour développer des sites Web et des applications centrés sur le client. Un système fondé sur Jamstack exécutera toute sa logique sur le client, éliminant les composants côté serveur.

Le terme a été inventé par Netlify et décrit une approche de développement Web qui offre des performances plus élevées, une meilleure sécurité et une expérience de développeur améliorée. Au lieu de subir un aller-retour du serveur à chaque chargement de page, les sites Jamstack sont autonomes dans le navigateur.

Les sites statiques utilisent-ils la Jamstack ?

Les sites statiques construits avec uniquement HTML, CSS et JavaScript sont intrinsèquement côté client sans programmation backend. De cette façon, ils répondent aux critères du Jamstack.

Jamstack va cependant au-delà des simples sites Web et blogs. Alors que les sites statiques n’utilisent que l’aspect « balisage », peut-être avec un peu de JavaScript, une application Jamstack peut toujours avoir un backend et un magasin de données persistant.

La différence par rapport aux applications Web traditionnelles réside dans la manière dont les données parviennent au magasin. Dans un système hérité, vous pouvez avoir un formulaire HTML qui crée des enregistrements dans une base de données SQL lorsque vous soumettez la page. Vous avez besoin d’une pile backend personnalisée avec une infrastructure de support.

Une application Jamstack réduira la complexité côté serveur en envoyant des données via des API. Vous pouvez toujours implémenter votre propre backend, mais il est également courant d’utiliser une solution hébergée tierce telle que Netlify ou Firebase de Google. Désormais, la seule infrastructure dont vous avez besoin est un serveur Web de base pour fournir votre code HTML et JavaScript au navigateur de l’utilisateur.

Les composants clés

Voici un récapitulatif des trois éléments constitutifs du Jamstack :

• • JavaScript – Toute l’expérience est alimentée par JavaScript dans le navigateur de l’utilisateur. Vous pouvez utiliser le framework de votre choix, que vous préfériez React, Vue, Angular ou votre propre solution vanille.

• Apis – Les données entrent et sortent du navigateur de l’utilisateur via des API. Si un formulaire doit être soumis, ses valeurs d’entrée doivent être capturées par JavaScript et envoyées à votre backend ou à un service tiers. Cela améliore l’expérience utilisateur en vous permettant d’afficher les flèches de chargement et les barres de progression au fur et à mesure que les données sont récupérées.
• Balisage – Le contenu est créé à partir de formats de balisage lisibles par l’homme tels que HTML et Markdown. Ceux-ci peuvent être fournis au navigateur tels quels pour l’analyse par JavaScript. Il n’est pas nécessaire d’héberger un CMS compliqué pour créer et éditer du contenu. Vous ajouteriez un nouvel article de blog en écrivant un fichier Markdown et en le validant dans le référentiel de contrôle de source de votre projet.

L’approche globale voit le balisage et JavaScript atterrir dans le navigateur de l’utilisateur à partir de votre serveur Web. Le JavaScript sert ensuite de médiateur entre votre utilisateur et vos API de stockage backend pour faciliter toute autre interaction de données dont vous avez besoin.

Une expérience de développeur plus fluide

L’utilisation de Jamstack vous permet de vous concentrer sur la fourniture de fonctionnalités et l’amélioration de l’expérience utilisateur. Vous n’avez pas besoin de passer du temps à configurer ou à maintenir une infrastructure backend coûteuse. Au lieu de cela, vous pouvez utiliser des API de plate-forme en tant que service pour récupérer et enregistrer les données de votre application.

Jamstack se marie bien avec les workflows de développement et de déploiement basés sur Git. Comme votre pile n’est en réalité qu’un serveur Web, vous pouvez tout représenter sous forme de fichier texte brut dans votre référentiel. Les pipelines de livraison continue vous aident à expédier les mises à jour rapidement, sans re-provisionner les serveurs.

La plupart du temps, vous n’hébergez pas vous-même les composants de l’infrastructure. Les systèmes Jamstack sont généralement déployés directement sur un hôte de fichiers statiques comme Netlify, Firebase, GitHub Pages ou même un simple compartiment S3. Vous pouvez également conteneuriser votre application avec Docker et la lancer dans un cluster Kubernetes.

Dans tous les cas, vous ne copiez pas manuellement les fichiers ou ne modifiez pas les paramètres du serveur – vous écrivez du code et fusionnez dans votre branche principale pour le déploiement. Un dernier élément est généralement un CDN comme Cloudflare qui se trouve devant votre solution de serveur Web, mettant en cache le contenu pour améliorer encore les performances pour les utilisateurs finaux.

Composants découplés

Jamstack vous permet de découpler les composants individuels de votre application. Dans un site Web traditionnel basé sur un CMS, votre code, votre contenu et vos styles cohabitent dans un seul système. Vous avez besoin de l’intégralité du CMS disponible pour servir une seule fonction.

L’utilisation du Jamstack sépare complètement ces composants. Votre serveur Web sert le code tandis que les fournisseurs de plate-forme externes gèrent vos données. Cela vous donne une plus grande flexibilité pour changer les pièces de votre pile en fonction de vos besoins.

L’utilisateur final bénéficie également d’une expérience plus résiliente. Même si le magasin de données tombe en panne, vous pouvez toujours utiliser votre balisage principal et JavaScript pour afficher une page d’erreur appropriée. Les temps de chargement sont plus rapides car le navigateur ne récupère que le code, pas les données, lors de son premier contact avec votre serveur.

Une différence clé par rapport aux approches de rendu par serveur est que les sites Jamstack sont toujours pré-construits. Vous servez des actifs entièrement statiques, au lieu de combiner du code et des données à chaque demande que le serveur reçoit. Votre processus de génération exécutera l’étape de compilation une fois par déploiement, créant le balisage que votre serveur Web envoie aux navigateurs. Cela augmente l’efficacité et les performances.

Les inconvénients

L’inconvénient le plus important de Jamstack peut être le même modèle de mise à jour basé sur le code qui le rend souvent si attrayant. Il est souvent plus difficile pour les auteurs et les éditeurs de contenu de s’impliquer, car ils doivent généralement apprendre à écrire des balises en HTML ou en Markdown. Cela peut être intimidant pour les rédacteurs non techniques familiers avec une expérience graphique WYSIWYG.

Une autre limitation est votre dépendance inhérente aux plates-formes tierces. Le Jamstack encourage l’utilisation d’API externes et de fournisseurs d’hébergement qui pourraient disparaître ou modifier leur offre du jour au lendemain. Bien que l’exécution de votre propre infrastructure entraîne des problèmes de maintenance, cela vous donne également la certitude que votre pile restera fonctionnelle longtemps dans le futur.

Il est également possible de dépasser le Jamstack. La mise en œuvre de fonctionnalités dynamiques lourdes peut entraîner des problèmes si la plate-forme que vous utilisez ne peut pas répondre à vos besoins. Vous pourriez finir par vous installer sur votre propre backend à mi-chemin de la vie de votre produit. Si vous servez principalement du texte, des images et quelques appels d’API simples, Jamstack devrait bien fonctionner pour vous. Pour des scénarios plus complexes, il peut être plus difficile de trouver des solutions prêtes à l’emploi que vous pouvez brancher sur votre JavaScript et votre balisage.

Vous pouvez créer des applications Jamstack avec rien de plus qu’un éditeur de texte et un terminal. Sélectionnez un fournisseur d’hébergement, installez son CLI, écrivez des fichiers HTML et exécutez la commande deploy pour mettre votre site en ligne.

En pratique, la plupart des gens choisissent d’utiliser une sorte d’échafaudage pour faciliter le démarrage. Si vous créez une application Web, vous pouvez utiliser un framework JavaScript pour bénéficier du routage et de la navigation côté client. Pour les sites Web statiques, vous souhaiterez probablement utiliser un générateur de site statique comme Jekyll, Hugo ou Gatsby qui vous permet de séparer votre thème de votre contenu.

Des fonctions dynamiques sont ajoutées en intégrant des API tierces, en hébergeant vos propres microservices ou en s’appuyant sur des fonctions sans serveur créées avec une plate-forme de cloud public. Des solutions basées sur JavaScript sont facilement disponibles pour implémenter des formulaires, la recherche, le commerce électronique et d’autres fonctionnalités complexes, sans écrire vous-même une ligne de code backend. Vous pouvez trouver des listes publiques de services idéaux auxquels vous pourriez vous intégrer sur GitHub.

Conclusion

Le Jamstack est une approche du développement d’applications Web qui privilégie l’insertion d’un maximum de code dans le client. JavaScript et le balisage sont envoyés au navigateur ; les données atteignent ensuite vos services backend via des interactions API.

La popularité de Jamstack a augmenté avec les améliorations des API de navigateur observées au cours des dernières années. JavaScript a également considérablement mûri en tant que langage, aidé par des dialectes comme TypeScript. Ces développements ont fait du ciblage exclusif du frontend une proposition plus réaliste pour beaucoup plus d’équipes.

L’utilisation d’une approche Jamstack simplifie souvent votre application, facilitant un développement plus rapide et une plus grande évolutivité. Avec moins de points de terminaison côté serveur à protéger, votre niveau de sécurité s’améliore et votre charge de maintenance est réduite. Jamstack ne peut pas répondre à toutes les applications, mais cela vaut la peine d’être pris en compte lorsque vous travaillez sur des systèmes frontend first avec des fonctionnalités backend relativement détendues.

Enfin, n’insistez pas sur le fait de faire les choses à 100 % « à la manière de Jamstack » – l’approche est ouverte à l’interprétation. Le concept consiste vraiment à donner la priorité au frontend en utilisant la puissance de JavaScript et des API. Cela ne signifie pas que vous ne pouvez pas exécuter votre propre infrastructure ou écrire votre propre backend.

Concentrez-vous sur le découplage des composants de votre pile, l’accélération des temps de chargement des clients et la récupération des données de manière asynchrone via les API au moment où le navigateur en a besoin. Ces techniques aident à créer des applications plus résilientes avec une meilleure expérience utilisateur, en exploitant pleinement les capacités du Web moderne.