Novidades nos frameworks do JavaScript (maio de 2024)

Katie Hempenius
Katie Hempenius
X
Addy Osmani
Addy Osmani
X GitHub

Pode ser difícil acompanhar tudo o que está acontecendo com os frameworks JavaScript. Este documento apresenta breves destaques dos acontecimentos recentes no ecossistema de frameworks JavaScript ao longo do último ano. Para uma discussão mais longa sobre alguns desses tópicos, confira a palestra Como navegar pelo ecossistema de frameworks do JavaScript correspondente no evento Google I/O deste ano.

Gráfico comparando os recursos do framework

Como mostrado no gráfico, as estruturas JavaScript estão convergindo em vários recursos e arquiteturas semelhantes. Isso inclui arquitetura baseada em componentes, roteamento com base em arquivos e suporte moderno a SSR. Essa convergência demonstra o amadurecimento e a evolução do ecossistema à medida que os frameworks aprendem uns com os outros e adotam as práticas recomendadas.

Ao mesmo tempo, várias tendências recentes (como componentes de servidor e abordagens diferentes para reatividade detalhada) continuam a diferenciar frameworks individuais. Para ajudar a entender melhor essas tendências, nos aprofundamos em uma estrutura de cada vez.

Angular

As versões recentes do Angular apresentaram uma variedade de mudanças significativas, incluindo indicadores, visualizações adiáveis, NgOptimziedImage, hidratação não destrutiva e hidratação parcial. Estes são alguns destaques:

  • Indicadores: os indicadores são uma abordagem usada por vários frameworks (agora, incluindo o Angular) para rastrear o estado em um aplicativo. Os indicadores angulares podem melhorar o desempenho do tempo de execução, incluindo a Interação com a próxima pintura (INP, na sigla em inglês), reduzindo o número de cálculos que precisam ocorrer durante a detecção de mudanças.
  • Visualizações Adiáveis: permitem adiar o carregamento de componentes, diretivas e pipelines específicos. Por exemplo, é possível adiar o carregamento de uma dependência até que o conteúdo entre na janela de visualização ou até que a linha de execução principal esteja inativa.
  • NgOptimizedImage: o NgOptimizedImage é um componente de imagem para o Angular que automatiza a adoção de práticas recomendadas de carregamento de imagens.
  • Hidratação não destrutiva: a hidratação não destrutiva corrige a oscilação que ocorria quando o DOM de apps Angular renderizados no lado do servidor era recriado no lado do cliente.
  • Hidratação parcial: em breve, a equipe do Angular vai lançar a prévia para desenvolvedores da hidratação parcial. Com a hidratação parcial, por padrão, o navegador não carrega o JavaScript da página quando ela é renderizada. Em vez disso, partes específicas da página são hidratadas à medida que o usuário interage com ela.

Astro

O Astro, um criador de sites estático e moderno, está bombando com uma abordagem inovadora ao desenvolvimento da Web. Com foco no desempenho e na experiência do desenvolvedor, o Astro lançou vários recursos e atualizações incríveis:

  • Ilhas Astro: as ilhas Astro permitem que os desenvolvedores criem componentes de interface interativos isolados do restante da página. Isso permite atualizações eficientes e o desempenho ideal.
  • Renderização híbrida: o Astro agora oferece suporte à renderização híbrida, combinando os benefícios da geração estática de sites e da renderização do lado do servidor para aumentar a flexibilidade.
  • Componentes Image e Picture: a Astro lançou novos componentes Image e Picture que simplificam o processamento de imagens e oferecem otimização automática.
  • Suporte para transições de visualização: o Astro oferece suporte integrado à API View Transitions (link em inglês), permitindo transições de página suaves e contínuas.
  • Barra de ferramentas Astro Dev: a barra de ferramentas do Astro Dev oferece um conjunto avançado de ferramentas para depurar e otimizar aplicativos Astro.

Reação

No ano passado, o lançamento dos componentes de servidor do React apresentou uma nova abordagem aos componentes. Desde então, a equipe do React tem trabalhado em vários recursos novos, incluindo os recursos React Compiler e Server Actions, além de:

  • Componentes do servidor: os componentes do servidor do React são componentes que buscam dados e são renderizados no servidor antes de serem transmitidos para o cliente. Isso move o trabalho de renderização para o servidor e reduz a quantidade de código que precisa ser enviada ao cliente.
  • React Compiler: o React Compiler é um compilador que pode memoizar componentes automaticamente. Isso melhora o desempenho, reduzindo novas renderizações desnecessárias. A equipe do React informou que os desenvolvedores poderão adotar o React Compiler sem fazer mudanças no código.
  • Ações do servidor: as ações do servidor permitem a comunicação entre servidores. Com as ações do servidor, é possível definir funções do lado do servidor que podem ser invocadas diretamente dos componentes do React, eliminando a necessidade de chamadas de API manuais e gerenciamento complexo de estados. Isso pode ser especialmente útil para coisas como mutações de dados e envios de formulário.
  • Asset Loading: o React tem trabalhado em APIs declarativas para pré-carregamento de recursos, como scripts, estilos, fontes e imagens.
  • Renderização fora da tela: o React também está funcionando na renderização fora da tela. A renderização fora da tela é "um recurso futuro do React para renderizar telas em segundo plano sem sobrecarga extra no desempenho. Pense nela como uma versão da propriedade CSS de visibilidade do conteúdo que funciona não apenas para elementos DOM, mas também para componentes do React."

Remix

O Remix, um framework da Web de pilha completa, vem ganhando força na comunidade de desenvolvedores. Com foco nos princípios básicos da Web e na experiência aprimorada do desenvolvedor, o Remix introduziu várias atualizações importantes:

  • Lançamento do Remix 2.0: o Remix 2.0, lançado em setembro de 2023, trouxe melhorias significativas e novos recursos para o framework.
  • Suporte estável para o Vite: o Remix agora oferece suporte estável ao Vite, uma ferramenta de build rápida e leve, com builds de desenvolvimento mais rápidos e desempenho aprimorado.
  • Modo SPA: o Remix introduziu o modo SPA, que permite criar sites puramente estáticos sem precisar de um servidor JavaScript na produção. Isso permite que os desenvolvedores usem os recursos avançados do Remix, como roteamento baseado em arquivos, divisão automática de código e muito mais, mantendo a simplicidade da implantação do site estático.

Next.js

O lançamento do Next.js 13.4, em maio de 2023, foi particularmente importante, porque introduziu suporte estável a componentes do servidor do React, streaming e suspense. Desde então, o Next.js continua desenvolvendo suporte para novas APIs React (por exemplo, Ações do servidor) e iterando a experiência do desenvolvedor com iniciativas como o Turbopack. Outros destaques incluem:

  • App Router: o App Router, que se tornou estável no Next.js 13.4, é uma nova maneira de estruturar e gerenciar o roteamento em aplicativos Next.js. O App Router é um pré-requisito para usar os novos recursos do Next.js, como layouts compartilhados e roteamento aninhado, além de novas APIs React, como Componentes do servidor do React, Suspense e Server Actions, no app Next.js.

  • Turbopack (link em inglês): atualmente experimental) para a renderização de páginas, criada com base na API Suspense do React. A pré-renderização parcial renderiza uma página usando um shell de carregamento estático. No entanto, o shell deixa "furos" para o conteúdo dinâmico na página, e esse conteúdo é carregado de forma assíncrona. Isso proporciona os benefícios de desempenho de uma página estática armazenável em cache e, ao mesmo tempo, consegue incorporar dados dinâmicos ao conteúdo da página.

Vue

O lançamento mais recente da Vue, o Vue 3.4, incluiu várias melhorias de desempenho. O Vue também está trabalhando no Vue Vapor, que também é voltado para o desempenho. Veja alguns destaques do que está acontecendo nesse espaço:

  • Lançamento do Vue 3.4: os recursos incluem "um analisador completamente reescrito, que é duas vezes mais rápido e a compilação de SFC mais rápida, e um sistema de reatividade refatorado que melhora a eficiência de recomputação".
  • Vue Vapor Mode: o Vue está trabalhando no Vapor Mode, uma estratégia de compilação opcional e orientada para desempenho que funciona com Vue Single File Components (link em inglês). O Vapor Mode gera um código com melhor desempenho do que o código atualmente produzido pelo Vue Compiler. Além disso, usar o modo de vapor com todos os componentes elimina a necessidade do DOM virtual do Vue, que reduz o tamanho do pacote.
  • O Vue 2 chegou à EOL: o fim da vida útil (EOL) do Vue 2 foi em 31 de dezembro de 2023. No entanto, o Vue 2 ainda é amplamente usado: cerca de 50% dos downloads de pacotes npm do Vue são para o Vue 2.

Nuxt

A Nuxt está quase do lançamento do Nuxt 4. Além dos lançamentos frequentes do framework do Nuxt no ano passado, o ecossistema de módulos Nuxt cresceu para quase 220 módulos. Alguns desenvolvimentos recentes nesse espaço incluem:

Sólida

A Solid está trabalhando para a versão estável 1.0 (link em inglês) do SolidStart de meta framework. O SolidStart conta com reatividade refinada, roteamento isomórfico e suporte para uma variedade de modos de renderização. Alguns destaques:

  • Reatividade detalhada: o sistema de reatividade do Solid permite atualizações precisas e performance ideal, o que permite uma renderização e um gerenciamento de estado eficientes.
  • Roteamento isomórfico: o SolidStart fornece uma abordagem unificada de roteamento, permitindo que os desenvolvedores definam rotas que funcionam perfeitamente no cliente e no servidor.
  • Modos de renderização flexíveis: o SolidStart oferece suporte a vários modos de renderização, incluindo renderização pelo servidor, geração de sites estáticos e renderização no lado do cliente. Assim, os desenvolvedores têm flexibilidade para escolher a melhor abordagem para o aplicativo.

Escuro

No ano passado, a equipe do Svelte se concentrou no próximo lançamento do Svelte 5, o que será significativo. Outros destaques incluem:

  • O Svelte 5 está chegando: além de incluir uma regravação do compilador e do ambiente de execução do Svelte, o Svelte 5 também introduz o conceito de Runes (execuções).
  • Runes anunciadas: as runas são um recurso futuro do Svelte 5. "As Runs desbloqueiam uma reatividade universal e refinada... Com as runas, a reatividade ultrapassa os limites dos arquivos .svelte... A reatividade do Svelte 5 é alimentada por sinais. No entanto, ao contrário de outros frameworks, no Svelte 5, os indicadores são um detalhe de implementação dos bastidores, e não algo com que você interage diretamente".
  • Lançamento do SvelteKit 2: SvelteKit é o metaframework do Svelte. Os recursos dessa versão incluem roteamento superficial e compatibilidade com o Vite 5.

Aurora do Chrome

O Chrome Aurora é uma equipe do Google que colabora com várias estruturas de código aberto da Web para melhorar a experiência do usuário, especialmente o desempenho, na Web. Veja algumas iniciativas que contribuímos ao longo do último ano:

Conclusão

O ecossistema do framework JavaScript continua evoluindo em ritmo acelerado, e cada framework traz o próprio conjunto de inovações e melhorias. Se você tem interesse nos recursos mais recentes de frameworks estabelecidos, como Angular, React e Vue, ou está em busca de novas opções, como Astro, Remix e Solid, não faltam novos desenvolvimentos incríveis para você acompanhar.

Como desenvolvedores, acompanhar esses avanços nos ajuda a tomar decisões informadas ao escolher um framework para nossos projetos. Ao entender os pontos fortes e os recursos exclusivos de cada framework, podemos selecionar o que melhor se alinha aos nossos requisitos de projeto e preferências de desenvolvimento.

Esperamos que esta visão geral tenha ajudado você a ter uma ideia do estado atual dos frameworks JavaScript. Para saber mais sobre os tópicos abordados nesta postagem do blog, confira a palestra complementar do Google I/O. Divirta-se com os códigos!