Un composant Edge Side Include modulaire pour le calcul JavaScript

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 , qui demande au serveur Edge de récupérer un autre document et de l'intégrer dans le flux.

index.html

<include src="./header.html"></include>
<main>
Content
</main>

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 :

<include src="./header.html"></include>
<main>
Content
</main>

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 La balise utilise fetch comme mécanisme sous-jacent pour récupérer un modèle, et l'objectif principal de ces paramètres est de configurer ces appels de récupération :

• L'URL est utilisée pour résoudre les chemins relatifs dans le src de balises.
• 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 :

violon.fastly.dev

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 La balise peut ne pas réussir à être récupérée car elle n'existe pas ou provoque une erreur de serveur. Il est possible d'ignorer l'erreur dans ces cas en ajoutant l'attribut onerror="continue".

<include src="./header.html"></include>
<main>
Content
</main>

Si /templates/header.html provoque une erreur, le processeur ESI ignore silencieusement l'erreur et remplace l'intégralité de tag avec une chaîne vide.

Il est également possible d'utiliser une gestion des erreurs plus structurée en employant un bloc, qui ressemble à ceci :

<header>Welcome to the web site</header>

Le processeur ESI exécute d'abord le contenu de . Si une balise esi:include provoque une erreur, alors le processeur ESI exécute le contenu de .

Il est important de noter que l’intégralité de la procédure est remplacé par l'intégralité du bloc bloquer s'il réussit ou le s'il y a une erreur. Dans l'exemple ci-dessus, si /templates/header.html provoque une erreur, cela empêche également le texte "En-tête principal" d'apparaître dans la sortie ; seul le texte "En-tête alternatif" est inclus. Voir la spécification du langage ESI pour plus de détails.

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 bloc, il traverse le blocs, vérifiant les expressions définies dans leurs attributs de test. Le processeur exécute le premier bloc esi:when où l'expression est évaluée comme vraie. Si aucune des expressions n’est évaluée comme vraie, alors elle exécutera éventuellement le bloc esi: else s’il est fourni. L'ensemble est remplacé par l'intégralité du bloc ou bloc qui s'exécute.

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 La balise est définie dans la spécification comme étant facultative et n'est pas incluse dans cette implémentation.

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 . De plus, le le commentaire est pris en charge.

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 :

<include src="./header.html"></include>
<main>
Content
</main>

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 :

violon.fastly.dev

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!