Introduction au Jamstack: Build Secure et High Performance Sites

Jamstack: construire une architecture moderne pour des sites Web plus rapides, sécurisés et évolutifs

image fournie par: netlify

Ces dernières années, la technologie de développement Web a changé chaque jour qui passe. Cet article présentera l'architecture Jamstack et clarifiera ses concepts et ses avantages.

Dans le passé, l'architecture de lampe a dominé le développement de sites Web dynamiques. Par la suite, l'architecture moyenne a jeté les bases d'une nouvelle génération d'applications Web. Aujourd'hui, avec la montée des API et des composants réutilisables, les sites Web statiques sont redevenus la tendance. C'est une façon de "revenir aux bases", mais pas exactement.

Points de base:

• Jamstack est une architecture de développement Web moderne qui aide à créer des sites Web plus rapides, plus sécurisés et plus évolutifs. Il représente la combinaison de JavaScript (J), d'API (A) et de balisage (M), et son style de travail a inspiré de nombreux développeurs à travers le monde.
• JAMSTACK convertit les sites Web dynamiques en sites Web statiques, ce qui améliore considérablement la vitesse, améliore la sécurité et améliore le référencement. Cela peut être fait en créant des articles et des pages à l'aide de générateurs de sites statiques, de la synchronisation du contenu statique avec le référentiel de code et de l'automatisation des processus de déploiement.
• JAMSTACK utilise CDN pour le déploiement mondial, les pipelines automatisés et les pages pré-rendues pour améliorer la vitesse par rapport au développement traditionnel complet. Il permet également le découplage de la fin frontale et du back-end via des API et des microservices, et utilise une seule pile technologique - JavaScript.

Qu'est-ce que Jamstack?

Jamstack est une architecture qui redéfinit le Web moderne pour créer des sites Web plus rapides et plus sûrs. Ces sites sont mieux évolutifs et sont plus faciles (plus amusants) à développer et à maintenir avec le bon ensemble d'outils. décomposons ce terme:

J signifie javascript.
• Il a grandi depuis que Netscape a lancé JavaScript en 1995. Avec des bibliothèques réactives et progressives, vous pouvez concevoir des applications Web qui se comportent presque la même chose que les applications mobiles.
A signifie API.
• Au lieu d'écrire toutes les fonctionnalités vous-même, vous pouvez compter sur des tiers pour gérer un grand nombre de tâches.
M signifie balisage.
• Vous pouvez réutiliser des composants développés ou créer de nouveaux composants plus faciles à entretenir.
Est-ce juste un battage médiatique?

oui dans une certaine mesure. Le terme «Jamstack» (à l'origine stylisé comme Jamstack) a été inventé par Netlify pour promouvoir sa «plate-forme polyvalente pour l'automatisation des projets Web modernes». Les principes derrière Jamstack ne sont pas entièrement nouveaux, car les composants Web et les API existent depuis un certain temps.

mais très similaire à ce qu'Ajax (asynchrone javascript et xml) a été créé par une autre société, Adaptive Path, cette année - bien que l'API XMLHTTPREQUEST (XHR) qui a rendu Ajax possible existait également pendant un certain temps, AJAX et JAMSTACK IT IT IT IT IS Une amélioration rafraîchissante de la philosophie existante et a un objectif légitime qui a été rapidement adopté par la communauté. Ce battage médiatique est bien mérité: cette façon de travailler a inspiré de nombreux développeurs du monde entier.

site Web statique?

"site Web statique" est l'opposé du "site Web dynamique", non? Alors, comment pouvons-nous fournir des interactions riches et dynamiques en utilisant uniquement des fichiers HTML simples? La réponse est JavaScript.

JavaScript a beaucoup changé depuis la première guerre du navigateur, et avec l'émergence de Node.js et l'émergence de bibliothèques telles que React, Angular et Vue.js, il s'est consolidé comme un statut de langage de programmation universel. Les possibilités de concevoir des interfaces utilisateur avancées (UIS) sont infinies.

Bien sûr, JavaScript n'est pas une panacée. Vous ne les utilisez probablement pas pour l'analyse des données ou l'IA. Mais pour le développement Web, il n'y a pas grand-chose à voir avec l'API que vous ne pouvez pas faire avec les méthodes JavaScript, car il est très probable que quelqu'un ait créé un microservice pour cela.

Et si vous pouvez encapsuler tous ces processus et balisages en composants réutilisables - vous pouvez vous brancher à tout moment où vous avez besoin d'une fonctionnalité spécifique - vous pouvez conserver des heures de travail à chaque fois.

Il s'agit de la pile J · A · M: JavaScript, API, Tags.

Découplage, sans tête, microservice, sans serveur ... désolé, qu'est-ce que c'est?

Tous ce sont des sujets chauds dans le développement Web, ils sont étroitement liés, mais pas exactement les mêmes. Vous entendrez ces termes assez souvent, alors clarifions certains d'entre eux depuis le début.

couplage et découplage et sans tête

couplé fait référence au contenu d'un site Web créé, géré et stocké sur le backend du site Web (où se trouve la base de données, comme le panneau d'administration WordPress). Ce contenu est ensuite extrait du backend et représenté dans le navigateur via une interface frontale (comme un modèle WordPress). Dans une certaine mesure, les applications "couplées" sont des applications traditionnellement "pile complète", et le backend et le frontend sont des aspects différents de la même application. en revanche,

découplage

signifie que le backend et le frontend sont gérés séparément - cela signifie que la base de données et les outils de gestion seront situées sur un serveur, tandis que le frontend sera situé sur un autre serveur . Bien sûr, un support est nécessaire pour connecter les deux, généralement une API. De plus, comme le backend est désormais en fait séparé du frontend, il peut en fait y avoir plusieurs frontendons à différents endroits! (Pensez aux différentes vitrines en utilisant le même moteur, comme Shopify.) En bref, le logiciel

sans tête

n'a pas du tout de couche frontale ou de présentation. Par exemple, un CMS sans tête peut générer du contenu statique et le pousser n'importe où: applications mobiles, appareils IoT, sites Web statiques. Certes, il s'agit également d'une situation de "découplage", mais ici, vous n'avez peut-être même pas besoin d'une API. Pensez à un moteur WordPress qui exporte les publications comme des fichiers HTML statiques pour le service: c'est sans tête. En fait, vous êtes maintenant sur une page générée de cette manière.

monobody (étroitement couplé) et microservices (couplé vaguement)

Autrement dit, monotype peut être défini comme un logiciel construit dans son ensemble. Les exemples peuvent inclure des applications mobiles, la plupart des applications qui peuvent être installées 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 ceux-ci sont étroitement couplés parce qu'ils font partie intégrante de l'application, sans eux, l'application ne fonctionnera pas. En revanche, les composants logiciels couplés à couplage lâche fonctionnent plus comme des plugins qui peuvent être supprimés ou remplacés, et la fonctionnalité peut changer, mais le noyau de l'application peut toujours fonctionner. Ce principe permet une fonctionnalité «d'externalisation» via des API tierces (communément appelées «microservices») - car ils fournissent des fonctionnalités d'accessibilité (redimensionnement de l'image, connexion, stockage) qui ne font pas intrinsèquement intégrale à l'application.

Informatique sans serveur et traditionnel

Authentic, "Serverless" est un peu impropre. Quel que soit le type de travail informatique que vous faites, le serveur sera impliqué. Cependant, la façon dont vous accédez et gérez vos serveurs peut être très 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ù les ressources vous sont attribuées - et d'autres utilisateurs - dans le serveur physique. Les ressources sont limitées et que vous utilisiez 100% des ressources ou non, vous devez les payer comme si vous les utilisiez.

Dans le modèle sans serveur

, de nombreux serveurs sont connectés les uns aux autres, fournissant un énorme pool de ressources. Vous n'extrairez simplement les ressources requises en cas de besoin et faites-les à l'échelle au besoin (de haut en bas). Vous ne pouvez pas vraiment être sûr qu'un serveur physique vous appartient - vous savez juste d'où vient la ressource.

Modèle traditionnel

Modèle sans serveur

Serveur physique avec des ressources limitées Pool de ressources illimité sujette à l'échec (tel que la défaillance du disque dure) Architecture plus fiable *

Évolutivité limitée Évolutivité illimitée Payer tous les frais, y compris les services d'inactivité Payer à l'usage (payer à la demande) simple et facile à utiliser Besoin d'apprendre et de mettre en œuvre ** Veuillez noter que les défaillances du disque dur, du processeur et des puces mémoire se produiront toujours. Mais comme les ressources sont allouées de manière transparente, vous ne remarquerez pas même si le matériel échoue et remplace. Exemple pratique de Jamstack Il y a beaucoup de choses, surtout si vous ne connaissez pas ces concepts. Alors faisons une pause dans la théorie et voyons certaines des applications pratiques de Jamstack dans la vraie vie.

Étude de cas 1: Convertir WordPress en un site Web statique avec 10x Speed ​​

Si statique est le meilleur choix, alors quoi de mieux que de convertir un blog Dynamic WordPress (WP) en blog statique? Ce faisant, nous réduirons la vitesse et la latence de chargement des pages d'au moins un ordre de grandeur, d'améliorer considérablement la sécurité et d'améliorer notre référencement en même temps. En bref, le processus est le suivant:

Créer des articles et des pages à partir de WP en utilisant un générateur de sites statiques (SSG), mais au format statique (texte, marquage, HTML).

1. Synchage du contenu statique avec un référentiel sur github, gitlab ou bitbucket.
2. Automatisez le processus de déploiement afin que chaque fois qu'un référentiel de code change, les modifications seront immédiatement en ligne vers le CDN global.
3. Détendez-vous, profitez de l'hébergement gratuit, ayez un site Web sécurisé et rapide et un déploiement automatique. ?
mais ...

Bien sûr, cela crée de nombreux problèmes:

Que dois-je faire avec le panneau de gestion?

• Que faire de la catégorie et du flux RSS?
• Comment gérer le contenu maintenant?
• Que faire de la section des commentaires et de la newsletter?
À ce stade, vous pouvez dire au revoir au panneau d'administration WP, car à partir de maintenant, vous utiliserez SSG pour générer du contenu. En fait, les SSG comme Jekyll sont spécialement conçus pour créer des blogs, tandis que les SSG comme Gatsby.js ont déjà toutes les fonctionnalités incluses.

Gestion du contenu (comme la modification des publications existantes) est l'endroit où les CM sans tête entre en jeu. Pour des commentaires et des newsletters, utilisez déjà des API externes (comme Disqus et MailChimp)?

Comment l'avez-vous fait? Nous ne pouvons pas couvrir les tenants et aboutissants de SSG et CMS sans tête ici, mais veuillez prêter attention aux suivis de cette série. Nous fournirons un guide étape par étape pour migrer les sites Web WordPress.

Étude de cas 2: hébergement gratuitement des sites Web statiques avec un pipeline automatique

Dans la communauté de Jamstack, vous entendrez souvent "gratuit" - heureusement, ce n'est pas gratuit, car

vous devez toujours nous dire votre numéro de carte de crédit

gratuitement.

En bref, le processus est le suivant: Dans ce cas, nous prendrons notre site Web statique (par exemple, le blog que nous avons migré dans l'étude de cas 1) et le mettrons en ligne:

Configurez le référentiel GitHub, GitLab ou BitBucket.

Déployer sur Netlify, GitLab Pages ou GitHub Pages.

À ce stade, chaque modification du référentiel déclenchera automatiquement un nouveau déploiement (via le webhook) et peut être annulé très gracieusement si quelque chose ne va pas.
Pourquoi les entreprises fournissent-elles ces services gratuitement?

La surcharge de la mise en place de fichiers HTML sur un CDN déployé est petite. N'oubliez pas qu'aucun calcul réel n'est impliqué, aucun rendu PHP n'est impliqué. Sauf si vous hébergez un site Web très populaire qui consomme beaucoup de bande passante, les entreprises ne se soucient pas d'offrir des services d'hébergement. Cela peut leur apporter une bonne publicité.

La société vous enfermera également en offrant beaucoup de cadeaux. Lorsque vous avez besoin de services avancés (vous en aurez besoin si votre entreprise se développe), vous travaillez déjà avec eux. C'est juste - et, à ce moment-là, vous devrez développer une solution temporaire pour résoudre votre problème ou utiliser le service pour une période payante.

Comment l'avez-vous fait?

netlify ou github / gitlab sont à la fois très simples et nécessitent un effort minimal. (Néanmoins, nous allons entrer dans le processus en détail dans l'article suivant.)

Comparaison entre le développement de Jamstack et le développement complet

Voyons comment cette nouvelle approche se compare à la lampe ou à la pile moyenne:

lampe / pile moyenne Jamstack

serveur Web exécutant le site Web Déploiement global vers CDN téléchargement FTP / SSH, redémarrage du serveur Ligne de montage d'automatisation Page de course Présentez la page pour augmenter la vitesse Applications monobodales (comme WordPress) API et microservices (découplage frontal / back-end) pile complète (langues avant et backend) pile technique unique ("javascript partout")

Que pouvez-vous faire d'autre avec Jamstack?

J'espère que vous avez appris les avantages de la création d'un site Web pour le moment. Mais vous pouvez toujours être sceptique quant à la façon d'effectuer les opérations les plus élémentaires sans traitement backend, telles que la connexion de l'utilisateur et la gestion ou le stockage du contenu dynamique sans bases de données relationnelles (RDBM).

Voici quelques autres exemples que vous pouvez faire avec Jamstack:

• Implémentez la base de données sans serveur à l'aide de sites Web statiques
• Identité en tant que service (IDAAS): Authentification sans état
• Système de gestion de contenu sans tête
• en utilisant des fonctions sans serveur dans les sites Web statiques
• Gestion des formes polyvalentes
• Traitement des notifications multiplateformes
• panier sans tête
• Recherche réactive

Conclusion

Le développement des choses est inévitable, en particulier dans le domaine informatique. Auparavant, c'était la pile de lampe, puis la pile moyenne. Maintenant, c'est Jamstack, et dans cinq à dix ans, ce sera autre chose. Il vaut mieux accepter ces modifications et les apporter la nôtre!

Apprendre de nouvelles façons de faire les choses peut sembler lourde, mais elle peut également revigorer votre passion pour le développement. Vous pouvez vous retrouver à passer moins de temps à maintenir des serveurs et à vous soucier des problèmes de sécurité. Vous pouvez constater que le développement nécessite moins d'efforts et que vos clients sont plus satisfaits. Vous pouvez même être plus compétitif (et pouvoir demander une augmentation) à cause de cela. ?

Jamstack Basics

Veuillez suivre plus d'articles sur ce sujet. Bien que nous introduisions Jamstack depuis des années, il est devenu une discipline et une pratique indépendantes. Nous vous fournirons les tutoriels dont vous avez besoin pour devenir un professionnel de Jamstack et le mettre à jour dans l'index de cette page. Vous pouvez également rester à jour avec notre flux RSS ou nos médias sociaux.

Jamstack Basics

• Introduction à Jamstack: construire un site Web sûr et haute performance
• Outils, API et services Jamstack: comparaison complète
• Comment utiliser le pipeline automatique pour héberger gratuitement des sites Web statiques
• comment migrer de WordPress vers le générateur de sites statique

outils Jamstack

• GATSBY Getting: Créez votre premier site Web statique
• débutant d'Eleventy

et plus de travail en cours.

Les questions fréquemment posées sur Jamstack

Qu'est-ce que Jamstack? Jamstack signifie "JavaScript, API et Tags". Il s'agit d'une architecture pour créer des sites Web et des applications Web, qui met l'accent sur le découplage de la frontale de l'arrière-end pour de meilleures performances, sécurité et expérience des développeurs.

En quoi JaESSTACK est-il différent du développement Web traditionnel? Dans le développement Web traditionnel, le serveur est responsable de la génération de HTML dynamiquement dans chaque demande. D'un autre côté, JamStack pré-construction de la page pendant le processus de construction, fournit directement des actifs statiques au client et utilise l'API pour implémenter des fonctions dynamiques.

Quels sont les principes clés de l'architecture Jamstack? Les principaux principes de Jamstack incluent le développement préalable, le développement centré sur l'API et l'utilisation d'un réseau de livraison de contenu global (CDN). Le pré-intention implique la génération de HTML statique pendant la phase de construction, tandis que l'API gère la fonctionnalité dynamique.

Quels sont les avantages de l'utilisation de Jamstack? Jamstack offre de nombreux avantages tels que des performances améliorées en raison de la génération de sites statiques, une sécurité améliorée en réduisant la surface d'attaque du serveur et en simplifié l'évolutivité avec CDN. De plus, cela conduit souvent à une meilleure expérience de développeur.

Puis-je utiliser les fonctionnalités côté serveur dans mon application Jamstack? Oui, les applications JAMSTACK peuvent tirer parti des fonctionnalités côté serveur via des fonctions ou des API sans serveur. Les fonctions sans serveur vous permettent d'exécuter du code côté serveur en réponse aux événements, en fournissant des fonctionnalités dynamiques tout en conservant les avantages de la livraison statique du site.

Jamstack convient-il à tous les types de sites Web? Jamstack convient à une grande variété de sites Web, des simples sites de blogs et de marketing aux applications Web complexes. Cependant, son applicabilité dépend des exigences spécifiques du projet et des exigences pour le traitement côté serveur en temps réel.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!