Article original : What is the JAMstack and how do I get started?

Les sites JAMstack sont très en vogue actuellement dans le monde du développement web. Et à juste titre ! Mais qu'est-ce que c'est exactement et comment pouvons-nous tous profiter de ses avantages ?

Qu'est-ce que ce JAMstack ?

Pour commencer, JAMstack est une architecture logicielle et une philosophie qui adhère aux composants suivants : JavaScript, APIs et Markup.

Si cela vous semble familier, c'est parce que ça l'est ! Cette application React que vous compilez avec Webpack et que vous servez finalement depuis S3 ? Oui, c'est une application JAMstack. Ce simple fichier HTML qui n'a pas de JavaScript et qui ne fait littéralement rien de dynamique ? Oui, c'est aussi une application JAMstack.

Image Bill et Ted jouent de la guitare invisible

À ne pas confondre avec le serverless

Si vous venez davantage du côté cloud des choses (pensez à AWS, GCP, Azure), vous pourriez être enclin à penser que serverless et JAMstack sont la même chose. Il est vrai qu'ils ont des similitudes dans la philosophie de la gestion des ressources, comme l'hébergement d'un site sur S3. Mais une application JAMstack n'est pas toujours une application serverless.

Prenons l'exemple d'une application hébergée dans un stockage statique sur le fournisseur cloud de votre choix. Oui, vous pourriez servir l'application de manière serverless, mais vous pourriez traiter avec une API qui utilise Wordpress ou Rails, deux technologies qui ne sont certainement pas serverless.

Combiner ces philosophies peut aller loin, mais elles ne doivent pas être confondues comme étant identiques.

Quels sont les composants du JAMstack ?

Revenons au JAMstack : il est généralement composé de 3 composants : JavaScript, APIs et Markup. Son histoire provient de l'évolution du terme "site statique" en quelque chose de plus significatif (et commercialisable). Ainsi, bien que le résultat final soit un site statique, il a été développé pour inclure des outils de première classe à chaque étape du processus.

Image Découpage du JAMstack

Bien qu'il n'y ait pas d'ensemble spécifique d'outils que vous devez utiliser, ou même d'outils au-delà du simple HTML, il existe de bons exemples de ce qui peut composer chaque partie de la stack. Plongeons un peu dans chaque composant.

JavaScript

Le composant qui a probablement le plus contribué à populariser le JAMstack est JavaScript. Notre langage préféré pour les navigateurs nous permet de fournir toutes les parties dynamiques et interactives que nous n'aurions peut-être pas si nous servions du HTML simple sans lui.

C'est là que vous verrez souvent des frameworks UI comme React, Vue, et des nouveaux venus comme Svelte entrer en jeu.

Image Exemple "Un composant simple" de reactjs.org

Ils rendent la construction d'applications plus simple et plus organisée en fournissant des APIs de composants et des outils qui compilent en un simple fichier HTML (ou plusieurs).

Ces fichiers HTML incluent un groupe d'actifs comme des images, du CSS, et le JS réel qui sont finalement servis à un navigateur via votre CDN préféré (réseau de diffusion de contenu).

APIs

Utiliser les forces des APIs est au cœur de la manière dont vous rendez une application JAMstack dynamique. Qu'il s'agisse d'authentification ou de recherche, votre application utilisera JavaScript pour faire une requête HTTP à un autre fournisseur qui améliorera finalement l'expérience d'une manière ou d'une autre.

Gatsby a inventé l'expression "content mesh" qui décrit assez bien les possibilités ici.

Image Content Mesh

Vous n'avez pas nécessairement besoin de vous adresser à un seul hôte pour une API, mais vous pouvez vous adresser à autant que vous en avez besoin (mais essayez de ne pas en abuser).

Par exemple, si vous avez une API Wordpress headless où vous hébergez vos articles de blog, un compte Cloudinary où vous stockez vos médias spécialisés, et une instance Elasticsearch qui fournit votre fonctionnalité de recherche, ils travaillent tous ensemble pour offrir une expérience unique aux personnes utilisant votre site.

Markup

C'est la pièce critique. Qu'il s'agisse de votre HTML écrit à la main ou du code qui compile en HTML, c'est la première partie que vous servez au client. C'est un peu une pièce de facto de tout site web, mais la manière dont vous le servez est la partie la plus importante.

Pour être considéré comme une application JAMstack, le HTML doit être servi de manière statique, ce qui signifie essentiellement qu'il n'est pas rendu dynamiquement depuis un serveur.

Si vous assemblez une page et la servez avec PHP, ce n'est probablement pas une application JAMstack. Si vous téléchargez et servez un seul fichier HTML depuis un stockage qui construit une application avec JavaScript, cela ressemble à une application JAMstack.

Image Sortie statique de Gatsby sur AWS S3

Mais cela ne signifie pas que nous devons toujours construire 100% de l'application dans le navigateur. Des outils comme Gatsby et d'autres générateurs de sites statiques nous permettent de récupérer certaines ou toutes nos sources d'API au moment de la construction et de rendre les pages sous forme de fichiers HTML.

Imaginez que vous avez un blog Wordpress, nous pouvons récupérer tous les articles et finalement créer un nouveau fichier HTML pour chaque article. Cela signifie que nous allons pouvoir servir une version précompilée de la page directement au navigateur, ce qui équivaut généralement à un premier rendu plus rapide et une expérience plus rapide pour votre visiteur.

Une note sur l'"hébergement"

Utiliser le terme hébergement ici peut être trompeur si vous êtes nouveau dans le concept. Oui, votre site est techniquement hébergé quelque part, mais pas au sens traditionnel. Vous n'avez pas de serveur que vous maintenez où vous téléchargez vos fichiers avec un client FTP comme Cyberduck.

Au lieu de cela, que vous le fassiez vous-même avec S3 ou que vous le pipiez dans Netlify (qui est en fait multi-cloud), votre HTML et vos actifs statiques sont servis depuis un stockage d'objets. À la fin de cela, vous avez généralement un CDN comme Cloudflare qui met en cache ces fichiers à des emplacements partout dans le monde, rendant vos pages plus rapides à charger pour les personnes visitant votre site.

Image Carte de distribution du CDN

Qu'est-ce qui rend une application JAMstack si géniale ?

Les applications JAMstack satisfont intrinsèquement la plupart, sinon tous, des 5 piliers du cadre AWS Well-Architected Framework. Ce sont des concepts clés qu'AWS considère pour fournir une infrastructure rapide, sécurisée, haute performance, résiliente et efficace.

Image AWS Well-Architected

Voyons comment...

Vitesse

Le fait que vous serviez des applications JAMstack en tant que fichiers statiques directement depuis un CDN (généralement) rend probable que votre application se chargera super rapidement. Les jours où le serveur devait passer du temps à construire la page avant de répondre sont révolus ; maintenant vous servez la page en tant que simple HTML "tel quel" ou avec une sorte d'hydratation côté client comme vous le verriez avec React.

Coût

Plus souvent qu'autrement, les sites JAMstack coûteront moins cher que leurs homologues côté serveur. L'hébergement d'actifs statiques est bon marché et maintenant votre page est servie au même tarif.

Évolutivité

Puisque vous servez vos fichiers depuis un hébergement statique, probablement un CDN, cela vous donne pratiquement une évolutivité infinie. La plupart des fournisseurs feront cette affirmation, ce qui signifie que vous n'aurez aucun problème à laisser un afflux de personnes accéder à votre site par la porte d'entrée.

Maintenance

Le fondement de votre site statique n'est pas un serveur, ce qui signifie que vous n'avez pas besoin de le maintenir. Que ce soit Netlify, S3, ou tout autre fournisseur, votre HTML, CSS et JS statiques sont maintenus pour vous sans tracas.

Sécurité

En insistant sur l'absence de serveur que vous devez personnellement maintenir, vous n'avez pas vraiment besoin de vous soucier autant de verrouiller les moyens pour les gens d'intrusion.

Au lieu de cela, vous devrez vous concentrer principalement sur les permissions pour verrouiller le contenu privé et rassurer vos utilisateurs que leurs informations personnelles ne sont pas publiques.

Mais cela dépend aussi de vos APIs

Autant ces points sont vrais pour les aspects statiques de votre site, gardez à l'esprit que vous dépendez peut-être encore d'un type d'API pour votre expérience côté client.

Essayez de tirer parti de ces requêtes au moment de la compilation lorsque vous le pouvez, comme avec un générateur de site statique. Sinon, vous devrez peser le nombre de requêtes que vous faites à un endpoint dynamique et comment cela impacte tous les points ci-dessus pour votre expérience globale.

Mon site web est-il considéré comme étant sur le JAMstack ?

Nous avons déjà parlé des 3 composants (JavaScript, APIs, Markup), mais ce dont nous n'avons pas parlé, c'est le fait que vous n'avez pas nécessairement besoin d'utiliser les 3 pour considérer votre site digne de l'étiquette JAM.

Image Wayne's World "we're not worthy"

En réalité, tout se résume au Markup et à la manière dont vous le servez. Au lieu que votre application Rails rende votre HTML pour vous, vous pourriez héberger une application React précompilée sur S3 qui se connecte à Rails via un ensemble d'APIs.

Mais vous n'avez même pas besoin d'avoir des APIs. Vous n'avez même pas besoin d'avoir du JavaScript ! Tant que vous servez un fichier HTML sans qu'il doive être compilé sur un serveur au moment de la requête (aka pré-rendu), vous avez un site JAMstack.

Quels sont quelques exemples de JAMstack ?

freecodecamp.org

Oui ! freecodecamp.org et son portail d'apprentissage est un site JAMstack construit sur Gatsby. Même avec les complexités de fournir une application pour suivre des cours de code, freeCodeCamp est capable de rassembler la puissance d'un générateur de site statique et des APIs puissantes pour apporter aux gens du monde entier le pouvoir d'apprendre à coder.

Image https://www.freecodecamp.org/

Vous pouvez voir Quincy de freeCodeCamp parler plus de cela à la JAMstack_conf 2018 : https://www.youtube.com/watch?v=e5H7CI3yqPY

Note : les portails News et Forum ne sont pas actuellement des sites JAMstack.

Impossible Foods

Le site principal de Impossible Foods n'est autre qu'un site Gatsby ! Tout, de leurs recettes à leur localisateur, est compilé via notre générateur de site statique "ultra-rapide" préféré.

Image https://impossiblefoods.com/

web.dev

Le centre de ressources web.dev de Google est construit en utilisant le 11ty en croissance. Vous pouvez même trouver le code open source à l'adresse : https://github.com/GoogleChrome/web.dev

Image https://web.dev/

Quels sont quelques outils que je peux utiliser pour construire des sites ou applications JAMstack ?

La bonne nouvelle avec tout ce buzz, c'est qu'il existe une tonne d'outils actuellement disponibles et une tonne d'autres en route. Ils peuvent encore être un peu rugueux sur les bords, mais c'est parce que c'est un tout nouveau monde d'outils et cela nécessite un peu de lissage pour être parfait.

Construire votre application

C'est la partie amusante. Comment allez-vous construire votre application ? Avec Scully dans le paysage, vous pouvez pratiquement choisir votre framework UI préféré et vous lancer. Voici quelques-uns populaires pour commencer, mais ce n'est pas exhaustif.

Besoin que je choisisse un ? Commencez avec Gatsby et démarrez avec un starter simple.

Servir votre application

J'aime penser que c'est la partie facile selon votre configuration. Des outils comme Netlify et Zeit rendent cela très simple à configurer en se connectant à votre dépôt Github et en construisant à chaque fois qu'un nouveau commit est poussé, mais bien sûr vous avez des options comme AWS si vous voulez plus de contrôle.

Besoin que je choisisse un ? Commencez avec Netlify et prenez 5 minutes pour déployer ce site Gatsby.

Rendre votre application dynamique

En réalité, cela peut être n'importe quoi qui peut être utilisé comme une API faisant des requêtes depuis le navigateur. Je ne vais pas lister une tonne d'exemples par type, mais voici quelques outils et endroits où vous pouvez trouver des ressources.

Et qu'en est-il des ressources générales pour apprendre ?

Vous pouvez trouver beaucoup de ressources pour vous lancer rapidement dans le monde JAMstack.

Préparez-vous à en voir plus

Similaire à son homologue serverless, les jours du JAMstack sont jeunes. Avec le temps, nous verrons les outils mûrir et s'étendre, offrant de nouvelles façons passionnantes de construire rapidement des sites rapides que tout le monde peut utiliser.

Rejoignez la conversation sur Twitter et faites-moi savoir quelle est votre partie préférée de la construction d'un site JAMstack !

Quelque chose manque ?

Votre outil JAMstack préféré ou un exemple génial manque ? Contactez-moi sur Twitter !