Suscríbete para recibir notificaciones de nuevas publicaciones:

No tan estático... Presentamos la versión Beta de LA API HTMLRewriter a Cloudflare Workers

30/09/2019

4 min de lectura

Hoy nos complace anunciar la versión beta de HTMLRewriter, un analizador HTML de transmisión con una API JavaScript basada en selector fácil de usar para la manipulación DOM, disponible en el tiempo de ejecución de Cloudflare Workers.

Para aquellos de ustedes que no están familiarizados, Cloudflare Workers es una plataforma ligera sin servidor que permite a los desarrolladores aprovechar la red de Cloudflare para aumentar las aplicaciones existentes o crear otras completamente nuevas sin configurar ni mantener la infraestructura.

Sitios estáticos para aplicaciones dinámicas

El viernes anunciamos Workers Sites: un flujo de trabajo de implementación de sitios estáticos integrado en la herramienta Wrangler CLI. Ahora, junto con la API HTML Rewriter, puede realizar transformaciones DOM encima de su HTML estático, justo en el acceso de Cloudflare.

Anteriormente, podría hacer esto ingresando todo el cuerpo de la respuesta en el Worker, sin embargo, ese método era propenso a presentar algunos problemas.  En primer lugar, el análisis de un archivo grande estaba enlazado a los límites de memoria o CPU. Además, afectaría tu TTFB ya que el cuerpo no podría transmitirse, y el navegador no podría realizar ningún análisis especulativo para cargar activos posteriores.

HTMLRewriter fue la pieza que faltaba para tener tu aplicación completamente en vivo, de principio a fin. Puedes crear tu API en Cloudflare Workers como una función sin servidor, tener los elementos estáticos de tu frontend alojados en Workers Sites y vincularlos dinámicamente mediante la API HTMLRewriter.

Conociendo a JAMStack

Podrías estar pensando "¡espera!", JavaScript, API sin servidor... esto está empezando a sonar un poco familiar. También nos sonaba familiar a nosotros.

¿Esto es JAMStack?

En primer lugar, vamos a responder a la pregunta, ¿qué es JAMStack? JAMStack es un término acuñado por Mathias Biilmann, que significa JavaScript, API y marcado. Las aplicaciones JAMStack están diseñadas para ser muy fáciles de escalar, ya que se basan en la implementación simplificada de sitios estáticos. También están destinados a simplificar el flujo de trabajo de desarrollo web, especialmente para los desarrolladores frontend, al llevar la manipulación de datos y la representación que tradicionalmente ocurría en el back-end al front-end e interactuar con el back-end solo a través de llamadas API.

Así que hasta ese punto, sí, esto es JAMStack. Sin embargo, HTMLRewriter lleva esta idea un paso más allá.

El acceso: No es cliente del todo, no es un servidor del todo

La mayoría de las aplicaciones JAMStack se basan en llamadas del lado del cliente a API de terceros, donde la representación se puede manejar del lado del cliente usando JavaScript, lo que permite a los desarrolladores front-end trabajar con cadenas de herramientas e idiomas con los que ya están familiarizados.  Sin embargo, esto significa que con cada carga de página, el cliente debe ir al origen, esperar HTML y JS, y, luego, después de ser analizado y cargado, realizar múltiples llamadas a las API.  Además, todo esto sucede en dispositivos del lado del cliente que son inevitablemente máquinas menos potentes que los servidores y tienen conexiones de última milla potencialmente inestables.

Con HTMLRewriter en Workers, puedes realizar esas llamadas API desde el acceso, donde las fallas son significativamente menos probables que en las conexiones de dispositivos del cliente, y los resultados a menudo se pueden almacenar en caché.  Mejor aún, puedes escribir las propias API en Workers y puedes incorporar los resultados directamente en el HTML, todo en la misma máquina de acceso potente. El uso de estas máquinas para realizar "renderizado del lado del acceso" con HTMLRewriter siempre ocurre lo más cerca posible de tus usuarios finales, sin que ocurra en el dispositivo mismo, y elimina la latencia de viajar hasta el origen.

¿Cómo luce la API HTMLRewriter?

La clase HTMLRewriter es una experiencia similar a jQuery directamente dentro de su aplicación Workers, que permite a los desarrolladores crear aplicaciones profundamente funcionales, apoyándose en una potente API JavaScript para analizar y transformar HTML.

A continuación se muestra un ejemplo de cómo puedes utilizar HTMLRewriter para reescribir vínculos en una página web de HTTP a 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);
}

En el ejemplo anterior, creamos una nueva instancia de HTMLRewriter y usamos el selector para encontrar todas las instancias de los elementos a e img, y llamamos a la función rewriteURL en las propiedades href y src respectivamente.

Tutorial de internacionalización y localización: Si deseas llevar las cosas más allá, tenemos un tutorial completo sobre cómo hacer que tu aplicación i18n sea amigable con HTMLRewriter.

Cómo empezar

Si ya estás utilizando Cloudflare Workers, simplemente puedes comenzar con HTMLRewriter consultando nuestra documentación (¡no es necesario registrarse ni hacer nada más!).  Si eres nuevo en Cloudflare Workers, te recomendamos que comiences registrándote aquí.

Si estás interesado en los detalles esenciales y detallados de cómo funciona HTMLRewriter, y quieres aprender más de lo que siempre quisiste saber sobre el análisis del DOM, mantente atento.  Estamos encantados de compartir los detalles contigo en una publicación futura.

Una última cosa, no estás limitado a los sitios de Workers solamente. Dado que Cloudflare Workers se puede implementar como proxy frente a cualquier aplicación, puedes usar HTMLRewriter como una forma elegante de aumentar tu sitio existente y agregar fácilmente elementos dinámicos, independientemente del backend.

¡Nos encanta saber de ti!

¡Siempre estamos iterando y trabajando para mejorar nuestro producto en función de los comentarios de los clientes!  Por favor, ayúdanos completando nuestra encuesta sobre tu experiencia.


¿Ha creado algo interesante con Workers? ¡Cuéntanos, @CloudflareDev !

Protegemos redes corporativas completas, ayudamos a los clientes a desarrollar aplicaciones web de forma eficiente, aceleramos cualquier sitio o aplicación web, prevenimos contra los ataques DDoS, mantenemos a raya a los hackers, y podemos ayudarte en tu recorrido hacia la seguridad Zero Trust.

Visita 1.1.1.1 desde cualquier dispositivo para empezar a usar nuestra aplicación gratuita y beneficiarte de una navegación más rápida y segura.

Para saber más sobre nuestra misión para ayudar a mejorar Internet, empieza aquí. Si estás buscando un nuevo rumbo profesional, consulta nuestras ofertas de empleo.
EspañolWorkers Sites (ES)Cloudflare Workers (ES)JavaScript (ES)

Síguenos en X

Rita Kozlov|@ritakozlov_
Cloudflare|@cloudflare

Publicaciones relacionadas

22 de mayo de 2024, 13:00

AI Gateway, interfaz unificada para gestionar y escalar tus cargas de trabajo de IA generativa, ya disponible de forma general

AI Gateway es una plataforma de operaciones de IA que mejora la velocidad, la fiabilidad y la observabilidad de tus aplicaciones de IA. Con una sola línea de código, puedes acceder a funciones eficaces como la limitación de velocidad, el almacenamiento en caché personalizado, los registros...

22 de mayo de 2024, 13:00

تحسين مرونة تكوين الخدمات الإقليمية للعملاء

يسعدنا اليوم أن نعلن عن إمكانيات موسّعة تسمح لك بإعداد الخدمات الإقليمية وتكوينها لمجموعة أكبر من المناطق المُحدّدة مسبقًا، وذلك لمساعدتك على تلبية متطلباتك الخاصة بالتحكم في مكان معالجة حركة البيانات الخاصة بك ...

22 de mayo de 2024, 13:00

AI Gatewayの一般提供を開始:生成AIワークロードの管理とスケーリングのための統合インターフェース

AI Gatewayは、AIアプリに速度、信頼性、可観測性を提供するAI運用プラットフォームです。ごくわずかなコードで、レート制限、カスタムキャッシング、リアルタイムログ、複数のプロバイダにわたる集約分析などの強力な機能が利用できるようになります...