Faça a implantação no edge sem esforço com Azion Bundler e os Polyfills do Node.js

Como desenvolvedores, estamos familiarizados com o mundo acelerado e em constante mudança dos frameworks web. Às vezes, pode parecer uma situação desafiadora, pois se destacar no uso de um framework específico requer um entendimento mais profundo que vai além de apenas conhecer a linguagem de programação. Um dos obstáculos significativos é configurar o projeto para funcionar perfeitamente em diferentes ambientes.

Questões como “Isso vai funcionar na nuvem?” e “Em qual plataforma deve ser executado?” surgem frequentemente. Mas e se você pudesse implantar seu projeto no edge, aproveitando a baixa latência, segurança e disponibilidade sem se preocupar com o ambiente específico? Este post explora o conceito de adaptar projetos para serem executados no edge e apresenta uma solução que simplifica o processo.

Adaptando Projetos para Execução no edge

Para garantir uma implantação contínua, um projeto deve ser estruturado de maneira a evitar atritos com a plataforma hospedeira. Não é incomum encontrar situações em que as configurações necessárias para executar um aplicativo em uma plataforma se parecem muito pouco com as necessárias para uma plataforma diferente. Isso pode levar a um vendor lock-in, onde a troca de hosts se torna cara em termos de tempo e dinheiro, forçando os clientes a continuar com o provedor de serviços atual.

Na Azion, valorizamos o poder do software de código aberto e temos como objetivo capacitar o desenvolvimento web moderno. Nossa plataforma permite a inicialização e implantação de projetos em vários frameworks web, incluindo:

• Next.js
• React
• Vue
• Astro
• Angular
• Hexo
• Vite
• JavaScript em si

A Azion fornece seu próprio Edge Runtime projetado para fornecer uma experiência ideal para executar aplicativos no edge. Este runtime alimenta o Azion Edge Functions e abre um mundo de possibilidades para desenvolvedores e empresas. Além disso, desenvolvemos o Azion Bundler para preencher as lacunas e permitir que os frameworks web sejam executados nativamente no edge. O Azion Bundler é acionado através da Azion CLI e simplifica a integração de polyfills para Edge Computing, revolucionando o processo de criação de workers, especialmente para a plataforma da Azion.

Polyfills são trechos de código usados no JavaScript para fornecer funcionalidades modernas aos ambientes que não oferecem suporte nativo. Os polyfills preenchem as lacunas, garantindo um comportamento consistente entre diferentes navegadores. Por exemplo, vamos considerar um runtime que não oferece suporte a uma API específica do Node.js, na qual um projeto depende. Durante o processo de build, o Azion Bundler reconhece a assinatura dessa API e a substitui por uma API relativa, eliminando a necessidade de adaptação manual do projeto.

O Azion Bundler se destaca na criação de um protocolo intuitivo e simplificado para a criação de presets. É uma ferramenta de código aberto sob a licença MIT e incentiva contribuições da comunidade. Este recurso aprimora a personalização e permite que os desenvolvedores adaptem seus aplicativos aos requisitos exclusivos do projeto, fornecendo a flexibilidade necessária para otimizá-los de maneira eficaz.

Configurando um projeto

A Azion CLI é uma ferramenta excepcional que melhora muito a experiência do desenvolvedor. Com a CLI instalada em seu ambiente, inicializar um projeto é tão simples quanto executar o seguinte comando:

azion init

Este comando inicia um processo interativo no qual você pode escolher o template desejado..

Depois de selecionar o template, cada framework apresentará um conjunto específico de etapas. Escolha executar o projeto localmente e instale as dependências necessárias.

Utilizando Polyfills

O Azion Bundler torna possível o uso de polyfills. Vamos dar uma olhada mais de perto em como configurar um projeto para utilizar esse recurso.

Exemplo: supondo que você queira iniciar um projeto JavaScript que utiliza a API Buffer do Node.js. Para conseguir isso, você precisa informar ao Azion Bundler que o projeto implementa polyfills.

O Azion Bundler lê um arquivo de configuração chamado bundler.config.js. Crie este arquivo e inclua as seguintes propriedades:

module.exports = {
  entry: 'main.js',
  builder: 'webpack',
  useNodePolyfills: true,
};

• entry: representa o ponto de entrada principal do seu aplicativo, onde o processo de build começa. Não é aplicável para soluções Jamstack.
• builder: define a ferramenta de build a ser usada, esbuild ou webpack.
• useNodePolyfills: especifica se os polyfills do Node.js devem ser aplicados.

Depois de aplicar essas configurações, você pode importar as APIs necessárias para o seu projeto. Por exemplo, vamos considerar a importação do Buffer de Node.js:

Dentro de main.js:

// Import the Buffer class from the 'buffer' module in Node.js
import { Buffer } from 'node:buffer';

// Define a function named 'myWorker' that takes an event as an argument
export default function myWorker(event) {
  // Create a new Buffer instance 'buf1' from the string "x"
  var buf1 = Buffer.from("x");
  // Create a new Buffer instance 'buf2' from the string "x"
  var buf2 = Buffer.from("x");
  // Compare 'buf1' and 'buf2' using Buffer.compare method
  // This method returns a number indicating whether 'buf1' is equal to 'buf2'
  var a = Buffer.compare(buf1, buf2);

  // In this case, it'll return 0, because they're equal
  console.log(a);

  // Now, let's swap the values of 'buf1' and 'buf2'
  buf1 = Buffer.from("y");
  buf2 = Buffer.from("x");
  // Compare 'buf1' and 'buf2' again
  a = Buffer.compare(buf1, buf2);

  // Here it returns 1
  console.log(a);

  // The function returns a new Response object with the string "Testing buffer polyfills"
  return new Response("Testing polyfills");
}

Para executar o projeto localmente, use o seguinte comando:

azion dev

Agora você pode acessar o projeto localmente.

Nota: certifique-se de estar no diretório raiz do seu projeto para que os comandos sejam executados corretamente.

O comando azion dev inicializa o processo de build, que é gerenciado de maneira transparente pelo Azion Bundler e retorna a porta para acessar o projeto.

O projeto de exemplo usado neste exemplo pode ser encontrado no repositório Azion Samples no GitHub.

Edge Runtime, Azion Bundler e Azion CLI

Processo explicado

1. O usuário inicia o processo executando azion init via Azion CLI e seleciona o template desejado.
2. A Azion CLI, então, invoca o Azion Bundler, que se encarrega de inicializar o projeto.
3. Azion Bundler devolve o projeto inicializado ao usuário, que decide se implanta o projeto ou o executa localmente.
4. Se o usuário optar por executar o projeto localmente, Azion Bundler dispara o processo de build e gera o worker.
5. Se o usuário decidir implantar o projeto, ele executa o comando azion deploy. Esse comando inicia o processo de build novamente, após o qual Azion CLI cria uma edge application e a implanta na rede distribuída da Azion.
6. Após a implantação bem-sucedida, a Azion CLI fornece o domínio da aplicação. Depois de um breve período de espera, a aplicação se torna acessível.

Responsabilidades

Azion CLI: a interface de linha de comando que serve como principal ponto de interação entre o usuário e o sistema. Gerencia todo o processo de implantação da aplicação, garantindo um fluxo de trabalho eficiente.

Azion Bundler: o motor que impulsiona a inicialização do projeto, build e sua adaptação. Adequa inteligentemente o projeto com base no template selecionado, garantindo que a aplicação esteja otimamente configurado para o uso pretendido.

Azion Edge Runtime: o ambiente de execução que hospeda a aplicação e gerencia sua execução. A Edge Application é distribuída através da rede global de Edge Nodes, garantindo que ela esteja sempre perto dos usuários, maximizando assim velocidade e eficiência.

Ao utilizar a plataforma da Azion, os desenvolvedores podem desfrutar de uma melhor experiência de implantação de frameworks web no edge. Adapte seus projetos para serem executados de maneira contínua enquanto se concentra na funcionalidade principal, em vez de se preocupar com o ambiente específico. Com o Edge Runtime da Azion e a ferramenta Azion Bundler, os desenvolvedores ganham o poder de otimizar seus aplicativos de maneira eficaz, aproveitando a baixa latência, segurança e disponibilidade no edge.