Qu'est-ce que JAMstack et comment démarrer?

Les sites JAMstack font fureur en ce moment 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?
  • Cela ne doit pas être confondu avec sans serveur
  • Qu'est-ce qui compose le JAMstack?
  • Alors, qu'est-ce qui rend une application JAMstack si géniale?
  • Mon site Web est-il considéré comme faisant partie du JAMstack?
  • Quels sont quelques exemples de JAMstack?
  • Quels outils puis-je utiliser pour créer des sites ou des applications JAMstack?

Qu'est-ce que ce JAMstack?

Pour commencer, JAMstack est une architecture et une philosophie logicielles qui adhèrent aux composants suivants: Javascript, API 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 ne fait littéralement rien de dynamique? Oui, c'est aussi une application JAMstack.

Cela ne doit pas être confondu avec sans serveur

Si vous venez davantage du côté cloud (pensez à AWS, GCP, Azure), vous pourriez être enclin à penser que le sans serveur et JAMstack sont la même chose. Certes, 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.

Envisagez une application hébergée dans un stockage statique sur le fournisseur cloud de votre choix. Oui, vous pouvez servir l'application sans serveur, mais vous avez peut-être affaire à une API qui utilise Wordpress ou Rails, qui ne sont certainement pas sans serveur.

La combinaison de ces philosophies peut aller très loin, mais il ne faut pas les confondre.

Qu'est-ce qui compose le JAMstack?

De retour au JAMstack: il est généralement composé de 3 composants: Javascript, API et Markup. Son histoire découle de la croissance du terme «site statique» en quelque chose de plus significatif (et commercialisable). Ainsi, bien qu'en fin de compte, un site statique soit le résultat final, il est agrandi pour inclure des outils de première classe à chaque étape du processus.

Bien qu'il n'y ait aucun ensemble d'outils spécifique à utiliser, ni aucun outil au-delà du simple HTML, il existe d'excellents exemples de ce qui peut constituer chaque partie de la pile. Plongeons un peu dans chaque composant.

Javascript

Le composant qui a probablement fait le plus de travail pour vulgariser le JAMstack est Javascript. Notre langage de navigateur préféré nous permet de fournir tous les éléments dynamiques et interactifs que nous pourrions ne pas avoir si nous servons du HTML brut sans lui.

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

Ils rendent la création d'applications plus simple et plus organisée en fournissant des API de composants et des outils qui se compilent en un simple fichier HTML (ou un tas d'entre eux).

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

Apis

L'utilisation des atouts des API est au cœur de la façon dont vous dynamisez une application JAMstack. Qu'il s'agisse d'authentification ou de recherche, votre application utilisera Javascript pour faire une requête HTTP à un autre fournisseur, ce qui améliorera finalement l'expérience sous une forme ou une autre.

Gatsby a inventé l'expression «maillage de contenu» qui décrit très bien les possibilités ici.

Vous ne devez pas nécessairement contacter un seul hôte pour une API, mais vous pouvez en toucher autant que vous le souhaitez (mais essayez de ne pas aller trop loin).

Par exemple, si vous avez une API Wordpress sans tête dans laquelle vous hébergez vos articles de blog, un compte Cloudinary dans lequel vous stockez vos médias spécialisés et une instance Elasticsearch qui fournit votre fonctionnalité de recherche, ils travaillent tous ensemble pour fournir une expérience unique aux personnes qui utilisent votre site.

Balisage

C'est la pièce critique. Qu'il s'agisse de votre code HTML écrit à la main ou du code qui se compile jusqu'au HTML, c'est la première partie que vous fournissez au client. C'est en quelque sorte un élément de facto de tout site Web, mais la façon dont vous le servez est l'élément le plus important.

Pour être considéré comme une application JAMstack, le HTML doit être diffusé de manière statique, ce qui signifie essentiellement ne pas être rendu dynamiquement à partir d'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 diffusez 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 créer 100% de l'application dans le navigateur. Des outils comme Gatsby et d'autres générateurs de sites statiques nous permettent d'extraire tout ou partie de nos sources d'API au moment de la construction et de restituer les pages sous forme de fichiers HTML.

Pensez que si vous avez un blog Wordpress, nous pouvons extraire 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 à une première peinture plus rapide et une expérience plus rapide pour votre visiteur.

Une note sur "l'hébergement"

L'utilisation du terme d'hébergement ici peut être trompeuse si vous êtes nouveau dans le concept. Ouais, votre site est techniquement hébergé quelque part, mais ce n'est pas dans le sens traditionnel du terme. Vous n'avez pas de serveur que vous maintenez 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 dirigiez vers Netlify (qui est en fait multi-cloud), vos ressources HTML et statiques sont servies à partir du 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, ce qui accélère le chargement de vos pages pour les personnes qui visitent votre site.

Alors, qu'est-ce qui rend une application JAMstack si géniale?

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

Voyons comment…

La vitesse

Le fait que vous diffusiez des applications JAMstack en tant que fichiers statiques directement à partir d'un CDN (généralement) fait que votre application va probablement se charger très rapidement. Il est révolu le temps où le serveur doit passer du temps à créer la page avant de répondre; maintenant vous servez la page comme du HTML "tel quel" ou avec un type d'hydratation côté client comme vous le feriez avec React.

Coût

Le plus souvent, les sites JAMstack seront moins chers que leurs homologues côté serveur. L'hébergement d'éléments statiques est bon marché et votre page est désormais diffusée au même rythme.

Évolutivité

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

Entretien

La base 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 statique, CSS et JS sont conservés pour vous sans maux de tête.

Sécurité

En doublant le manque de serveur que vous devez entretenir personnellement, vous n'avez pas vraiment besoin de vous soucier autant de verrouiller les moyens d'intrusion des gens.

Au lieu de cela, vous devrez vous concentrer principalement sur les autorisations pour verrouiller le contenu privé et assurer à 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, gardez à l'esprit que vous pouvez toujours dépendre d'un type d'API pour votre expérience côté client.

Essayez de tirer parti de ces demandes au moment de la compilation lorsque vous le pouvez, par exemple avec un générateur de site statique. Sinon, vous devrez peser le nombre de coups que vous effectuez sur 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 du JAMstack?

Nous avons déjà parlé des 3 composants (Javascript, APIs, Markup), mais ce dont nous n'avons pas parlé, c'est du fait que vous n'êtes pas forcément obligé de les utiliser tous les 3 pour que votre site soit digne du label JAM .

Vraiment, tout se résume au balisage et à la façon dont vous le servez. Au lieu que votre application Rails affiche votre code HTML à votre place, vous pouvez héberger une application React précompilée sur S3 qui atteint Rails via un ensemble d'API.

Mais vous n'avez même pas besoin d'API. Vous n'avez même pas besoin de Javascript! Tant que vous servez un fichier HTML sans qu'il soit nécessaire de le compiler sur un serveur au moment de la demande (c'est-à-dire le pré-rendu), vous avez vous-même 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 la complexité de fournir une application pour suivre des cours de code, freeCodeCamp est capable de combiner 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 au JAMstack_conf 2018:

//www.youtube.com/watch?v=e5H7CI3yqPY

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

Aliments impossibles

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

web.dev

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

Quels outils puis-je utiliser pour créer des sites ou des applications JAMstack?

La bonne nouvelle avec tout ce buzz est qu'il y a une tonne d'outils actuellement disponibles et une tonne d'autres en cours de route. Ils peuvent encore être un peu rugueux sur les bords, mais c'est parce que c'est un nouveau monde courageux de l'outillage et qu'il faut un peu de lissage pour être parfait.

Construire votre application

C'est la partie la plus amusante. Comment allez-vous créer votre application? Avec Scully dans l'image, vous pouvez à peu près choisir votre saveur préférée de cadre d'interface utilisateur et démarrer. Voici quelques exemples populaires pour commencer, mais ils ne sont en aucun cas exhaustifs.

  • 11ty
  • Gatsby
  • Hugo
  • Nift
  • Scully (pour vous les fans angulaires)
  • Et beaucoup plus…

Besoin de moi pour en choisir un? Commencez avec Gatsby et bootstrap avec un simple démarreur.

Servir votre application

J'aime penser à cela comme la partie la plus facile en fonction de votre configuration. Des outils comme Netlify et Zeit facilitent la configuration en se connectant à votre référentiel Github et en créant 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.

  • AWS
  • Azur
  • GCP
  • Pages Github
  • Netlify
  • Poussée
  • Zeit

Besoin de moi pour en choisir un? Commencez avec Netlify et prenez 5 minutes pour déployer ce site Gatsby.

Rendre votre application dynamique

Vraiment, cela peut être tout ce qui peut être utilisé comme API faisant des requêtes à partir du navigateur. Je ne vais 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 infinie de CMS sans tête
  • Santé mentale - CMS
  • Framework sans serveur - DIY, facile à déployer des ressources sans serveur
  • Snipcart - Commerce électronique
  • Stripe - Gestion des paiements
  • Et un tas d'autres ressources…
  • Et un tas d'autres choix de CMS…
  • Et quelques informations générales et outils ...

Et que diriez-vous des ressources générales pour apprendre?

Vous pouvez trouver de nombreuses ressources pour être rapidement opérationnel dans le monde JAMstack.

  • Comment héberger et déployer un site Web statique ou une application JAMstack sur AWS S3 et CloudFront de ma part sur freeCodeCamp
  • Un guide étape par étape: Gatsby sur Netlify de Netlify
  • Créez votre propre blog à partir de zéro en utilisant Eleventy du groupe filament
  • Comment héberger votre site Web statique avec AWS - Guide du débutant de freeCodeCamp
  • Tutoriel Hugo: Comment créer et héberger un site de commerce électronique statique (très rapide) à partir de SnipCart
  • Comment créer des applications JAMstack authentifiées sans serveur avec Gatsby et Netlify à partir de freeCodeCamp

Attendez-vous à en voir plus

Semblable à son homologue sans serveur, l'époque de JAMstack est jeune. Au fil du temps, nous verrons les outils mûrir et s'étendre, ce qui nous permettra de créer rapidement des sites rapides que tout le monde pourra utiliser.

Participez à la conversation sur Twitter et dites-moi quelle est votre partie préférée de la création d'un site JAMstack!

Il manque quelque chose?

Vous manquez votre outil JAMstack préféré ou un exemple génial? Envoyez-moi un ping sur Twitter!

Suivez-moi pour plus de Javascript, UX et d'autres choses intéressantes!

  • ? Suis moi sur Twitter
  • ? ️ Abonnez-vous à mon Youtube
  • ✉️ Inscrivez-vous à ma newsletter