jamstack_recette

La recette JAMStack đŸ‘šđŸ»â€đŸł

Avec l’explosion du trafic sur mobile (je vous rappelle qu’aujourd’hui le trafic sur mobile est supĂ©rieur aux trafic web)  la vitesse des sites web et leurs sĂ©curitĂ© sont d’une importance capitale.

Si vous n’en ĂȘtes pas encore persuadĂ©s, ces quelques donnĂ©es devraient vous aider 😅

0,1 seconde de temps de chargement en moins, c’est :

  • +8,4% de conversions et +9,2% sur le panier moyen dans la distribution.
  • +10,1% de conversions et +1,9% sur le panier moyen dans le voyage.
  • +8,6% de pages vues par session dans le luxe.
  • -8,3% de rebond sur les formulaires dans la distribution.

Si, comme tout le monde, vous cherchez le secret de la performance des sites web, en toute sécurité. Je vous conseille de continuer cet article.

Car il y a de fortes chances que vous ailliez une bonne partie de vos rĂ©ponses grĂące au terme JamStack…

JamStack c’est quoi ?

JAM est l’acronyme de « JavaScript, APIs, Markup », ces 3 composants sont les clĂ©s du succĂšs :

  • Markup, pour la crĂ©ation de pages statiques html.
  • JavaScript, pour le code de l’aspect dynamique du site (peut import le Framework utilisĂ©).
  • API, pour les interfaces de programmation d’application. Les opĂ©rations (cĂŽtĂ© serveur) sont rĂ©alisĂ©es sous forme d’API rĂ©utilisables.

Les applications JAMStack sont donc :

Des pages HTML statiques, rendues dynamiques grùce au langage JavaScript et améliorées grùce à des services distants accessibles via des API.

Pour les novices du code, le javascript va permettre de dynamiser des pages statiques loin d’un serveur. Car la particularitĂ© de ce langage est qu’il est exĂ©cutĂ© sur l’appareil que vous utilisez et non pas sur un serveur distant.

javascript

Simple ! n’est ce pas ?

En effet, mais les choses simples sont souvent les choses les plus efficaces 😉

Et cette « stack technique » va vous amener de nombreux bénéfices.

Les Bénéfices de la JamStack

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

La Performance.

La JamStack c’est rapide, parfois mĂȘme trĂšs rapide. Car ce sont « simplement » des pages dynamiques hĂ©bergĂ©es le plus souvent sur des CDN pour ĂȘtre prĂ©sentĂ©es au plus proche de l’utilisateur final.

performance-jamstack

La sécurité.

Encore une fois, nous parlons de pages statiques amĂ©liorĂ©es par des API distantes. Il n’y a donc rien Ă  hacker car aucun serveur avec de la donnĂ©e.
Quoi de mieux pour la sĂ©curitĂ© lorsqu’il n’y a rien Ă  voler 😊

Les coûts.

Si vous avez compris la logistique des deux prĂ©cĂ©dents points, celle-ci ne va pas vous Ă©chapper. L’hĂ©bergement des pages statiques ça ne coute presque rien. Vous remplacez le coĂ»t des serveurs par le seul coĂ»t d’un CDN.

Techniquement les possibilitĂ©s sont nombreuses (Amazon S3, Google cloud, mais aussi Netlify pour le CD/CI…). Si vous voulez en savoir plus sur ce sujet, vous pouvez consulter mon article sur le noOps.

La scalabilité.

Cette architecture permet de simplifier la scalabilitĂ© des sites. Puisque les pages statiques gĂ©nĂ©rĂ©es peuvent ĂȘtre hĂ©bergĂ©es par un CDN, et ainsi ĂȘtre dĂ©livrĂ©es de maniĂšre scalable et rapide tout autour du monde.

En bonus, ce genre de scalabilité rendra le site beaucoup moins sensible aux attaques DDOS.

Une meilleure urbanisation de votre systĂšme d’information.

« Chacun son mĂ©tier et les vaches seront bien gardĂ©es » đŸ€ 

Personnellement c’est ma philosophie sur les sujets d’urbanisation des SI.
Un outil pour chaque métier et votre business sera bien gardé.
Grace au JamStack les dĂ©veloppeurs front end peuvent se focaliser sur la partie client sans ĂȘtre ralentis par une architecture monolithique.

Si vous voulez en savoir plus sur l’urbanisation des SI, vous pouvez consulter l’article suivant :

https://davidlanglade.com/digitalisation/5-regles-durbanisation-de-votre-si/

La recette d’un site en JamStack

SI vous ĂȘtes arrivĂ©s jusqu’ici c’est ce le sujet commence Ă  rĂ©ellement vous intĂ©resser. Vous trouverez ci-dessous la recette d’un site JamStack avec tous les ingrĂ©dients (mĂȘme les plus secrets).

  • Premier ingrĂ©dient, ajoutez un CDN pour hĂ©berger votre site (Netlify, Amazon Cloudfront…)
  • Ensuite, une pincĂ©e de gĂ©nĂ©rateur de sites statiques. C’est l’ingrĂ©dient secret qui vous permettra de gĂ©nĂ©rer vos pages statiques Ă  partir de contenu dynamique. Pour cela vous pouvez faire confiance Ă  Gatsbyjs ou Gridsome.
  • Un CMS headless, pour crĂ©er et prĂ©senter du contenu. Concernant cet ingrĂ©dient, les leaders sont Contentful ou Strapi.
  • Et enfin on termine avec une pipeline pour compiler votre site à chaque changement de contenu ou modification de code (ex. : Gitlab CI/CD, Netlify)

En conclusion JAMStack or not JAMStack

Vous l’aurez sans doute compris, grĂące Ă  ces nombreux avantages (performances, scalabilitĂ©, couts…).

Il y a de fortes chances que, dans l’avenir, nous ayons de plus en plus Ă  faire avec ces stacks techniques.

Si vous ĂȘtes prĂȘts Ă  vous lancer, je vous laisse repartir avec une rapide liste de bonnes pratiques pour dĂ©marrer de maniĂšre plus confortable.

  • Pensez Ă  versionner votre code (Git sera votre ami)
  • Utilisez les webhooks pour permettre les gĂ©nĂ©rations automatiques dĂšs qu’une modification aura lieu.
  • Mettez en place un rĂ©seau de distribution de contenu (CDN) dĂšs le dĂ©but de votre projet.
  • Pensez dĂ©ploiement atomique afin d’avoir une version consistante de votre site partout en tout circonstance.
  • Mettez en place des processus d’invalidation de votre cache. Une fois le site gĂ©nĂ©rĂ© et poussĂ© en production, les CDN vont invalider les caches afin de prĂ©senter immĂ©diatement la nouvelle version du site dans le monde entier.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Retour en haut
Verified by MonsterInsights