Aujourd'hui, nous avons le plaisir de vous annoncer HTMLRewriter beta, un analyseur HTML en streaming avec un sélecteur facile à utiliser JavaScript API pour la manipulation DOM, disponible dans le temps d'exécution Cloudflare Workers.
Pour ceux d'entre vous qui ne connaissent pas Cloudflare Workers, il s'agit d'une plate-forme serverless légère qui permet aux développeurs d'utiliser le réseau Cloudflare pour augmenter leurs applications existantes ou en créer de toutes nouvelles sans configurer ou entretenir leur infrastructure.
De sites statiques à des applications dynamiques
Vendredi, nous avons annoncé Workers Sites : un workflow statique de déploiement de sites intégré dans l'outil Wrangler CLI. Désormais, avec l'API HTML Rewriter, vous pouvez effectuer des transformations DOM sur votre HTML statique, directement depuis la périphérie de Cloudflare.
Auparavant, il était possible de le faire en intégrant l'intégralité du corps de la réponse dans le Worker, mais cette méthode avait tendance à engendrer quelques problèmes. Tout d'abord, l'analyse d'un fichier volumineux devait obligatoirement pouvoir être exécutée dans les limites de la mémoire ou du processeur. De plus, cela avait un impact sur votre TTFB car le corps de la réponse ne pouvait plus être acheminé en streaming, et le navigateur ne pouvait plus effectuer d'analyse spéculative pour charger les ressources subséquentes.
HTMLRewriter était la pièce manquante permettant à votre application de fonctionner pleinement en périphérie. Vous pouvez bâtir votre API sur Cloudflare Workers en tant que fonction serverless, héberger les éléments statiques de votre front-end sur Workers Sites et les lier dynamiquement entre eux en utilisant l'API HTMLRewriter.
Entrez dans JAMStack
Vous êtes peut-être en train de vous dire que JavaScript et API serverless vous rappellent quelque chose... Nous aussi.
I've ported https://t.co/2bfz7ph4Ex to @Cloudflare Workers Sites and Zola! https://t.co/wqlZCy83Ze
— steveklabnik (@steveklabnik) September 27, 2019
Est-ce JAMStack ?
Tout d'abord, expliquons ce qu’est JAMStack JAMStack est un terme inventé par Mathias Biilmann, qui signifie JavaScript, API et Markup. Les applications JAMStack sont conçues pour être très faciles à scaler puisqu'elles reposent sur un déploiement statique et simplifié du site. Elles visent également à simplifier le flux de travail lors du développement Web, en particulier pour les développeurs front-end, en permettant une manipulation et un rendu des données qui se faisaient traditionnellement du back-end vers le front-end, et une interaction avec le back-end uniquement via les appels d’API.
Donc, dans cette mesure, oui, c'est JAMStack. Cependant, HTMLRewriter va encore plus loin dans cette idée.
La périphérie : Pas tout à fait client, pas tout à fait serveur
La plupart des applications JAMStack dépendent d'appels côté client vers des API tierces, où le rendu peut être géré côté client en utilisant JavaScript, permettant aux développeurs front-end de travailler avec les chaînes de compilation et les langages qu'ils connaissent déjà. Cependant, cela signifie qu'à chaque chargement de page, le client doit aller à l'origine, attendre HTML et JS, puis après avoir été analysé et chargé, appeler les API à plusieurs reprises. De plus, tout cela a lieu sur des appareils côté client qui sont nécessairement des machines moins puissantes que les serveurs et dont les derniers kilomètres des connexions sont potentiellement incertains.
Avec HTMLRewriter dans Workers, vous pouvez effectuer ces appels d'API depuis la périphérie, où les risques d'échec sont bien moindres que sur les connexions de périphériques client, et les résultats peuvent souvent être mis en cache. Mieux encore, vous pouvez écrire les API elles-mêmes dans Workers et intégrer les résultats directement dans le HTML, le tout sur la même machine puissante en périphérie. L'utilisation de ces machines pour effectuer un « rendu côté périphérie » avec HTMLRewriter a toujours lieu aussi près que possible de vos utilisateurs finaux, sans avoir lieu sur l'appareil lui-même, et cela élimine la latence du chemin jusqu'à l'origine.
À quoi ressemble l'API HTMLRewriter ?
La classe HTMLRewriter est une expérience de type jQuery directement à l'intérieur de votre application Workers, permettant aux développeurs de créer des applications extrêmement fonctionnelles, s'appuyant sur une puissante API JavaScript pour analyser et transformer le HTML.
Vous trouverez ci-dessous un exemple d'utilisation de HTMLRewriter pour réécrire les liens d'une page Web de HTTP à HTTPS.
const REWRITER = new HTMLRewriter()
.on('a.avatar', { element: e => rewriteUrl(e, 'href') })
.on('img', { element: e => rewriteUrl(e, 'src') });
async function handleRequest(req) {
const res = await fetch(req);
return REWRITER.transform(res);
}Dans l'exemple ci-dessus, nous créons une nouvelle instance de HTMLRewriter, et utilisons le sélecteur pour trouver toutes les instances des éléments a et img, et appelons la fonction rewriteURL sur les propriétés href et src respectivement.
Tutoriel d'internationalisation et de localisation : Si vous souhaitez aller plus loin, nous mettons à votre disposition un tutoriel complet sur la façon de rendre votre application i18n conviviale avec HTMLRewriter.
Commencer
Si vous utilisez déjà Cloudflare Workers, vous pouvez simplement commencer à utiliser HTMLRewriter en consultant notre documentation (pas besoin de vous inscrire ou quoi que ce soit !). Si vous débutez avec Cloudflare Workers, nous vous recommandons de commencer par vous inscrire ici.
Si vous souhaitez en savoir plus sur le fonctionnement précis de HTMLRewriter, et apprendre tout ce que vous avez toujours voulu savoir sur l'analyse de DOM, vous allez être servi(e). Nous aurons le plaisir de vous en dire plus à ce sujet dans un prochain article.
Dernière chose : vous n'êtes pas limité(e) uniquement à Workers Sites. Puisqu'il est possible de déployer Cloudflare Workers comme proxy face à n'importe quelle application, vous pouvez utiliser HTMLRewriter comme un moyen ingénieux d'améliorer votre site existant, et ajouter facilement des éléments dynamiques, indépendamment du back-end.
Votre avis nous est très précieux !
Nous travaillons sans cesse à l'amélioration de nos produits en nous basant sur les commentaires de nos clients ! Aidez-nous en répondant à notre sondage au sujet de votre expérience.
Avez-vous créé quelque chose d'intéressant avec Workers ? Dites-le nous@CloudflareDev !