Como a integração Astro do Qwik supera o React e o Vanilla JS

Neste post falarei sobre a nova integração @qwikdev/astro. Acredito que seja a solução que procuro para resolver um obstáculo que encontrei ao desenvolver meu site pessoal.

Como você provavelmente já deve ter adivinhado, meu site foi construído usando Astro e é amplamente “estático”; mas, como costuma acontecer, mesmo os sites mais estáticos inevitavelmente precisam de algum tipo de interatividade, que normalmente é habilitada com JavaScript.

No meu caso, é para lidar com a navegação da barra lateral. É apenas uma quantidade muito pequena de interatividade, mas há vários elementos HTML que precisam ser referenciados para que os nomes das classes CSS possam ser adicionados ou removidos para obter o efeito desejado quando um usuário clica no ícone do menu.

Benefícios de usar Astro

O Astro, entre outras coisas excelentes, não envia nenhum JavaScript para o cliente (navegador) por padrão; mas, dependendo do que você está construindo, você pode escolher quais páginas incluem JavaScript e quais não.

O que isso significa para a experiência do usuário final é que as páginas carregarão super rápido, porque o JavaScript só é incluído nas páginas onde é realmente necessário.

No entanto, quando você precisa de JavaScript para permitir algum tipo de interatividade, você tem duas opções… ou assim pensei.

Escolha seu JavaScript com sabedoria

Se precisar de algum tipo de interatividade em seu site, você pode:

1. Escreva Vanilla JavaScript usando elementos de script embutidos, que são muito leves, mas podem se tornar difíceis de manter (sem mencionar que são grosseiros de olhar e escrever); ou
2. Use uma estrutura JavaScript como React, Svelte ou Vue etc., que adicionará inchaço adicional à página, mas provavelmente será mais fácil de manter.

Usar uma estrutura é ótimo, é claro, mas se eu estiver usando uma estrutura para permitir a interatividade na navegação da barra lateral, o tempo de execução da estrutura precisaria ser incluído em todas as páginas e poderia impactar negativamente o desempenho do meu site – sem mencionar a adoção desta abordagem meio que anula o sentido de usar o Astro em primeiro lugar!

Em vez disso, optei atualmente pela abordagem Vanilla JavaScript, que funciona, mas não me diverti escrevendo. Além disso, quando eu estava recentemente avisado sobre um bug, tive que revisar alguns códigos difíceis de seguir e de aparência grosseira e descobrir o que estava errado. Mas na semana passada vi este tweet de Steve Sewell, CEO da Builder.io e criador do Qwik. Estava anunciando a nova integração do Astro. Eu não tinha usado o Qwik antes, mas Steve apresenta alguns pontos convincentes em seu vídeo e, à primeira vista, parece ser a resposta que estou procurando!

Uma amostra simples

Para colocar a teoria em prática, experimentei três abordagens para construir uma barra lateral de navegação interativa e preparei uma versão um pouco simplificada da barra lateral de navegação do meu site.

Há um branch para cada um dos meus experimentos disponível nos seguintes links do GitHub.

1. Vanilla Js – filial principal: https://github.com/PaulieScanlon/simple-sidebar-navigation-astro
2. Reagir – feat/add-react: https://github.com/PaulieScanlon/simple-sidebar-navigation-astro/tree/feat/add-react
3. Qwik – feat/add-qwik: https://github.com/PaulieScanlon/simple-sidebar-navigation-astro/tree/feat/add-qwik

O componente ao qual me referirei no código abaixo é chamado <Layout />e pode ser encontrado em src/layouts/layout.astro | .jsxem cada um dos ramos.

1. JavaScript baunilha

Você pode ver o src código para este exemplo aqui: src/layouts/layout.astro

No trecho de código abaixo você verá que existem cerca de 36 linhas de código que fazem a navegação da barra lateral funcionar! Esse tipo de JavaScript pode ser difícil de manter e há diversas áreas onde as coisas podem dar errado.

<script>
  var isNavOpen = false;
  const menu = document.querySelector('#menu');
  const lightbox = document.querySelector('#lightbox');
  const sidebar = document.querySelector('#sidebar');

  const lightboxOpen = 'fixed';
  const lightboxOpenLg = 'lg:hidden';
  const lightboxClosed = 'hidden';

  const sidebarResponsiveClosed = '-left-(240px)';
  const sidebarResponsiveOpen = 'left-(max(0px,calc(50%-45rem)))';

  const menuIcon = 'M4 6h16M4 12h16m-7 6h7';
  const closeIcon = 'M6 18L18 6M6 6l12 12';
  const menuPath = document.querySelector('#menuPath');

  menuPath.setAttribute('d', menuIcon);
  sidebar.classList.add(sidebarResponsiveClosed);
  lightbox.classList.add(lightboxClosed);

  const handleNav = () => {
    if (isNavOpen) {
      menuPath.setAttribute('d', menuIcon);
      lightbox.classList.remove(lightboxOpen, lightboxOpenLg);
      sidebar.classList.remove(sidebarResponsiveOpen);
      lightbox.classList.add(lightboxClosed);
      sidebar.classList.add(sidebarResponsiveClosed);
      isNavOpen = false;
    } else {
      menuPath.setAttribute('d', closeIcon);
      lightbox.classList.remove(lightboxClosed);
      lightbox.classList.add(lightboxOpen, lightboxOpenLg);
      sidebar.classList.remove(sidebarResponsiveClosed);
      sidebar.classList.add(sidebarResponsiveOpen);
      isNavOpen = true;
    }
  };

  menu.addEventListener('click', handleNav);
  lightbox.addEventListener('click', handleNav);
</script>

Onde as coisas podem dar errado

Para lhe dar um exemplo. Se eu usar a lightbox como exemplo (a lightbox é a cor preta semitransparente que é visível quando a navegação está aberta), você poderá ver quantas pequenas coisas complicadas estão envolvidas ao usar o Vanilla JavaScript.

De pegar uma referência ao idcriando variáveis ​​para armazenar os diferentes nomes de classes (a propósito, estou usando o Tailwind), então há o classList métodos para adicionar e remover estilos, além do eventListener que precisa ser anexado ao elemento DOM.

const lightbox = document.querySelector('#lightbox');

const lightboxOpen = 'fixed';
const lightboxOpenLg = 'lg:hidden';
const lightboxClosed = 'hidden';


const handleNav = () => {
    ...
  if (isNavOpen) {
    lightbox.classList.remove(lightboxOpen, lightboxOpenLg);
    lightbox.classList.add(lightboxClosed);

    isNavOpen = false;
  } else {
    ...	
    lightbox.classList.remove(lightboxClosed);
    lightbox.classList.add(lightboxOpen, lightboxOpenLg);

    isNavOpen = true;
  }
};


lightbox.addEventListener('click', handleNav);

HTML:

<div
  id='lightbox'
  aria-label="lightbox"
  tab-index='0'
  role="button"
  class="z-20 top-0 left-0 w-screen h-screen bg-custom-background opacity-80"
>
</div>

Se em algum momento eu fizer uma alteração em qualquer uma dessas linhas de JavaScript ou remover acidentalmente o id do elemento HTML, a navegação seria interrompida, impossibilitando que as pessoas utilizassem meu site!

Dito isto, a única vantagem dessa abordagem é que ela é superleve. Vanilla JavaScript, ou JavaScript que o navegador pode entender nativamente, não requer o download de nenhum tempo de execução adicional para funcionar.

2. Reaja

Você pode ver o src código para este exemplo aqui: src/layouts/layout.jsx

Por outro lado, se eu habilitar a mesma funcionalidade usando React, você verá como é mais limpo e fácil de ler. Existem apenas cerca de 5 linhas de código para alterar um valor de estado, o que por sua vez faz com que o React renderize novamente o HTML, e um operador ternário pode ser usado para decidir quais classes devem estar presentes no HTML quando o React terminar de hidratar a página .

port { useState } from 'react';

const (isNavOpen, setIsNavOpen) = useState(false);

const handleNav = () => {
  setIsNavOpen(!isNavOpen);
};

HTML:

<div
  aria-label="lightbox"
  tab-index='0'
  role="button"
  className={`z-20 top-0 left-0 w-screen h-screen bg-custom-background opacity-80 ${isNavOpen ? 'fixed' : 'hidden'} lg:hidden`}
  onClick={handleNav}
/>

A parte boa de usar o React é que a parte do JavaScript é super simples e os nomes das classes agora são mais fáceis de ler porque tudo está em um só lugar no HTML. A desvantagem é que, ao usar o React, adicionei um adicional ~47kb de JavaScript para todas as páginas do meu site.

3. Rápido

Você pode ver o src código para este exemplo aqui: src/layouts/layout.jsx

Como antes com React, existem cerca de 5 linhas de código para alterar o valor do estado. A configuração do HTML é muito semelhante ao React, onde um operador ternário é usado para controlar quais nomes de classes são usados.

import { useSignal, $ } from '@builder.io/qwik';

const isNavOpen = useSignal(false);

const handleNav = $(() => {
  isNavOpen.value = !isNavOpen.value;
});

HTML:

<div
aria-label="lightbox"
tab-index='0'
role="button"
className={`z-20 top-0 left-0 w-screen h-screen bg-custom-background opacity-80 ${isNavOpen.value ? 'fixed' : 'hidden' } lg:hidden`}
onClick$={handleNav}
></div>

No entanto, e este é o grande problema para mim, ao usar o Qwik em vez do React, estou apenas adicionando um adicional ~2kb de JavaScript para todas as páginas do meu site!

Os resultados

Abaixo estão os resultados do tamanho geral da página (que inclui HTML e CSS) para cada um dos métodos mencionados acima:

1. Baunilha JS: 9,7kb
2. Reagir: 56,8kb
3. Qwik: 11,2kb

Qwik, na minha opinião, é o melhor dos dois mundos – é menos detalhado de escrever do que Vanilla JavaScript e é consideravelmente mais leve comparado ao React.

O que também gosto na abordagem Qwik é que o JavaScript está embutido, como estaria se eu o tivesse escrito usando o método Vanilla. Portanto, não há arquivos .js reais baixados quando você olha na guia Rede das ferramentas de desenvolvimento do seu navegador.

Há mais no Qwik

Mas isso não é tudo. O Qwik usa uma abordagem muito diferente para lidar com atualizações do React. Mas, em vez de tentar explicá-lo, os documentos do Qwik abordaram isso muito bem aqui: Resumível vs. Hidratação.

Outra coisa que gosto nessa abordagem é que não são necessárias diretivas de cliente. Por exemplo, ao usar o React, você precisa informar ao Astro que o componente (neste caso, Layout) é client:only, o que significa que o Astro irá pular a renderização no servidor e esperamos que esteja claro por que o JavaScript que permite a interatividade no navegador não funciona. não precisa ser renderizado no servidor.

<Layout client:only='react'>
  <slot />
</Layout>

Considerando que, ao usar o Qwik, seria simplesmente isso.

<Layout>
  <slot />
</Layout>

A abordagem do Qwik parece a mesma que se o componente Layout fosse um arquivo .astro, então isso é outra coisa com a qual você não precisa se preocupar ao desenvolver – ou fazer alterações futuras.

Pensamentos finais

A integração do Qwik Astro está atualmente nos estágios iniciais de desenvolvimento. Você verá no meu repositório de amostra que estou usando a versão 0.1.16; então, por mais impressionado que esteja com isso, vou adiar a implementação em meu site por mais um pouco.

Dito isso, o pessoal foi super “rápido” em lidar com um problema que abri (obrigado mais uma vez Jack!) então estou confiante de que uma versão 1 estável estará pronta em breve e, quando estiver, estarei 100% pronto para implementá-la em meu site.

Se você tem um site Astro e precisa de interatividade, experimente o Qwik. As duas tecnologias se complementam muito bem.

A postagem Como a integração Astro do Qwik supera o React e o Vanilla JS apareceu pela primeira vez no The New Stack.