Catégories
Astuces et Design

Présentation du Jamstack: création de sites sécurisés et hautes performances

De temps en temps, le développement Web prend une tournure dramatique pour le mieux. Dans cet article, nous présentons le Jamstack, expliquant ce que c'est et pourquoi il est génial.

À l'époque, les sites dynamiques explosaient avec la pile LAMP. Ensuite, la pile MEAN a fourni une base pour la prochaine génération d'applications Web. Maintenant que les API et les composants réutilisables sont à la hausse, les sites statiques sont à nouveau à la mode. C’est en quelque sorte un «retour aux sources», mais pas tout à fait.

Qu'est-ce que le Jamstack?

Logo Jamstack

Fourni: Netlify

le Jamstack est un redéfinition du Web moderne pour des sites Web plus rapides et plus sécurisés. Ces sites s'adaptent mieux et, avec les outils appropriés, sont beaucoup plus faciles (et plus amusants) à développer et à maintenir.

Décomposons le terme:

  • J signifie JavaScript. JS est venu un long chemin depuis son introduction par Netscape en 1995. Avec des bibliothèques réactives et progressives, vous pouvez concevoir des applications Web qui se comportent à peu près comme des applications mobiles.
  • A signifie API. Vous n’avez pas besoin de programmer chaque fonctionnalité vous-même, mais vous pouvez compter sur un traitement tiers pour un grand nombre de tâches.
  • M signifie Markup. Vous pouvez réutiliser des composants qui ont déjà été développés ou en créer de nouveaux qui sont beaucoup plus faciles à entretenir.

N'est-ce pas juste du buzz?

D'une certaine manière, oui. Le terme Jamstack, à l'origine stylisé JAMstack, a été inventé par la société Netlify comme un moyen de promouvoir sa «plate-forme tout-en-un pour automatiser les projets Web modernes». Les principes de Jamstack ne sont pas vraiment nouveaux, car les composants Web et les API existent depuis un certain temps.

Mais à peu près de la même manière, le terme Ajax (JavaScript et XML asynchrones) a été inventé par une autre société à l'époque – Adaptive Path – et même si l'API XMLHttpRequest (XHR) qui a rendu Ajax possible existait également depuis un certain temps, Ajax et JAMstack étaient une refonte rafraîchissante des idées avec des utilisations légitimes qui ont été rapidement adoptées par la communauté. Le battage médiatique est bien mérité: cette façon de travailler a été une révélation pour de nombreux développeurs à travers le monde.

Sites statiques?

Les «sites statiques» sont l'antithèse des «sites Web dynamiques», n'est-ce pas? Alors, comment fournir une interaction riche et dynamique avec des fichiers HTML simples? Eh bien, JavaScript.

JavaScript a beaucoup évolué depuis la première guerre des navigateurs, s'étant consolidé en tant que langage de programmation à usage général avec l'avènement de Node.js, et avec des bibliothèques comme React, Angular et Vue.js. Les possibilités de conception d'interfaces utilisateur (UI) de haute qualité sont infinies.

Bien entendu, JavaScript n’est pas une solution miracle. Vous ne ferez probablement pas d'analyse de données ou d'IA avec. Mais pour le développement Web, vous ne pouvez pratiquement rien faire avec une API que vous pouvez utiliser avec des méthodes JavaScript, car il y a de fortes chances que quelqu'un ait déjà créé un microservice pour cela.

Et si, en plus de cela, vous pouviez «encapsuler» tout ce processus avec un balisage dans un composant réutilisable – que vous pourriez à peu près insérer chaque fois que vous avez besoin de cette fonctionnalité spécifique – vous pourriez potentiellement économiser des heures de travail à chaque fois.

C'est la pile J · A · M juste là: JavaScript, API, balisage.

Découplé, sans tête, microservices, sans serveur… Désolé, quoi?

Tous ces sujets sont d'actualité dans le développement Web, et ils sont tous étroitement liés, mais pas tout à fait identiques. Vous entendrez beaucoup ces termes, alors clarifions une terminologie dès le début.

Couplé vs découplé vs sans tête

ACCOUPLÉ c'est lorsque le contenu d'un site Web est créé, géré et stocké sur le back-end du site, où se trouve la base de données (comme l'administrateur WordPress). Ce contenu est ensuite extrait du back-end et représenté dans le navigateur via une interface front-end (comme un modèle WordPress). Dans un sens, une application «couplée» est la traditionnelle «pile complète» avec le back-end et le front-end étant différents côtés de la même application.

En revanche, DÉCOUPÉ c'est quand le back-end et le front-end sont gérés séparément – ce qui signifie que la base de données et les outils de gestion seront sur un serveur, et le front-end ailleurs. Naturellement, il doit y avoir un support par lequel les deux sont connectés, qui est normalement une API. De plus, étant donné que le back-end est désormais effectivement séparé du front-end, il pourrait en fait y avoir plusieurs frontaux à différents endroits! (Pensez à différentes vitrines utilisant le même moteur, comme Shopify.)

En un mot, SANS TÊTE Logiciel n'a tout simplement pas de frontal ou de couche de présentation. Un CMS headless, par exemple, est celui qui pourrait générer du contenu statique et le diffuser n'importe où: une application mobile, un appareil Internet des objets, un site Web statique. Certes, c'est aussi une situation «découplée», mais ici, vous n'aurez peut-être même pas besoin d'une API. Pensez à un moteur WordPress qui exportait ses publications pour les diffuser sous forme de fichiers HTML statiques: c'est sans tête. En fait, vous êtes actuellement sur une page qui a été générée exactement de cette manière.

Monolithique (étroitement couplé) vs microservices (faiblement couplé)

Mettre tout simplement, MONOLITHIQUE pourrait être défini comme logiciel construit en une seule pièce. Les exemples peuvent inclure une application mobile, la plupart des applications que vous pouvez installer sur votre ordinateur et des applications Web telles que WordPress. Ces applications peuvent toujours avoir des «modules» ou des «composants» internes, mais nous disons que ce sont couplage étroit car ils sont un élément indispensable de l'application, sans lequel l'application ne fonctionnerait pas.

D'autre part, COUPLAGE LÂCHE les composants logiciels fonctionnent plus comme des plugins qui peuvent être supprimés ou remplacés, et peut-être que la fonctionnalité changera, mais le cœur de l'application fonctionnera toujours. Ce principe permet de «sous-traiter» des fonctionnalités via des API tierces – souvent appelées «microservices» – car elles fournissent des fonctionnalités secondaires (redimensionnement d'image, connexion, stockage) qui ne sont pas en elles-mêmes un élément indispensable de l'application.

Informatique sans serveur ou traditionnelle

Certes, «sans serveur» est quelque chose d'un abus de langage. Quelle que soit l'entreprise informatique dans laquelle vous vous trouvez, des serveurs seront impliqués. Mais la manière dont vous accédez et gérez les serveurs peut être radicalement différente.

dans le MODÈLE TRADITIONNEL, vous pouvez avoir un serveur physique réel (parfois appelé bare metal) ou un serveur privé virtuel où des ressources sont allouées pour vous – parmi d'autres utilisateurs – sur un serveur physique. Les ressources sont limitées et, que vous les utilisiez à 100% ou non, vous les payez comme si vous le faisiez.

dans le MODÈLE SANS SERVEUR il y a un énorme pool de ressources offert par de nombreux serveurs tous connectés entre eux. Vous pouvez simplement extraire ce dont vous avez besoin quand vous en avez besoin et évoluer (de haut en bas) à la demande. Vous ne pouvez pas vraiment identifier un serveur physique comme étant le vôtre – tout ce que vous savez, c'est que les ressources sont là, quelle que soit leur origine.

Modèle traditionnel Modèle sans serveur
Serveurs physiques avec des ressources limitées Un pool de ressources illimitées
Sujette aux dysfonctionnements (c.-à-d. Défaillance du disque dur) Une architecture plus fiable *
Évolutivité limitée Évolutivité illimitée
Payer pour tous, y compris les services inactifs Payez ce que vous utilisez (payez au fur et à mesure)
Utilisation simple Besoin d'apprendre la mise en œuvre
    * Notez que des pannes de disques durs, de processeurs et de puces mémoire se produiront toujours. Mais comme les ressources sont affectées de manière transparente, vous ne remarquerez même pas le moment où le matériel tombe en panne et est remplacé.

Exemples pratiques du Jamstack

C'était beaucoup à prendre, surtout si vous êtes nouveau dans ces idées. Alors, faisons une pause théorique et voyons quelques utilisations pratiques de Jamstack dans la vie réelle.

Étude de cas 1: Transformer WordPress en site statique pour un gain de vitesse 10x

Si la statique est la voie à suivre, quoi de mieux que de prendre un blog WordPress dynamique (WP) et d'en faire un blog statique? Ce faisant, nous réduirons la vitesse de chargement et la latence des pages de au moins un facteur, améliorer considérablement la sécurité et améliorer notre référencement pendant que vous y êtes.

Le processus, en quelques mots

  1. Utilisez un générateur de site statique (SSG) pour créer des articles et des pages à partir de WP mais au format statique (texte, Markdown, HTML).
  2. Synchronisez le contenu statique avec un référentiel sur GitHub, GitLab ou Bitbucket.
  3. Automatisez un pipeline de déploiement afin qu'à chaque fois qu'il y a un changement dans le référentiel, les changements soient instantanément mis en ligne sur un CDN global.
  4. Détendez-vous et profitez d'un hébergement gratuit pour des sites Web sécurisés et rapides avec des déploiements automatisés. 😎

Questions qui en découlent

Bien sûr, cela génère beaucoup de questions:

  • Qu'en est-il de l'administrateur?
  • Qu'en est-il des catégories et du flux RSS?
  • Comment gérer le contenu maintenant?
  • Qu'en est-il des sections de commentaires et de la newsletter?

À ce stade, vous pouvez dire au revoir à WP Admin, car à partir de maintenant, vous générerez du contenu avec un SSG. En fait, les SSG tels que Jekyll sont spécialement conçus pour la création de blogs, et les SSG comme Gatsby.js sont déjà livrés avec toutes les piles incluses.

La gestion du contenu (comme la modification de publications existantes) est l'endroit où un CMS sans tête vient à la rescousse. Pour les commentaires et les newsletters, ce n’est pas vous déjà en utilisant une API externe pour ceux, tels que Disqus et Mailchimp?

Comment le faites-vous réellement?

Nous ne pouvons pas couvrir les tenants et les aboutissants des SSG et des CMS sans tête ici, mais restez à l'écoute pour un prochain épisode de cette série. Nous présenterons un guide étape par étape pour la migration d'un site WordPress.

Étude de cas 2: Hébergement de sites statiques gratuitement avec un pipeline automatisé

"Gratuit" est quelque chose que vous entendrez beaucoup dans la communauté Jamstack – et heureusement, ce n'est pas gratuit comme dans vous devez encore nous indiquer votre numéro de carte de crédit libre.

Le processus, en quelques mots

Dans ce cas, nous allons prendre notre site statique (par exemple, le blog que nous avons migré dans l'étude de cas 1) et le mettre en ligne:

  1. Définissez un référentiel GitHub, GitLab ou Bitbucket.
  2. Déployez sur Netlify, les pages GitLab ou les pages GitHub.

À ce stade, chaque modification du référentiel déclenchera automatiquement un nouveau déploiement (via des webhooks), qui pourrait très élégamment être annulé en cas de problème.

Pourquoi les entreprises font-elles cela gratuitement?

La surcharge liée au dépôt de fichiers HTML sur un CDN déjà déployé est minime. N'oubliez pas qu'il n'y a pas de calcul réel impliqué, pas de rendu PHP. À moins que vous n'hébergiez un site extrêmement populaire qui consomme beaucoup de bande passante, les entreprises ne craignent pas de donner certains hébergement. Et cela peut être une bonne publicité pour eux.

En offrant de nombreux cadeaux, les entreprises vous enferment également. Au moment où vous avez besoin d'un service premium (et si votre entreprise se développe, vous le ferez), vous êtes déjà avec elles. Ce n’est que juste – et en outre, à ce stade, vous deviez déjà soit développer une solution ad hoc à votre problème, soit payer pour un service de toute façon.

Comment le faites-vous réellement?

Les deux cas, Netlify ou GitHub / GitLab, sont très simples et nécessitent un effort minimal. (Néanmoins, nous aborderons le processus en détail dans un prochain article.)

Comment le Jamstack se compare au développement Full-stack

Voyons comment cette nouvelle approche se compare à une pile LAMP ou MEAN:

Pile LAMPE / MOYENNE Jamstack
Serveurs Web exécutant des sites Déploiements mondiaux sur CDN
Téléchargements FTP / SSH, redémarrage du serveur Pipelines automatisés
Pages rendues à l'exécution Pages pré-rendues pour la vitesse
Applications monolithiques (par exemple WordPress) API et microservices (front / back end découplés)
Pile complète (langues frontales et principales) Une seule pile ("JavaScript partout")

Que pouvez-vous faire d'autre avec le Jamstack?

Espérons qu'à ce stade, vous comprenez les avantages de créer votre site. Mais peut-être êtes-vous toujours sceptique quant à la manière de faire les choses les plus élémentaires sans traitement back-end, comme la connexion de l’utilisateur et la gestion ou le stockage de contenu dynamique sans base de données relationnelle (SGBDR).

Voici quelques autres exemples de choses que vous pouvez faire avec le Jamstack:

  • implémentation d'une base de données sans serveur avec un site statique
  • Identity as a Service (IDaaS): authentification sans état
  • systèmes de gestion de contenu sans tête
  • utilisation de fonctions sans serveur dans des sites statiques
  • gestion des formulaires polyvalents
  • gérer les notifications multi-plateformes
  • caddies sans tête
  • recherche réactive

Conclusion

Il est inévitable que les choses évoluent, notamment en informatique. Avant c'était la pile LAMP et ensuite c'était la pile MOYENNE. C’est désormais le Jamstack, et dans cinq à dix ans, ce sera autre chose. Il est préférable d’accepter ces changements et d’en faire les nôtres!

Apprendre de nouvelles façons de faire peut être un problème, mais cela peut aussi redynamiser votre enthousiasme pour le développement. Vous découvrirez peut-être que la maintenance des serveurs est moins compliquée, moins soucieuse des problèmes de sécurité, moins d'efforts de développement et des clients plus satisfaits. Et vous pourriez même devenir plus compétitif (et capable de demander une augmentation) en conséquence. 😀

Fondations Jamstack

Gardez un œil sur d'autres articles sur ce sujet. Bien que nous ayons couvert Jamstack au fil des ans, il est devenu une discipline et une pratique à part entière. Nous allons vous apporter les didacticiels dont vous avez besoin pour devenir un professionnel Jamstack et mettre à jour notre index ici sur cette page. Vous pouvez également rester à jour avec notre flux RSS ou sur social médias.

Ensuite:

  • une comparaison côte à côte des services liés à Jamstack
  • comment transformer WordPress en un site statique
  • hébergement de sites statiques gratuitement avec un pipeline automatisé

Et bien plus encore dans les travaux.

Laisser un commentaire

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