Jamstack

Jamstack est l’acronyme désignant une architecture composé de Javascript, d’APIs et markup. Il s’agit d’une architecture logiciel qui est apparue en 2015 et a vu son adoption s’accélérer depuis 2018 avec l’apparition de nombreux outils.

NOUS CONTACTER

Composition d’une architecture Jamstack

Javascript

Dans une architecture Jamstack, Javascript est utilisé pour créer ou gérer les fonctionnalités dynamiques. N’importe quel framework Javascript peut-être utilisé pour développer les fonctionnalités.

API’s

Les fonctionnalitées sont accessibles sous forme d’API via HTTPS à l’aide de JavaScript. Ces opérations peuvent être déléguées à des services tiers ou bien à vos fonctions développées en Javascript.

Markup

Les pages sont ensuite servis sous forme de fichiers HTML / CSS / JS statiques. Ces fichiers peuvent être générés à partir des fichiers source à l’aide d’un générateur de site statique et distribué via un CDN.

Les bénéfices de Jamstack

De meilleures performances

Utiliser Jamstack offre de meilleures performances et donc une expérience utillisateurs optimale. En effet les assets sont générés statiquement et servis via un CDN ce qui rend les temps de chargement extrêmement faibles.

Une meilleure sécurité

La sécurité est renforcée car l’architecture Jamstack repose sur la distribution d’assets et non sur des requêtes clients / serveurs, ainsi il est davantage plus complexe d’attaquer votre site ou application car les serveurs ne sont pas visible.

Coûts serveurs réduits

L’hébergement de fichier statique et leur distribution est moins gourmande en terme de CPU, bande passante et autres ressources, couplé à un CDN vos coûts d’infrastructure sont donc réduis tout en étant scalable.

Expérience de développement

Les développements front-end se focalisent sur la partie client sans être dépendants d’une architecture monolithique. On observe donc des temps de développements plus rapides et plus ciblés, un gain de temps appréciable.

Scalabilité et gestion du traffic

Comme l’architecture Jamstack sert des fichiers statiques, il est très facile d’utiliser un CDN pour les distribuer au client et ainsi de ne pas avoir à se soucier des pics d’activités – votre architecture est scalable by design.

Développement

L’expérience de développement en Jamstack est meilleure car le frontend est totalement séparé du backend qui est servi uniquement via des API’s et permet de bien scinder les problématiques.

Contrôle de version

Il est très facile de revenir à une version plus ancienne du site via Git ou SVN, l’ensemble du code est versionné et il est ainsi possible de rebuild une ancienne version du site à n’importe quel moment – un peu comme un snapshot de votre site web à un instant T. Cela permet également de garder une trace des modifications par fichier, par collaborateur et d’éviter un grand nombre d’erreurs.

Génération automatisée

Lorsqu’une nouvelle génération est requise votre serveur est notifié à l’aide de webhooks. Le serveur génère à nouveau le projet en fichiers statiques, met à jour les CDNs avec les fichiers et le site est en ligne.

Assets statiques

L’ensemble de vos assets sont considérés comme statiques, il faut comprendre par là qu’il s’agit de fichiers indépendants les uns des autres, un asset peut être une page HTML, un fichier JS, une image, une vidéo. L’ensemble de ses assets vont être déployés via un CDN et constitueront votre site web ou application. Il faut bien comprendre que c’est en cela que l’architecture Jamstack se différencie et apporte de la valeur à des architectures plus traditionnelles – il s’agit là d’une conception logicielle différente de l’existant qu’il faut appréhender avant de décider de l’implémenter .

Déploiement atomique

Une fois vos assets statiques générés, le système va les déployer comme une photographique complète de votre site à un instant T. La nouvelle version de votre site sera disponible dans le monde entier en quelques secondes. Vous aurez la possibilité de rollback à n’importe quel moment en cas de problème.

Pré-rendu et invalidation du cache

À cette étape vous pouvez avoir un pré-rendu du site statique, afin de valider la mise à disposition à tous de la nouvelle version il faudra invalider le cache (soit serveur soit via le CDN) afin de rendre la dernière version disponible.

Mise à jour du CDN

Puisque tous les fichiers et les assets sont générés en amont, ils peuvent être servis via un CDN. C’est la méthode que l’on recommande à nos clients car elle procure de meilleure performance et un redimensionnement à la volée en cas de pic de traffic.

L’histoire des architectures Jamstack

Nous recontrer

2015

Les générateurs statiques commence à être en vogue notamment avec l’apparition d’outil tel que Jekyll qui vont aider. àpopulariser cette approche et les avantages concommitant.

Headless CMS

Nous avons pour habitude d’utiliser soit wordpress ou Strapi dont nous sommes partenaire officiel, enfin si vous souhaitez faire un site ecommerce Jamstack nous pouvons aussi utiliser Magento, etc.

Des API

Un site Jamstack utilise beaucoup d’API pour fournir des services supplémentaires tels qu’un moteur de recherche, un funnel de paiement, etc.

Des outils nous permettant d’assurer un temps de développement rapide et une qualité du code avec Jamstack

Vue CLI

Nous utilisons Vue CLI pour bootstrapper un nouveau projet avec les standards les plus récent.

Linter

Linter permet d’analyser la qualité du code et d’implementer une rigueur de programmation afin d’éviter les bugs et les erreurs stylistiques au sein d’un projet.

Nos projets Jamstack

Réservez un appel stratégique pour discuter de votre projet

Nous rencontrer

Découvre les autres technologies FrontEnd utilisées chez Agily

WordPress

WordPress est une plateforme de création de sites web gratuite et open-source. Il est le blogging et le constructeur de sites web le plus facile et le plus puissant qui existe aujourd’hui.

Jamstack

Jamstack est une architecture conçue pour rendre un site web plus rapide, plus sûr et plus facile à faire évoluer. Elle s’appuie sur un grand nombre d’outils et de workflows que les développeurs apprécient et qui leur apportent une productivité maximale.

VueJS

Vue.JS est un framework progressif pour la création d’interfaces utilisateur. Il est conçu dès le départ pour pouvoir être adopté de manière progressive, contrairement aux autres frameworks monolithiques.

NuxtJS

Nuxt.js est un framework pour la création d’applications Vue.js. Son objectif est d’aider les développeurs Vue à tirer parti des technologies de pointe, rapidement, facilement et de manière organisée.

ReactJS

React est une bibliothèque JavaScript déclarative, efficace et flexible pour la création d’interfaces utilisateur. Elle permet de composer des interfaces utilisateur complexes à partir de petits morceaux de code isolés appelés « composants ».

TypeScript

TypeScript est un langage open-source qui s’appuie sur JavaScript, l’un des outils les plus utilisés au monde, en ajoutant des définitions de types statiques.