Qwik: O Primeiro Framework HTML
Tags: qwik, webdev, html
Published: 2022-10-12 20:55:49

📢🚨 O artigo foi publicado originalmente no TabNews, então se eu citar ele algumas vezes, apenas ignora

<div align="center"><img src="https://raw.githubusercontent.com/BuilderIO/qwik/main/.github/assets/qwik-logo.svg" alt="Logo do Qwik"></div>

Eu li sobre esse framework no Medium no post [React e Next.js estão MORTOS — algo novo está (finalmente) substituindo-o (para sempre)](https://javascript.plainenglish.io/react-and-next-js-is-dead-something-new-is-finally-replacing-it-for-good-c792c48806f6) (o post está em inglês), e acho que ninguém falou sobre isso aqui no TabNews. Então eu resolvi fazer um resumo do artigo e do que é esse framework.


## O funcionamento do Qwiki
O paradoxo no desenvolvimento web é que mais JavaScript é necessário para implementar os recursos que seus usuários desejam. No entanto, menos JavaScript é necessário para que seu site carregue rapidamente.

Então vamos ver como funciona a maior parte das páginas com JS:
<div align="center"><img src="https://miro.medium.com/max/828/1*Hu0IrSnn9-ugmXAAda10ZQ.gif" alt="funcionamento da página normal">
    <sup>O navegador executa o aplicativo significa que ele está anexando ouvintes (visualizados como caixas pretas) o que nos dá interatividade.</sup>
</div>

Apesar de enviar toda a estrutura (incluindo a view) para o cliente, ainda temos que esperar que ela se torne interativa.

O tempo de inicialização é desnecessariamente aumentado por todo o processo – Certamente isso é um problema, não é?

<div align="center"><img src="https://miro.medium.com/max/828/1*Wrv542nWJmjmB4JCYdAkvA.gif"></div>

👆🏻 Nesse exemplo, pra página se tornar interativa, o carregamento demora 2 segundos.

<br>

Agora vamos falar sobre o Qwik.

O Qwik é tão rápido porque permite que sites totalmente interativos sejam carregados com quase nenhum JavaScript e sejam retomados de onde o servidor parou.

À medida que os usuários interagem com o site, apenas as partes necessárias do site são carregadas sob demanda. Esse carregamento lento de precisão é o que torna o Qwik tão rápido.

<br>
Se abrirmos a guia Rede, encontraremos zero JavaScript no carregamento inicial da página.
<div align="center"><img src="https://miro.medium.com/max/828/1*0CTRzI-NvNlPO3D0jrRsFw.gif"></div>

Não ter JavaScript exibido nessa página em particular, não é tão impressionante. Qualquer framework pode fazer isso (se você estiver solicitando uma página estática).

O que torna o QWIK especial é que ele descobriu isso sozinho.

Basicamente, apenas procurou seu código e disse: “Na verdade, você não precisa de nenhum JavaScript aqui, nem vou me incomodar em enviá-lo”.

Você notará que o JavaScript não é carregado até clicarmos no botão.

<div align="center"><img src="https://miro.medium.com/max/828/1*_ljgwhxUEL3JHw4Lc86jkw.gif"><sup>Quando clico em <code>Hello</code>, apenas o trecho de código que contém o <code>console.log(Hello)</code> é exibido. Nada mais!</sup></div>
<br>
<br>

<div align="center"><img src="https://miro.medium.com/max/828/1*daa5HMTunZa04KWR9TU23Q.gif"><sup>Next.js vs Qwik</sup></div>
<br>

<div align="center"><img src="https://miro.medium.com/max/828/1*nX4MnBhW6lsSYUXEX7kmWA.gif"></div>
<div align="center"><sup>com o qwik a página é interativa desde o início</sup></div>

<br>
<hr>
<br>
<div align="center"><img src="https://miro.medium.com/max/828/1*ifmrowXK2Zo6zEIfxP6-NA.gif"></div>
<div align="center"><sup>aqui temos uma comparação entre os sites populares e os com qwik</sup></div>


## Conclusão
Milhares de anos atrás, Gautama - O Buda nos disse para escolher um caminho do meio. Nós desenvolvedores somos muito teimosos, ainda escolhemos ir a extremos.

Há uma tribo que diz para você usar todo JavaScript (todos os outros SPAs), há uma tribo que diz para você não escolher JavaScript (frameworks baseados em WebSocket, como LiveView), e há o resto que permite que você use JS com o peso do tamanho do pacote (e com o custo do desempenho).

Qwik é uma lufada de ar fresco em tudo isso, não é nada como já usamos antes.

Não estou aqui para evangelizar nenhuma estrutura, mas temos que reconhecer o fato de que essa abordagem é revolucionária.

Eu gostaria que mais frameworks surgissem com essa abordagem.

Essa abordagem é o caminho a seguir, caso contrário, estaríamos em loops para sempre.


## Alguns links úteis
- [Artigo original (e completo)](https://javascript.plainenglish.io/react-and-next-js-is-dead-something-new-is-finally-replacing-it-for-good-c792c48806f6)
- [Repositório no Github](https://github.com/BuilderIO/qwik)
- [Documentação oficial](https://qwik.builder.io/)