Notícias dos desenvolvedores: Vercel se prepara para React 19; Novos lançamentos jQuery e pnpm

Vercel está trabalhando com a equipe React para se preparar para o próximo lançamento do React 19 e planeja abordar essas mudanças em uma versão principal no futuro. Enquanto isso, em 11 de abril, a Vercel lançou o Next.js 14.2, com melhorias no candidato a lançamento Turbopack for Development.

Vercel tem trabalhado para melhorar o desempenho do desenvolvimento local com o Turbopack e observa que o Turbopack Release Candidate agora está disponível para desenvolvimento local com 99,8% de aprovação nos testes de integração. A equipe também verificou que os 300 principais pacotes npm usados ​​em aplicativos Next.js podem ser compilados com Turbopack. Todos os exemplos Next.js funcionam com Turbopack agora e integraram Lightning CSS, um empacotador e minificador CSS rápido escrito em Rust.

Usando vercel.com como campo de testes, a equipe descobriu que o TurboPack levou a:

• Inicialização do servidor local até 76,7% mais rápida;
• Atualizações de código até 96,3% mais rápidas com Fast Refresh; e
• Compilação de rota inicial até 45,8% mais rápida sem cache (o Turbopack ainda não possui cache de disco).

Dito isto, o Turbopack ainda é opcional. O próximo passo será melhorar o uso de memória, implementar cache persistente e next build --turbo.

Além do Turbopack, a versão 14.2 focou em melhorias gerais de desempenho de construção e produção. Entre as atualizações:

• Tremor de árvores. A equipe escreve que identificou “uma otimização para a fronteira entre os componentes do servidor e do cliente que permite a movimentação de exportações não utilizadas”. Assim, por exemplo, se os desenvolvedores importarem um único componente de ícone de um arquivo que tenha “usar cliente”, ele não incluirá mais todos os outros ícones desse pacote, o que pode “reduzir amplamente o tamanho do pacote JavaScript de produção”, observam. Em uma biblioteca popular com componentes react-aria, isso reduziu o tamanho final do pacote em 51,3%. É importante observar que a otimização não funciona com arquivos barril, e a postagem completa do blog sugere o que você pode fazer para otimizá-los usando a opção de configuração PackageImports.
• Aumente o uso da memória. Aplicativos Next.js extremamente grandes estavam apresentando falhas de falta de memória (OOMs) durante compilações de produção. Vercel descobriu que o problema raiz era o excesso de empacotamento e a minificação (Next.js criou menos arquivos JavaScript maiores com duplicação), então eles refatoraram a lógica de empacotamento e otimizaram o compilador para esses casos. Os primeiros testes mostram que em um aplicativo Next.js mínimo, o uso de memória e o tamanho do arquivo de cache diminuíram de 2,2 GB para menos de 190 MB, em média.
• CSS. Vercel mudou a forma como o CSS é otimizado durante a produção para que a ordem e a fusão dos pedaços CSS agora sejam definidas pela ordem de importação.
• Melhorias de cache no App Router.
• staleTimes (Experimental). Vercel adicionou uma opção experimental staleTimes para permitir que o período de invalidação do cache do roteador do lado do cliente seja configurado. “Por padrão, as rotas pré-buscadas (usando o componente sem a propriedade de pré-busca) serão armazenadas em cache por 30 segundos e, se a propriedade de pré-busca estiver definida como verdadeira, 5 minutos”, observou a equipe. Os desenvolvedores podem substituir esses valores padrão definindo tempos de revalidação personalizados em next.config.js.

Não atualizar o jQuery apresenta preocupações de segurança e conformidade

O jQuery pode não ser a potência de desenvolvimento web que já foi, graças aos modernos frameworks JavaScript, mas a OpenJS Foundation estima que 90% de todos os sites ainda usam JQuery.

Espera-se que o jQuery 4.0.0 seja lançado em breve; ficou disponível como uma versão beta em fevereiro. Portanto, a equipe jQuery e a OpenJS Foundation estão realizando uma campanha de verificação da Web saudável para promover a atualização de todos os sites. Vulnerabilidades de segurança e práticas recomendadas de segurança lideram uma lista de motivos pelos quais os desenvolvedores da web devem atualizar seu jQuery. Os requisitos de conformidade são o terceiro motivo pelo qual os desenvolvedores da Web devem examinar esse problema mais de perto.

A equipe do jQuery fornece o plugin jQuery Migrate para tornar a atualização do jQuery o mais fácil possível.

24 de abril é o dia do JavaScript Naked

Quão dependente é o seu site do JavaScript? 24 de abril é um bom dia para descobrir, porque é o JavaScript Naked Day – um dia que pede aos desenvolvedores da web que retirem o JavaScript de seus sites. Ele foi projetado para promover a Regra do Menor Poder, que é um conceito do W3C de que a linguagem menos poderosa adequada para um determinado propósito é aquela que deve ser usada.

O dia também pede aos usuários que desativem-no no navegador, e até reportem como bug caso o site não funcione sem ele, segundo o site JS Naked Day (claro que existe um site!).

O site explica que o conceito surgiu durante uma conversa entre Zach Leatherman, Ryan McNeely, Jason Garber e Simon MacDonald.

“O JS Naked Day começou porque estávamos com ciúmes do CSS Naked Day”, acrescentou o site.

É importante notar que o site foi construído usando a estrutura HTML Enhance, que o The New Stack abordou com mais detalhes no início desta semana.

API de interatividade para WordPress

Uma nova API de interatividade para WordPress permite que os desenvolvedores criem elementos interativos e dinâmicos em seus sites de maneira padronizada, escreveu o desenvolvedor e gerente líder da equipe Automattic, Even Tobiesen, em um post de quarta-feira sobre a nova API. A Automattic ajuda a manter o código aberto do WordPress e executa o WordPress.com.

“A interatividade dinâmica, como pesquisa instantânea, manipulação de formulários e navegação ‘semelhante a um aplicativo’ do lado do cliente, onde os elementos podem persistir nas rotas, tudo sem recarregar a página inteira, pode tornar a web um lugar mais eficiente e interessante para todos”, escreveu Tobiesen. . “Mas criar essas experiências no WordPress nem sempre foi o mais fácil ou direto, muitas vezes exigindo configuração e manutenção de estruturas JavaScript complexas.”

A API de interatividade, uma biblioteca JavaScript leve, foi introduzida pela primeira vez em 2022 como um plugin experimental, mas se tornou uma proposta oficial no ano passado. No WordPress 6.5, lançado em 2 de abril, ele se fundiu ao WordPress Core.

Vários blocos principais do WordPress, como os blocos Query Loop, Image e Search, já adotaram a API de interatividade, acrescentou. Assim, por exemplo, é possível usar o bloco Imagem para adicionar uma imagem a um post ou página, então quando um usuário clicar na imagem, a API de interatividade pode lançar uma lightbox mostrando uma versão da imagem em alta resolução. A renderização da imagem é feita no lado do servidor, mas a interatividade no lado do cliente – manipulação do redimensionamento e abertura do Lightbox – é feita com a API de Interatividade.

“Você pode dizer: ‘Mas eu poderia facilmente fazer isso com algum JavaScript!'”, disse Tobiesen. “Com a API de interatividade, o código é compacto e declarativo, e você obtém o contexto (estado local) para lidar com lightbox, redimensionamento, efeitos colaterais e todos os outros trabalhos necessários aqui no objeto de armazenamento. Os detalhes de implementação de nível inferior, como manter o servidor e o cliente sincronizados, simplesmente funcionam; os desenvolvedores não precisam mais prestar contas deles.”

Ele explicou como ele difere de, digamos, React, Alpine ou Vue – e por que isso é importante.

“Para um grande projeto de código aberto com vários colaboradores, ter um padrão acordado e uma forma nativa de fornecer interatividade do lado do cliente acelera o desenvolvimento e melhora muito a experiência do desenvolvedor”, afirmou.

Nova versão do pnpm disponível

A versão 9.9 do Pnpm foi lançada na terça-feira, 16 de abril. Esta atualização descontinua o suporte ao Node.js v16 e inclui compatibilidade de corepack, alterações de lockfile, alterações de resolução de dependências e atualizações de configuração, entre outras alterações.

pnpm, ou Performant Node Package Manager, é um gerenciador de pacotes com uso eficiente de espaço em disco projetado especificamente para solucionar algumas das deficiências do Node Package Manager (NPM). É conhecido por tempos de instalação mais rápidos, uso reduzido de espaço em disco, foco na segurança e maior eficiência para monorepos.

A postagem Notícias do desenvolvedor: Vercel se prepara para React 19; Novos lançamentos jQuery e pnpm apareceram primeiro no The New Stack.