Astro.js vs. Qwik

No último ano temos visto cada vez mais frameworks frontend, a ponto de ficar difícil saber qual será a melhor opção, já que a tecnologia está em constante atualização. No entanto, existem dois que se destacam na multidão: Astro.js e Qwik.

Por que destacar esses dois frameworks?

O motivo é muito simples: tanto o Astro.js quanto o Qwik inovam no uso do JavaScript. Ambos tentam minimizar o uso dele para obter um melhor desempenho de nosso aplicativo.

Astro.js

Conforme mencionado no parágrafo anterior, o Astro.js é um framework JavaScript voltado para a construção de páginas estáticas. O Astro funciona criando ilhas (islands) para que apenas o JavaScript necessário seja usado para um desempenho ultrarrápido.

Hoje, os criadores do Astro.js pegaram as melhores ferramentas do React e as reuniram em um só lugar para tornar o software mais fácil de usar. Alguns serão mencionados abaixo:

• Trabalhe com seu próprio framework: Você pode criar seu próprio site usando React, Vue ou componentes típicos de HTML e JavaScript.
  
• Full HTML estático, sem o uso de JavaScript: O Astro.js renderiza a página inteira com HTML estático, eliminando o JavaScript.
  
• Insere JavaScript: O Astro.js pode inserir tal programa automaticamente nos componentes que devem usá-lo, assim que a página for carregada. Ou seja, o JavaScript do seu formulário de contato só será carregado quando você entrar nesta parte do seu site.
  
• Suporte total e compatibilidade: O Astro oferece compatibilidade com a maioria das ferramentas e tecnologias que usamos hoje. Você quer trabalhar com Typescript? Você consegue! Você deseja usar uma estrutura ou biblioteca CSS como Tailwind ou SASS? É totalmente válido!

Não menos importante, Astro.js também incorpora elementos de Search Engine Optimization (SEO).

Qwik: O que é e cómo funciona?

É um framework web construído em TypeScript, especializado na criação de sites rápidos e fáceis de desenvolver. Foi lançado em julho de 2019 e desde então ganhou popularidade graças ao seu foco na construção de sites modulares e reutilizáveis, usando uma arquitetura baseada em componentes.

Como o Astro, o Qwik cuida da renderização de páginas HTML estáticas usando o mínimo possível de JavaScript. Isso remove/atrasa a inserção do JavaScript onde não precisamos dele (por exemplo, quando a execução do JavaScript é atrasada, o aplicativo começa a baixar o código).

A razão pela qual o Qwik pode fazer isso é por causa da otimização que ele usa, que é baseada em Rust e dedicada a transformar o código em tempo de compilação.

O Qwik também possui uma variedade de ferramentas e recursos integrados, como um sistema de modelo HTML, suporte para componentes da Web e manipulação de rotas. Como o Astro, o Qwik tem uma curva de aprendizado relativamente baixa, tornando-o acessível a todos os desenvolvedores, independentemente de sua experiência. Ao contrário do Astro.js, no entanto, o Qwik foi projetado especificamente para funcionar com o TypeScript.

Com base no que já foi dito, vamos conhecer melhor esses idiomas através de um pouco de prática.

Astro.js

Seguindo a documentação do Astro em seu web oficial e, como é normal em frameworks baseados em React, temos várias formas de criar um projeto: com NPM ou Yarn.

1) Execute o comando para criar o projeto:

2) Aparecerá uma pergunta especificando se queremos instalar os pacotes recomendados. Para os propósitos desta pequena prática, diremos que sim.

3) Em seguida, ele nos pedirá o nome do nosso projeto:

4) Como você deseja iniciar o novo projeto?: Nesse caso, ele permite que você escolha se deseja trabalhar com arquivos de amostra, usando um template de blog ou simplesmente vazio. Nesse caso, selecione a primeira opção, arquivos de amostra:

5) Instalar dependências? Para este exemplo, é necessário fazê-lo. É importante observar que, no momento da instalação, pode demorar.

6) Você planeja escrever o código com Typescript? Se a resposta for sim, o próximo passo será: que nível estrito você deseja usar?

7) A última etapa: o software pergunta se você deseja inicializar o projeto com o Git.

Terminados os 7 passos anteriores, estamos prontos para executar o comando que nos levará ao novo universo: npm run dev.

Em nosso localhost encontraremos a seguinte interface, uma vez executado o npm run:

A estrutura do arquivo gerado pelo Astro é a seguinte:

Na pasta src é onde estarão os cocriados, ou seja, a estrutura sugerida pelo Astro.

A pasta components exibirá os componentes que o aplicativo terá. Para o exercício que estamos fazendo, existe o componente card, que é observado quando o aplicativo é executado.

Abaixo está uma imagem do componente card. Como conseguimos detalhar, os estilos estão no mesmo elemento, algo um pouco parecido com o Vue.

Prosseguindo com o arquivo de layout, conseguimos encontrar um componente semelhante ao index do aplicativo e, como no componente card, encontramos os estilos dentro dele.

Finalmente, há a pasta de pages. Dentro dele está o index do conteúdo dinâmico, que pode ser exibido da seguinte forma:

Isso finalmente seria o Astro.js em uma versão básica de seu modelo. Esperamos que até aqui você tenha curiosidade, experimente e crie seus apps (se quiser, pode nos marcar). Agora, vamos passar para o Qwik e aprender um pouco mais sobre essa linguagem. Vamos começar!

Qwik

1) Execute o npm create:

2) É importante observar que tanto o Qwik quanto o Astro.js têm etapas muito semelhantes. Portanto, algumas das etapas abaixo serão semelhantes:

a) Nomeie o aplicativo e selecione em que sentido ou como queremos iniciar o projeto.

b) O programa perguntará sobre a instalação das dependências do NPM e sobre como iniciar o projeto no Git. No caso de responder positivamente a essas perguntas, é importante mencionar que devemos nos certificar se as dependências foram instaladas pelo programa. Caso contrário, eles terão que ser instalados manualmente.

c) No momento de instalar as dependências, você terá o primeiro projeto Qwik criado. Nesse sentido, o projeto pode ser observado um pouco mais a fundo.

Depois de executar o processo acima, o console mostra os seguintes processos. Conforme mencionado acima, para instalar as dependências, você pode executar o comando npm install.

Então, o comando npm start pode ser executado.

É importante observar que o aplicativo será executado na porta 5173. Para este exemplo, a aparência da página na primeira execução é a seguinte:

Dito isso, em outra seção poderemos detalhar como o código e a estrutura do projeto são apresentados:

Como você pode ver, a estrutura é bastante definida, e uma diferença que se destaca do Astro.js é que o Qwik introduz o roteamento de aplicativos.

A imagem a seguir mostra a aparência do root e a pasta components do projeto concluído:

Por último, mas não menos importante, a pasta router:

Considerando o que já foi mencionado em outras ocasiões e com base na experiência, é importante destacar que, neste artigo, não poderemos detalhar o código em profundidade, pois o artigo seria mais longo. No entanto, e a título de curiosidade para os mais intrépidos, vai ficar uma imagem sobre como poderão ser o index.tsx do routes:

Depois de apresentar e entender um pouco sobre os frameworks, vamos detalhar as semelhanças e diferenças entre essas duas linguagens.

Simelhanças e Diferenças entre AstroJS e Qwik

Semelhanças

• Eles são projetados para criar sites altamente otimizados e escaláveis, usando tecnologias modernas, como componentes da Web, TypeScript e JavaScript.
  
• Ambas as linguagens possuem ferramentas integradas para simplificar o processo de desenvolvimento, como tratamento de caminho, pré-renderização de conteúdo e um sistema de modelo HTML.
  
• Astro.js e Qwik têm uma curva de aprendizado relativamente fácil, tornando-os acessíveis aos desenvolvedores independentemente de sua experiência.
  
• Eles usam uma abordagem baseada em componentes para construir sites. Isso significa que os desenvolvedores podem criar componentes da Web e usá-los em diferentes partes do site para economizar tempo e esforço. Essa arquitetura também facilita a construção de sites modulares e reutilizáveis.

Diferencias

O Astro.js oferece suporte a uma ampla variedade de bibliotecas e estruturas JavaScript, enquanto o Qwik foi projetado especificamente para funcionar com TypeScript. Isso significa que os desenvolvedores podem usar diferentes ferramentas e bibliotecas, dependendo de suas necessidades e preferências.

O Astro.js foi projetado para criar sites escaláveis ​​e altamente otimizados que podem lidar com grandes volumes de tráfego sem degradar o desempenho do site. Por outro lado, o Qwik está mais focado na facilidade de desenvolvimento e na construção de sites reutilizáveis ​​e modulares.

O Astro.js usa uma sintaxe semelhante ao React.js, enquanto o Qwik usa uma sintaxe semelhante ao Angular.js. Isso significa que os desenvolvedores familiarizados com React.js ou AngularJS podem achar mais fácil trabalhar com AstroJS ou Qwik, respectivamente.

O Astro.js usa uma abordagem baseada em arquivo para roteamento, o que significa que as rotas são definidas em arquivos individuais em vez de um arquivo de configuração centralizado. O Qwik, por outro lado, usa uma abordagem mais tradicional de roteamento com base em um arquivo de configuração centralizado.

A seguir, deixo os links de ambos os frameworks caso você queira ficar ainda mais curioso.

Documentação oficial do Qwik: https://qwik.builder.io/

Documentação do Astro.js: https://astro.build/

Concluindo, recomendo Astro.js e Qwik para projetos porque ambos oferecem soluções inovadoras e eficientes para desenvolvimento web. Astro é uma biblioteca leve e fácil de usar que permite a criação de sites rápidos e eficientes com carregamento do lado do servidor.

Por outro lado, o Qwik é um kit de interface de usuário rápido que permite a criação de sites com aparência elegante e profissional.

Para orientação sobre como aplicar esses recursos em projetos, sugiro usar o Astro.js para projetos que exigem carregamento rápido e eficiente do site, como sites de comércio eletrônico ou aplicativos de notícias. Em vez disso, o Qwik é ideal para projetos que precisam de uma interface de usuário atraente e fácil de usar, como projetos de mídia social ou sites de blogs.

Em suma, ambos os recursos podem ser ferramentas valiosas para melhorar a qualidade e eficiência dos projetos web.

A escolha está em suas mãos. Até logo!