Maison >interface Web >js tutoriel >Un composant Edge Side Include modulaire pour le calcul JavaScript
Un composant Edge Side Include modulaire pour le calcul JavaScript
- Mary-Kate Olsenoriginal
- 2024-12-20 03:13:09496parcourir
Au cours de l'été 2022, mon coéquipier Kailan a travaillé sur une caisse Rust pour Fastly Compute, implémentant un sous-ensemble du langage de modélisation Edge Side Include (ESI), et a publié un article de blog sur il. Cet article était important non seulement parce que nous avons publié une bibliothèque utile, mais aussi parce qu'il était une brillante illustration de ce que Compute peut nous apporter : un Edge programmable avec des fonctionnalités modulaires. Et maintenant que JavaScript est généralement disponible sur Compute depuis plus d'un an, il était temps que nous ayons une solution similaire pour nos utilisateurs JavaScript. La bibliothèque ESI de Fastly pour JavaScript, désormais disponible sur npm, vous permet d'ajouter un traitement ESI puissant à votre application.
Programmabilité et modularité
Depuis près d'une décennie, le CDN de Fastly prend en charge Edge Side Include (ESI), un langage de création de modèles qui fonctionne en interprétant des balises spéciales dans votre source HTML. Il tourne autour de la balise
index.html
<body> <esi:include src="./header.html" /> <main> Content </main> </body>
en-tête.html
<header>Welcome to the web site</header>
sortie
<header>Welcome to the web site</header>Content
Lorsque le calcul est entré en scène, le paysage périphérique a changé de deux manières principales : la programmabilité et la modularité.
Peu de temps après que la prise en charge de Rust par notre plate-forme se soit stabilisée, nous avons publié une caisse pour Rust qui implémentait ESI et ajoutait la programmabilité. Vous pouvez désormais configurer, à l'aide de code, comment créer des requêtes backend supplémentaires et comment gérer les fragments de réponse. Vous pouvez même effectuer un traitement ESI sur des documents qui ne proviennent pas du serveur backend. Cette programmabilité le différenciait du support ESI que nous avons dans VCL, qui était limité à l'ensemble fixe de fonctionnalités que nous proposions.
En même temps, cette approche était hautement modulaire, donnant au programmeur le choix d'effectuer ce traitement ESI sur une base par requête, et la possibilité de combiner le traitement avec d'autres modules qui fonctionnent avec des types de données compatibles et d'appliquer les dans n'importe quel ordre et/ou condition logique spécifié.
Cible suivante : JavaScript
Semblable à notre version Rust, nous voulions que cette bibliothèque JavaScript soit programmable. La prise en charge JavaScript de Fastly a toujours adopté l'API Fetch et son API Streams associée. Une fonctionnalité utile de l'API Streams est l'interface TransformStream, qui permet aux données d'être « acheminées » via un objet afin d'appliquer une transformation, parfaite pour l'ESI. En implémentant le processeur ESI en tant qu'implémentation de TransformStream, nous avons pu l'intégrer directement dans une application Fastly Compute écrite en JavaScript.
Voici comment vous pouvez le diffuser :
<body> <esi:include src="./header.html" /> <main> Content </main> </body>
La transformation, que nous appelons EsiTransformStream, est appliquée directement au flux, atténuant ainsi les problèmes de mémoire et de performances. Cela signifie :
- Il n'est pas nécessaire de mettre en mémoire tampon l'intégralité de la réponse en amont avant d'appliquer la transformation.
- Le transformateur consomme la réponse en amont aussi rapidement que possible et traite les balises ESI au fur et à mesure qu'elles apparaissent dans le flux. Lorsque le transformateur termine de traiter chaque balise ESI, les résultats sont publiés immédiatement en aval, ce qui nous permet de conserver le minimum de tampon possible. Cela permet au client de recevoir le premier octet du résultat diffusé dès qu'il est prêt, sans avoir à attendre qu'il soit traité dans son intégralité.
De plus, cette conception est modulaire, ce qui fait d'EsiTransformStream juste un autre outil que vous pouvez utiliser avec d'autres choses. Par exemple, vous pouvez vouloir appliquer d’autres transformations aux réponses, comme la compression, et une réponse peut être acheminée via n’importe quel nombre de ces flux de transformation, puisqu’il s’agit d’une interface entièrement standard. Si vous le souhaitez, vous pouvez même activer ESI de manière conditionnelle pour certaines requêtes ou réponses uniquement, par exemple par en-têtes de requête, chemins ou type de contenu de réponse.
Voici comment instancier EsiTransformStream :
<header>Welcome to the web site</header>
Le constructeur prend une URL et un objet Headers, et prend éventuellement certaines options comme troisième paramètre. Comme décrit précédemment, la principale fonctionnalité d'ESI consiste à télécharger des modèles supplémentaires, à inclure dans le flux résultant. Rencontre avec un
- L'URL est utilisée pour résoudre les chemins relatifs dans le src de
- Les en-têtes sont utilisés lors des requêtes supplémentaires pour récupérer les modèles.
- L'objet de configuration facultatif peut être utilisé pour remplacer le comportement de la récupération effectuée et pour appliquer d'autres comportements personnalisés, tels que la façon de traiter le modèle récupéré et la gestion personnalisée des erreurs.
Dans le cas le plus simple, vous utiliserez uniquement la valeur de récupération de l'objet de configuration. Si vous ne le fournissez pas, il utilise la fonction de récupération globale à la place, mais dans Compute, vous en aurez besoin pour spécifier un backend à utiliser lors de l'inclusion d'un modèle (sauf si vous utilisez la fonctionnalité de backends dynamiques). L'exemple d'extrait ci-dessus attribue le backend nommé origin_0 avant d'appeler la récupération globale.
C'est ça ! Avec cette configuration simple, vous pouvez disposer d'un backend servant les balises ESI et d'une application Compute qui les traite. Voici un exemple complet que vous pouvez exécuter :
Prise en charge des fonctionnalités ESI
Cette implémentation offre plus de fonctionnalités ESI que d'autres que nous avons mises à disposition dans le passé.
Gestion des erreurs
Parfois, un fichier référencé par un
<body> <esi:include src="./header.html" /> <main> Content </main> </body>
Si /templates/header.html provoque une erreur, le processeur ESI ignore silencieusement l'erreur et remplace l'intégralité de
Il est également possible d'utiliser une gestion des erreurs plus structurée en employant un
<header>Welcome to the web site</header>
Le processeur ESI exécute d'abord le contenu de
Il est important de noter que l’intégralité de la procédure
Conditions
ESI permet également une exécution conditionnelle, en effectuant des vérifications d'exécution sur les variables. Voici un exemple d'un tel contrôle :
<header>Welcome to the web site</header>Content
Lorsque le processeur rencontre un message
Le processeur met à disposition un ensemble limité de variables, basées principalement sur les cookies de demande. Dans l'exemple ci-dessus, la valeur d'un cookie HTTP portant le nom « groupe » est vérifiée. Notre implémentation est basée sur la spécification du langage ESI ; référez-vous à lui pour plus de détails.
Liste des balises et fonctionnalités prises en charge
Cette implémentation prend en charge les balises suivantes de la spécification du langage ESI.
- esi:inclure
- esi:commentaire
- esi:supprimer
- esi:essayer / esi:tentative / esi:sauf
- esi:choisir / esi:quand / esi:sinon
- esi:vars
Le
Les variables ESI sont prises en charge dans les attributs des balises ESI et les expressions ESI sont prises en charge dans l'attribut de test de
Un comportement personnalisé signifie des possibilités infinies
Bien que l'ensemble des fonctionnalités soit suffisant pour être enthousiasmé, la partie vraiment excitante de la programmation est qu'encore plus de choses sont possibles. L'intégration de modèles est la principale utilisation d'ESI, mais ce n'est en aucun cas tout ce qu'il peut faire. Voici un exemple.
Considérez que vous avez un horodatage marqué dans votre document que vous souhaitez représenter comme une date relative lorsqu'il est affiché, par exemple « il y a 2 jours ». Il existe de nombreuses façons de procéder, mais pour obtenir les meilleures performances et implications en matière de mémoire, il serait formidable d'effectuer une recherche/remplacement dans les flux. La programmation de cette bibliothèque ESI peut en fait être utilisée comme une bonne option pour ce faire.
Nous pouvons définir des horodatages à encoder dans votre document backend à l'aide d'une balise ESI spécialement conçue dans un format tel que le suivant :
<body> <esi:include src="./header.html" /> <main> Content </main> </body>
Par exemple, cet extrait peut représenter minuit le 1er janvier 2024, heure du Pacifique :
<header>Welcome to the web site</header>
Maintenant, configurez EsiTransformStream pour qu'il serve un document de remplacement synthétique chaque fois qu'il voit ce modèle d'URL :
<header>Welcome to the web site</header>Content
Maintenant, lorsque le processeur rencontre l'exemple d'extrait ci-dessus, il émettra un résultat similaire au suivant (en fonction du nombre de jours dans le futur pendant lequel vous l'exécuterez) :
const transformedBody = resp.body.pipeThrough(esiTransformStream);
return new Response(
transformedBody,
{
status: resp.status,
headers: resp.headers,
},
);
Le document backend pouvant être mis en cache par Fastly, les requêtes futures peuvent bénéficier d'un HIT de cache, tandis que le traitement continuera à afficher l'heure relative mise à jour.
Pour un exemple en direct, consultez le violon suivant :
Faites-en un tour !
@fastly/esi est désormais disponible sur npm, prêt à être ajouté à n'importe quel programme JavaScript. Utilisez-le en périphérie dans vos programmes Fastly Compute, bien sûr, mais en fait, il fonctionne même en dehors de Compute, à condition que votre environnement prenne en charge l'API fetch. Le code source complet est disponible sur GitHub.
Commencez par cloner l'un des Fiddles ci-dessus et testez-les avec vos propres origines, avant même d'avoir créé un compte Fastly. Lorsque vous êtes prêt à publier votre service sur notre réseau mondial, vous pouvez vous inscrire pour un essai gratuit de Compute, puis commencer immédiatement avec la bibliothèque ESI sur npm.
Avec Compute, l'Edge est programmable et modulaire : choisissez et combinez les solutions qui vous conviennent le mieux, ou créez même la vôtre. Nous ne sommes pas les seuls à pouvoir proposer des modules comme celui-ci pour Compute. N’importe qui peut contribuer à l’écosystème et en tirer profit. Et, comme toujours, retrouvez-nous sur le forum de la communauté Fastly et dites-nous ce que vous avez construit !
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!
Articles Liés
Voir plus- Une analyse approfondie du composant de groupe de liste Bootstrap
- Explication détaillée du currying de la fonction JavaScript
- Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
- Angularjs intègre l'interface utilisateur WeChat (weui)
- Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript