Usando o Astro para envolver frameworks JavaScript legados

O Astro tem uma série de integrações que permitem renderizar frameworks de front-end comuns, como React, Angular, Vue e Svelte como "ilhas". Esse é um conceito extremamente poderoso, pois permite que os desenvolvedores usem o Astro como um framework enquanto conectam frameworks de front-end para lidar com interatividade mais complexa do lado do cliente. O benefício aqui é óbvio para a maioria dos programadores. No entanto, o que não é tão óbvio é que a estrutura dos componentes do Astro também pode ser aproveitada para envolver frameworks JavaScript legados.

Abaixo, demonstramos dois componentes de contador simples construídos como componentes Astro com interatividade do lado do cliente usando AngularJS e KnockoutJS legados.

Por que você faria isso?

Para novos desenvolvimentos, você não gostaria de adotar essa abordagem. No entanto, considere um cenário em que:

• Você tem um aplicativo complexo do lado do cliente criado com uma estrutura herdada.
• Ninguém na sua equipa compreende totalmente o código antigo.
• Há pouco orçamento disponível para uma reescrita completa.
• A aplicação tem de ser migrada para um novo ambiente sem grandes modificações.

A utilização do Astro neste cenário pode permitir-lhe envolver e incorporar código antigo sem reconstruir completamente a aplicação.

Estrutura de componentes do Astro

Compreender a estrutura básica de um componente Astro é fundamental para tornar isto possível. Os componentes Astro consistem em três secções possíveis:

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

Para o nosso exemplo do KnockoutJS, o bloco do lado do servidor está vazio, mas a marcação é HTML padrão contendo ligações específicas do Knockout. A seção de script lida com o carregamento da biblioteca KnockoutJS e a vincula aos 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>

Isso renderizará o contador KnockoutJS dentro do seu projeto Astro. Abaixo, você pode clicar nos links de incremento / decremento para alterar o valor da contagem; controlado pelo código knockoutjs.

Não vamos mostrar a implementação completa do AngularJS aqui, pois o conceito é semelhante ao do KnockoutJS. No entanto, a mesma abordagem pode ser usada para carregar dinamicamente o AngularJS e anexá-lo a um elemento específico dentro do Astro.

Isso confirma que o Astro pode lidar com vários frameworks JavaScript legados como ilhas separadas.

Considerações finais

Se você se depara com o desafio de migrar uma aplicação legada do lado do cliente para um ambiente moderno baseado no Astro, essa técnica pode ajudá-lo a preservar a funcionalidade, mantendo o esforço de migração mínimo.

⚠️ Cuidado:

• Alguns frameworks legados podem entrar em conflito com as técnicas de hidratação do Astro.
• As considerações de desempenho devem ser levadas em conta, especialmente ao carregar grandes bibliotecas.
• O isolamento de scripts é necessário para evitar interferência entre vários frameworks.

Se o seu caso de uso envolve a manutenção de código antigo enquanto migra para o Astro, essa abordagem pode fornecer uma solução de curto prazo antes que uma reescrita completa seja viável.

Você usaria essa técnica no seu projeto? Deixe-nos saber nos comentários abaixo!