Pourquoi j’ai choisi le JAMstack ?

Qui n’a jamais rêver d’avoir un site Web performant, sécurisé et … économique? Fort heureusement, la communauté des devs du monde à mis en place un retour en fanfare du site Web statique grâce aux outils JAMstack !

JAMstack
JAMstack

Le JAMstak? Kézako ?

JAM pour JavaScript • API • Markup

Euh ok, mais encore?

En fait, il s’agit du stack, un ensemble de logiciels ou composants nécessaires pour créer une plate-forme complète [CF : Wikipedia], dans lequel on développe en JavaScript pure ou, mieux encore avec des librairies tels que ReactJS, VueJs ou Angular. C’est le « J »

Le « A » est en fait une façon de délocaliser toute la partie dite back-end. La base de données, l’hébergement, la gestion du contenu, le déploiement, … Tout est géré par des services en ligne, souvent peu ou pas coûteux, branché à l’application développée par « J ».

Enfin, le « M » représente le fait que le code HTML est généré au moment du déploiement. Je m’explique. Dans une application JAMstack, le développeur écrit son code UNIQUEMENT en JavaScript. Mais, pour fonctionner sur le navigateur du visiteur, le site Web doit avoir une forme classique : HTML, CSS, JavaScript. C’est ici qu’entrent en jeu les outils de compilation comme Webpack, ParcelJs, etc. pour les applications Web. Ou mieux encore, des générateurs de sites statiques (qui intègrent ces outils de compilation) comme Nuxt.js, Hugo, Phenomic ou, mon préféré, celui qui m’a aidé à développer ce site, GatsbyJS. Le code HTML étant généré au moment du déploiement, le site Web, devenu un ensemble de fichiers statiques et donc, faciles à mettre en cache, est rapide comme l’éclair!

Tout cela semble super mais quels sont les avantages ?

La performance : Comme dit plus haut, plus besoin d’attendre que la page soit construite à la volée à chaque changement de page, pas d’appel à la base de données, rien de tout ça. Le contenu du site étant construit à l’avance, tout est léger et déjà en cache donc nous sommes pratiquement sur de l’instantané.

La sécurité : Étant donné que tout le backend est dispersé dans les internet et qu’il n’a plus de communication avec un server (puisque nous sommes un site statique), il devient compliqué pour un hacker d’injecter du code malveillant. BONUS : il est très simple d’installer des certificats SSL gratuitement grâce à des autorités de certification automatisées comme LetsEncrypt pour une sécurité encore accrue.

Économique : La partie sympathique. Il est possible d’avoir un site moderne, performant, sécuritaire et évolutif pour pratiquement rien. Comment? Le fait que tout soit externalisé donne la flexibilité de choisir les APIs, les fournisseurs de services et les outils permettant la mise en ligne de notre site Web. Exemple concret :

  • Le développeur écrit son code et le met sur GitHub qui fera office d’hébergeur. Coût hors taux horaire du développement : 0 $
  • Le propriétaire du site veut ajouter, éditer, supprimer (le célèbre CRUD) le contenu sans aller mettre les mains dans le code… parce qu’il n’est pas développeur? Le service en ligne Contentful offre une interface de gestion de contenu élégante et s’intégrant parfaitement avec les générateurs de site statique. Coût (pour un petit projet bilingue) : 0 $ (voir le pricing pour des projets de plus grande envergure).
  • Le déploiement ? Rien de plus simple! Le service en ligne Netlify se connecte à votre compte Github, et se charge de compiler / déployer le code source de votre application et de la rendre disponible sur un nom de domaine (généré par le service pour le moment). Coût pour un utilisateur : 0 $
  • Le nom de domaine. La seule partie vraiment « coûteuse » du projet. Pour un domaine en « .com », suivant les diverses promotions, on est aux alentours de 30 $ par année. Car oui, il suffit du nom de domaine, l’hébergement généralement fourni avec n’est pas du tout nécessaire!

Au total, hors coût de développement, nous arrivons à un tarif annuel d’environ 30 $ !! Grosso modo, le prix d’un petit resto par année… ça laisse rêveur n’est-ce pas?

Le confort de développement : Oui, le dev qui va se charger de coder a aussi droit à un peu de confort. En cela, JAMstack, par l’utilisation de librairies Javascript moderne, donne au dev un réel plaisir ! Non seulement, ces librairies permettent de faire des choses géniales mais surtout, elles sont simples à apprendre et amusantes à utiliser! Client ou dev, tout le monde y trouve son compte!

Conclusion

JAMstack est une nouvelle façon de produire des applications Web modernes, légères et surtout sécuritaires. Ce n’est pas un hasard si les internets en parlent de plus en plus. Ses avantages sont nombreux et, pour l’utiliser moi même, je ne me vois pas retourner en arrière.


Vous êtes intéressé par un site Web développé en JAMstack ? Contactez-moi, je me ferai un plaisir de répondre à vos questions et à vos besoins.

Massimo Russo Logo
Massimo Russo
Développeur Frontend
Retour