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 qu’il est et pourquoi il est génial.

À l’époque, les sites dynamiques ont explosé 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 un «retour aux sources» en quelque sorte – mais pas tout à fait.

Qu'est-ce que le Jamstack?

Fourni: Netlify

Le Jamstack est une 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 a parcouru 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 déjà 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é comme JAMstack, a été inventé par la société Netlify comme un moyen de promouvoir leur «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 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 d'idées avec des usages 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 telles que React Angular et Vue.js . Les possibilités de conception d’interfaces utilisateur (UI) de haut niveau 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, il n'y a pratiquement rien que vous ne puissiez pas 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 « encapsule » tout ce processus avec balisage dans un composant réutilisable – que vous pouvez à 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 le J · A · M pile 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 pareil. Vous entendrez beaucoup ces termes, alors clarifions une terminologie dès le début.

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

COUPLED est le moment où 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). D'une certaine manière, une application «couplée» est la traditionnelle «pile complète» avec le back-end et le front-end étant des côtés différents de la même application.

En revanche, DECOUPLED est lorsque 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, le logiciel HEADLESS n'a tout simplement pas de frontal ou de couche de présentation . Un CMS sans tête par exemple, est un système qui pourrait générer du contenu statique et le pousser 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 sur une page qui a été générée exactement de cette manière en ce moment.

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

En termes simples, MONOLITHIQUE pourrait être défini comme un 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 qu'ils sont étroitement couplés car ils sont une partie indispensable de l'application, sans laquelle l'application ne fonctionnerait pas.

D'un autre côté, les composants logiciels LOOSELY COUPLED 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 «d'externaliser» 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. [19659029] L'informatique sans serveur et l'informatique traditionnelle

Certes, « sans serveur » est quelque peu inapproprié. 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à, peu importe d'où elles viennent.

* Notez que des pannes de disques durs, de processeurs et de puces mémoire continueront de se produire. Mais comme les ressources sont affectées de manière transparente, vous ne remarquerez même pas le moment où le matériel se brise 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 un site statique pour un gain de vitesse 10x

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

Le processus, en un mot

1. Utilisez un générateur de site statique (SSG) pour créer des articles et des pages hors 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:

• Et l'administrateur?
• Et les catégories et le flux RSS?
• Comment gérer le contenu maintenant?
• Que diriez-vous des sections de commentaires et de la newsletter?

À ce stade, vous pourriez dire adieu à WP Admin, car à partir de maintenant vous allez générer du contenu avec un SSG. En fait, les SSG comme Jekyll sont spécifiquement conçus pour créer des blogs, et les SSG comme Gatsby.js sont déjà livrés avec toutes les piles incluses.

Gestion du contenu (comme la modification de messages existants ) est l'endroit où un CMS sans tête vient à la rescousse. Pour les commentaires et les newsletters, n'utilisez-vous pas déjà une API externe pour ceux-ci, tels que Disqus et Mailchimp?

Comment faites-vous réellement?

Nous ne pouvons pas couvrir les tenants et les aboutissants. sur les SSG et les 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 le Jamstack communauté – et heureusement, ce n'est pas gratuit car dans vous devez toujours nous indiquer votre numéro de carte de crédit gratuitement.

Le processus, en un mot

Dans ce cas, nous prendrons notre statique site (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 Pages GitLab ou Pages GitHub .

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

Pourquoi les entreprises font-elles cela gratuitement?

La surcharge de déposer des 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 n'hésitent pas à offrir de l'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 leur. C'est juste – et en plus, à ce moment-là, vous alliez déjà devoir soit développer une solution ad hoc à votre problème, soit payer pour un service de toute façon.

Comment faites-vous réellement?

Les deux cas, Netlify ou GitHub / GitLab sont très simples et nécessitent un effort minimal. (Néanmoins, nous couvrirons 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 à un LAMP ou Pile MEAN :

Que pouvez-vous faire d'autre avec Jamstack?

J'espère 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 vous pouvez faire avec le Jamstack:

• implémentation d'une base de données sans serveur avec un site statique
• identité en tant que service (IDaaS): authentification sans état
• systèmes de gestion de contenu sans tête
• utilisant des fonctions sans serveur dans des sites statiques
• gestion des formulaires multi-usages
• gestion des 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’adopter ces changements et de les faire nôtres!

Apprendre de nouvelles façons de faire peut être un problème, mais cela peut également 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. ?

Jamstack Foundations

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 les médias sociaux .

Next up:

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

Et bien plus encore en préparation.