Executando verificação de segurança...
26

Qwik: O Primeiro Framework HTML

Logo do Qwik

Eu li sobre esse framework no Medium no post React e Next.js estão MORTOS — algo novo está (finalmente) substituindo-o (para sempre) (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:

funcionamento da página normal O navegador executa o aplicativo significa que ele está anexando ouvintes (visualizados como caixas pretas) o que nos dá interatividade.

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 é?

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


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.


Se abrirmos a guia Rede, encontraremos zero JavaScript no carregamento inicial da página.

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.

Quando clico em Hello, apenas o trecho de código que contém o console.log(Hello) é exibido. Nada mais!


Next.js vs Qwik

com o qwik a página é interativa desde o início



aqui temos uma comparação entre os sites populares e os com qwik

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.

2

Bem interessante, havia visto um video do Fireship sobre o Qwik no YT e parece bem promissor! Muito bom o artigo, vou acompanhar esse framework! 👀

2
2

Uau, eu achando que o futuro da Web seria WebAssembly, ja posso começar a duvidar um pouco disto depois de ver Qwik. Bem vamos ver qual desses dois sai na porrada e sai vitorioso!

E gostei do slogan deles:

Você sabe React? Você conhece Qwik.

A experiência do desenvolvedor é um princípio central do Qwik. Construído em cima do JSX, componentes funcionais e reatividade, aprender Qwik é um pedaço de bolo.

Sabendo React economiza qualquer curva de aprendizado!
Vou acompanhar de perto este projeto 🫣

1

Que irado essa artigo e sua publicação!
Não sou especialista em web mas acho que nem precisa ser para entender a revolução dessa abordagem, né?
Irei ficar de olho nesse tal de Qwik. Obrigado!

1
1

Cara, isso me lembra minha primeira experiência com criação de sites HTML a mais de uma década atrás, eu comecei usando um software da época chamado KompoZer, ele era o famoso criador de sites de arrastar e jogar, e no final te gerava um arquivo HTML com abolutamente nada de responsividade kkkkk

1

Certamente essa é uma lufada de ar fresco diante da crescente dificuldade de deixar sites cada vez maiores mais rápidos.
Acompanharei o desenvolvimento desse novo framework.
Valeu pela dica.

1

Aqui vai um aivso para todos: fiz alguns testes com esse framework e realmente o tempo de carregamento inicial diminui MUITO, principalmente em páginas mais longas.

Porém, em conexões mais lentas, quando você clica em um botão, ele pode demorar pra carregar o conteúdo. Além disso, outra limitação que eu percebi, é que atualmente não é possível adicionar scroll animations (animações no scroll). (O que na minha opinião, em algumas situações deixa o site bem mais bonito). Um exemplo é meu portfólio, feito com HTML, CSS e JavaScript, ainda não otimizado pra mobile, as animações fizeram total diferença na experiência, e mesmo assim eu consegui 99 de peformance no PageSpeed Insights. (gabrielsozinho.ga)

Recomendo que vocês leiam os comentários na postagem la no Medium, eles vão esclarecer muitas coisas.