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
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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Comment créer et publier mes propres bibliothèques JavaScript?
Mar 18, 2025 pm 03:12 PM
L'article discute de la création, de la publication et du maintien des bibliothèques JavaScript, en se concentrant sur la planification, le développement, les tests, la documentation et les stratégies de promotion.
Comment optimiser le code JavaScript pour les performances dans le navigateur?
Mar 18, 2025 pm 03:14 PM
L'article traite des stratégies pour optimiser les performances JavaScript dans les navigateurs, en nous concentrant sur la réduction du temps d'exécution et la minimisation de l'impact sur la vitesse de chargement de la page.
Que dois-je faire si je rencontre l'impression de code brouillé pour les reçus en papier thermique frontal?
Apr 04, 2025 pm 02:42 PM
Des questions et des solutions fréquemment posées pour l'impression de billets thermiques frontaux pour le développement frontal, l'impression de billets est une exigence commune. Cependant, de nombreux développeurs mettent en œuvre ...
Comment déboguer efficacement le code JavaScript à l'aide d'outils de développeur de navigateur?
Mar 18, 2025 pm 03:16 PM
L'article traite du débogage efficace de JavaScript à l'aide d'outils de développeur de navigateur, de se concentrer sur la définition des points d'arrêt, de l'utilisation de la console et d'analyser les performances.
Comment utiliser les cartes source pour déboguer le code JavaScript minifié?
Mar 18, 2025 pm 03:17 PM
L'article explique comment utiliser les cartes source pour déboguer JavaScript minifiée en le mappant au code d'origine. Il discute de l'activation des cartes source, de la définition de points d'arrêt et de l'utilisation d'outils comme Chrome Devtools et WebPack.
Comment utiliser efficacement le cadre de collections de Java?
Mar 13, 2025 pm 12:28 PM
Cet article explore une utilisation efficace du cadre de collections de Java. Il met l'accent sur le choix des collections appropriées (liste, set, map, file d'attente) en fonction de la structure des données, des besoins en performances et de la sécurité des threads. Optimisation de l'utilisation de la collection grâce à
TypeScript pour les débutants, partie 2: Types de données de base
Mar 19, 2025 am 09:10 AM
Une fois que vous avez maîtrisé le didacticiel TypeScript de niveau d'entrée, vous devriez être en mesure d'écrire votre propre code dans un IDE qui prend en charge TypeScript et de le compiler en JavaScript. Ce tutoriel plongera dans divers types de données dans TypeScript. JavaScript a sept types de données: null, non défini, booléen, numéro, chaîne, symbole (introduit par ES6) et objet. TypeScript définit plus de types sur cette base, et ce tutoriel les couvrira tous en détail. Type de données nuls Comme javascript, null en typeScript
Début avec Chart.js: tarte, beignet et graphiques à bulles
Mar 15, 2025 am 09:19 AM
Ce tutoriel expliquera comment créer des graphiques à tarte, anneaux et bulles à l'aide de chart.js. Auparavant, nous avons appris quatre types de graphiques de graphique. Créer des graphiques à tarte et à anneaux Les graphiques à tarte et les graphiques d'anneaux sont idéaux pour montrer les proportions d'un tout divisé en différentes parties. Par exemple, un graphique à secteurs peut être utilisé pour montrer le pourcentage de lions mâles, de lions féminins et de jeunes lions dans un safari, ou le pourcentage de votes que différents candidats reçoivent lors des élections. Les graphiques à tarte ne conviennent que pour comparer des paramètres ou des ensembles de données uniques. Il convient de noter que le graphique à tarte ne peut pas dessiner des entités avec une valeur nulle car l'angle du ventilateur dans le graphique à tarte dépend de la taille numérique du point de données. Cela signifie toute entité avec une proportion nulle
