Les sites JAMstack font fureur en ce moment dans le monde du développement web. Et à juste titre ! Mais de quoi s’agit-il exactement et comment pouvons-nous tous profiter de ses avantages ?
- Qu’est-ce que ce JAMstack ?
- À ne pas confondre avec le serverless.
- Qu’est-ce qui compose JAMstack ?
- Qu’est-ce qui rend une application JAMstack si géniale ?
- Mon site Web est-il considéré comme faisant partie de JAMstack ?
- Quels sont les exemples de JAMstack ?
- Quels sont les outils que je peux utiliser pour créer des sites ou des applications JAMstack ?
Qu’est-ce que JAMstack ?
Pour commencer, JAMstack est une architecture et une philosophie logicielle qui adhère aux composants suivants : Javascript, APIs, et Markup.
Si cela vous semble familier, c’est parce que c’est le cas ! Cette application React que vous compilez avec Webpack et que vous servez finalement à partir de 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.
À ne pas confondre avec le serverless
Si vous êtes plutôt du côté du cloud (pensez à AWS, GCP, Azure), vous pourriez être enclin à considérer le serverless et JAMstack comme une seule et 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 ne sera pas toujours une application sans serveur.
Prenons l’exemple d’une application hébergée dans un stockage statique sur le fournisseur de cloud computing de votre choix. Oui, vous pourriez servir l’application d’une manière sans serveur, mais vous pourriez avoir affaire à une API qui utilise WordPress ou Rails, qui ne sont certainement pas sans serveur.
La combinaison de ces philosophies peut être très utile, mais il ne faut pas les confondre.
De quoi est composé JAMstack ?
Revenons à Jamstack : il se compose généralement de trois éléments : Javascript, les API et le balisage. Son histoire découle de la transformation du terme « site statique » en quelque chose de plus significatif (et commercialisable). Ainsi, bien qu’un site statique soit le résultat final, il a été élargi pour inclure des outils de première classe pour chaque étape du processus.
Bien qu’il n’y ait pas d’ensemble spécifique d’outils à utiliser, ni aucun outil au-delà du simple HTML, il existe d’excellents exemples. Plongeons un peu dans chaque composant.
Javascript
Le composant qui a probablement le plus contribué à populariser Jamstack est Javascript. Notre langage de navigation préféré nous permet de fournir tous les éléments dynamiques et interactifs que nous n’aurions pas si nous servions du simple HTML sans lui.
C’est là qu’interviennent souvent les cadres d’interface utilisateur comme React, Vue et les nouveaux venus comme Svelte.
Ils simplifient et organisent la création d’applications en fournissant des API de composants et des outils qui se compilent en un simple fichier HTML (ou plusieurs).
Ces fichiers HTML comprennent un groupe d’actifs tels que des images, des feuilles de style en cascade (CSS) et le JS proprement dit, qui sont finalement servis à un navigateur via votre CDN (réseau de diffusion de contenu) préféré.
Les APIs
L’utilisation des forces des API est essentielle pour rendre une application JAMstack dynamique. Qu’il s’agisse d’authentification ou de recherche, votre application utilisera Javascript pour effectuer une requête HTTP vers un autre fournisseur qui, en fin de compte, améliorera l’expérience sous une forme ou une autre.
Par ailleurs, Gatsby a inventé l’expression « content mesh » qui décrit assez bien les possibilités offertes ici.
Vous ne devez pas nécessairement vous adresser à un seul hôte pour une API, mais vous pouvez vous adresser à autant d’hôtes que nécessaire (mais n’en faites pas trop).
Par exemple, si vous disposez d’une API WordPress headless où vous hébergez les articles de votre blog, d’un compte Cloudinary où vous stockez vos médias spécialisés et d’une instance Elasticsearch qui fournit votre fonctionnalité de recherche, ils travaillent tous ensemble pour offrir une expérience unique aux personnes qui utilisent votre site.
Le Balisage
C’est la pièce maîtresse. Qu’il s’agisse de votre HTML écrit à la main ou du code qui se compile en HTML, c’est la première partie que vous servez au client. Il s’agit d’un élément de facto de tout site Web, mais la façon dont vous le présentez est l’élément le plus important.
Pour être considéré comme une application JAMstack, le HTML doit être servi de manière statique, c’est-à-dire qu’il ne doit pas être rendu dynamiquement par 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 à partir du stockage qui construit une application avec Javascript, cela ressemble à une application JAMstack.
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 d’extraire une partie ou la totalité de nos sources API au moment de la construction et de rendre les pages sous forme de fichiers HTML.
Pensez que si vous avez un blog WordPress, nous pouvons extraire tous les articles et créer un nouveau fichier HTML pour chaque article. Cela signifie que nous serons en mesure de servir une version précompilée de la page directement au navigateur, ce qui se traduit généralement par une première impression plus rapide et une expérience plus rapide pour votre visiteur.
Une remarque sur “l’hébergement ».
L’utilisation du terme « hébergement » ici peut être trompeuse si vous ne connaissez pas le concept. Oui, votre site est techniquement hébergé quelque part, mais pas au sens traditionnel du terme. Vous n’avez pas un serveur que vous entretenez et sur lequel 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 transmettiez à Netlify (qui est en fait multi-cloud), votre HTML et vos ressources statiques sont servis à partir du stockage objet. En aval, vous disposez généralement d’un CDN comme Cloudflare qui met en cache ces fichiers à des endroits du monde entier, ce qui accélère le chargement de vos pages pour les visiteurs de votre site.
Qu’est-ce qui rend une application JAMstack si géniale ?
Les applications JAMstack vont satisfaire intrinsèquement à la plupart, voire à la totalité, des cinq piliers du cadre AWS Well-Architected. Il s’agit de concepts fondamentaux qu’AWS prend en compte pour fournir une infrastructure rapide, sécurisée, performante, résiliente et efficace.
Voyons comment…
La vitesse
Le fait que vous serviez les applications JAMstack sous forme de fichiers statiques directement à partir d’un CDN (généralement) permet d’espérer un chargement ultra rapide de votre application. L’époque où le serveur devait passer du temps à construire la page avant de répondre est révolue ; maintenant, vous servez la page en tant que simple HTML « tel quel ».
Le coût
Le plus souvent, les sites JAMstack sont moins chers que leurs homologues côté serveur. L’hébergement de ressources statiques est bon marché et votre page est maintenant servie au même rythme.
L’évolutivité
Puisque vous servez vos fichiers à partir d’un hébergement statique, probablement un CDN, cela vous donne presque automatiquement une évolutivité infinie. La plupart des fournisseurs le revendiquent, ce qui signifie que vous n’aurez aucun problème à laisser entrer par la grande porte tout afflux de personnes sur votre site.
La maintenance
La base de votre site statique n’est pas un serveur, ce qui signifie que vous n’avez pas besoin de l’entretenir. Qu’il s’agisse de Netlify, de S3 ou de tout autre fournisseur, vos fichiers HTML, CSS et JS statiques sont maintenus pour vous sans problème.
La sécurité
Comme vous n’avez pas de serveur à entretenir personnellement, vous n’avez pas à vous soucier de verrouiller les voies d’intrusion.
Vous devrez plutôt vous concentrer sur les autorisations pour verrouiller le contenu privé et garantir à vos utilisateurs que leurs informations personnelles ne sont pas accessibles au public.
Mais cela dépend aussi de vos API
Même si ces points sont vrais pour les aspects statiques de votre site, n’oubliez pas que vous pouvez dépendre d’un certain 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, par exemple avec un générateur de site statique. Dans le cas contraire, vous devrez évaluer le nombre d’accès à un point de terminaison dynamique et son impact sur tous les points ci-dessus pour votre expérience globale.
Mon site Web est-il considéré comme faisant partie de Jamstack ?
Nous avons déjà parlé des 3 composants (Javascript, APIs, Markup), mais ce que nous n’avons pas abordé, c’est le fait que vous ne devez pas nécessairement utiliser les 3 pour considérer votre site comme digne du label JAMstack.
En réalité, tout se résume au balisage et à la façon dont vous le servez. Au lieu que votre application Rails rende votre HTML pour vous, vous pouvez héberger une application React précompilée sur S3 qui communique avec Rails via un ensemble d’API.
Mais vous n’avez même pas besoin d’avoir des APIs. Vous n’avez même pas besoin d’avoir Javascript ! Tant que vous servez un fichier HTML sans qu’il doive être compilé sur un serveur au moment de la demande (c’est-à-dire avant le rendu), vous disposez d’un site JAMstack.
Quels sont les exemples de JAMstack ?
Oui ! freecodecamp.org et son portail d’apprentissage est un site JAMstack construit sur Gatsby. Même avec la complexité de fournir une application pour prendre des cours de code, freeCodeCamp est capable de rassembler la puissance d’un générateur de site statique et de puissantes API pour apporter aux gens du monde entier la puissance de l’apprentissage du code.
Vous pouvez voir Quincy de freeCodeCamp en parler davantage lors de la JAMstack_conf 2018 :
https://www.youtube.com/watch?v=e5H7CI3yqPY
Remarque : les portails News et Forum ne sont pas actuellement des sites JAMstack.
Impossible Foods
Le site principal d’Impossible Foods n’est autre qu’un site Gatsby ! Tout, depuis les recettes jusqu’à la recherche d’un emplacement, est compilé par notre générateur de sites statiques « ultra-rapide » préféré.
web.dev
Le centre de ressources web.dev de Google est construit à l’aide de l’extension 11ty. Vous pouvez même trouver le code en open source à l’adresse suivante : https://github.com/GoogleChrome/web.dev
Quels sont les outils que je peux utiliser pour créer des sites ou des applications JAMstack ?
La bonne nouvelle avec toute cette effervescence est qu’il y a une tonne d’outils actuellement disponibles et une tonne d’autres en préparation. Il se peut qu’ils soient encore un peu rudes sur les bords, mais c’est parce qu’il s’agit d’un nouveau monde d’outils et qu’il faut un peu de temps pour le rendre parfait.
Comment construire votre application ?
C’est la partie la plus amusante. Comment allez-vous construire votre application ? Avec Scully dans le tableau, vous pouvez choisir votre framework d’interface utilisateur favori et commencer à travailler. Voici quelques uns des plus populaires pour commencer, mais ce n’est en aucun cas exhaustif.
- 11ty
- Gatsby
- Hugo
- Nift
- Scully (pour les fans d’Angular)
- Et bien d’autres encore…
Je dois en choisir un ? Commencez avec Gatsby et bootstrap avec un simple starter.
Comment configurer votre application ?
Nous aimons penser que c’est la partie la plus facile, en fonction de votre configuration. Des outils comme Netlify et Zeit rendent cette partie facile à configurer en se connectant à votre dépôt Github, mais vous avez bien sûr des options comme AWS si vous voulez plus de contrôle.
- AWS
- Azure
- GCP
- Pages Github
- Netlify
- Surge
- Zeit
Je dois en choisir un ?Commencez par Netlify et prenez 5 minutes pour déployer ce site Gatsby.
Comment rendre votre application dynamique
Il peut s’agir de tout ce qui peut être utilisé comme une API faisant des requêtes depuis le navigateur. Nous n’allons pas énumérer un tas d’exemples par type, mais voici quelques outils et endroits où vous pouvez trouver des ressources.
- Auth0 – Authentification
- Cloudinary – Gestion des médias
- Google Analytics – Analyse du trafic Web
- headlesscms.org – Liste interminable de CMS headless
- Sanity – CMS
- Serverless Framework – DIY, ressources serverless faciles à déployer
- Snipcart – Ecommerce
- Stripe – Gestion des paiements
Et pourquoi pas des ressources générales pour apprendre ?
Vous pouvez trouver un grand nombre de ressources pour être rapidement opérationnel dans le monde de JAMstack.
- Comment héberger et déployer un site web statique ou une application JAMstack sur AWS S3 et CloudFront, sur freeCodeCamp.
- Un guide étape par étape : Gatsby sur Netlify de Netlify
- Créez votre propre blog à partir de rien en utilisant Eleventy de filament group
- Comment héberger votre site Web statique avec AWS – Guide pour débutants de freeCodeCamp
- Tutoriel Hugo : Comment créer et héberger un site de commerce électronique statique (très rapide) à partir de SnipCart
- Comment construire des applications JAMstack Serverless authentifiées avec Gatsby et Netlify de freeCodeCamp
Le mot de la fin
Tout comme son homologue sans serveur, JAMstack n’en est qu’à ses débuts. Au fil du temps, nous verrons l’outillage mûrir et s’étendre, offrant de nouveaux moyens passionnants de créer rapidement des sites que tout le monde peut utiliser.
Vous souhaitez créer une application Jamstack ? Contactez-nous dès maintenant !
