Uso de Astro para envolver marcos JavaScript heredados

Astro tiene una serie de integraciones que permiten renderizar frameworks front-end comunes como React, Angular, Vue y Svelte como "islas". Este es un concepto extremadamente poderoso, ya que permite a los desarrolladores utilizar Astro como un marco mientras se conectan los marcos de front-end para manejar la interactividad del lado del cliente más compleja. La ventaja es obvia para la mayoría de los desarrolladores. Sin embargo, lo que no es tan obvio es que la estructura de los componentes Astro también se puede aprovechar para envolver frameworks JavaScript heredados.

A continuación, demostramos dos componentes de contador simples construidos como componentes Astro con interactividad del lado del cliente utilizando AngularJS y KnockoutJS.

¿Por qué hacer esto?

Para un nuevo desarrollo, no querrías tomar este enfoque. Sin embargo, considere un escenario en el que:

• Tienes una aplicación compleja del lado del cliente construida con un framework heredado.
• Nadie en su equipo entiende completamente el código antiguo.
• Hay poco presupuesto disponible para una reescritura completa.
• La aplicación debe migrarse a un nuevo entorno sin grandes modificaciones.

El uso de Astro en un escenario de este tipo puede permitirle envolver e incrustar código heredado sin reconstruir completamente la aplicación.

Estructura de los componentes Astro

Comprender la estructura básica de un componente Astro es clave para que esto sea posible. Los componentes Astro constan de tres posibles secciones:

---
// Server-side code (optional)
---
<markup/>
<script />

Para nuestro ejemplo KnockoutJS, el bloque del lado del servidor está vacío, pero el marcado es HTML estándar que contiene enlaces específicos de Knockout. La sección script se encarga de cargar la librería KnockoutJS y enlazarla a los elementos.

KnockoutCounter.astro

---
---
<divclass="container mx-auto"><divid="knockout-counter-app"class="pb-[50px] md:pb-[60px] lg:pb-[80px] xl:pb-[100px]"><h2class="text-black font-semibold text-[25px] md:text-[30px] lg:text-[32px] xl:text-[36px] leading-[1.2]">Knockout Counter Example</h2><pclass="text-black font-semibold">
      Counter value: <spandata-bind="text: counter"></span></p><p><buttondata-bind="click: increment"class="text-blue-900 underline font-semibold hover:text-[#EF4335]">Increment</button></p><p><buttondata-bind="click: decrement"class="text-blue-900 underline font-semibold hover:text-[#EF4335]">Decrement</button></p></div></div><script>let loadedAndBindKnockout = false;
  const loadAndBindKnockout = () => {
    if (loadedAndBindKnockout) return;
    loadedAndBindKnockout = true;

    const counterApps = document.querySelectorAll("div#knockout-counter-app");
    if (!counterApps || counterApps.length < 1) return;

    console.log("Knockout loading");

    const script = document.createElement("script");
    script.src = "https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-latest.js";
    script.onload = () => {
      const counter = ko.observable(0);
      const increment = () => counter(counter() + 1);
      const decrement = () => counter(counter() - 1);

      ko.applyBindings({ counter, increment, decrement }, document.getElementById("knockout-counter-app"));
      console.log("Knockout loaded");
    };
    document.head.appendChild(script);
  };

  if (document.readyState === "complete" || document.readyState === "interactive") {
    loadAndBindKnockout();
  } else {
    document.onload = () => {
      loadAndBindKnockout();
    };
  }
</script>

Esto renderizará el contador KnockoutJS dentro de tu proyecto Astro. Abajo puedes hacer clic en los enlaces de incremento / decremento para cambiar el valor del contador; controlado por el código knockoutjs.

No mostraremos la implementación completa de AngularJS aquí ya que el concepto es similar a KnockoutJS. Sin embargo, el mismo enfoque se puede utilizar para cargar dinámicamente AngularJS y adjuntarlo a un elemento específico dentro de Astro.

Esto confirma que Astro puede manejar múltiples frameworks JavaScript heredados como islas separadas.

Reflexiones finales

Si te enfrentas al reto de migrar una aplicación cliente heredada a un entorno moderno basado en Astro, esta técnica puede ayudarte a preservar la funcionalidad manteniendo el esfuerzo de migración al mínimo.

⚠️ Precaución:

• Algunos frameworks heredados pueden entrar en conflicto con las técnicas de hidratación de Astro.
• Deben tenerse en cuentaconsideraciones de rendimiento, especialmente si se cargan librerías grandes.
• El aislamiento de scripts es necesario para evitar interferencias entre múltiples frameworks.

Si tu caso de uso implica mantener código antiguo mientras migras a Astro, este enfoque puede proporcionar una solución a corto plazo antes de que sea factible una reescritura completa.

¿Utilizarías esta técnica en tu proyecto? Háznoslo saber en los comentarios.