Tendências de React em 2024

xguru · 2024-02-23T10:03:02+09:00

Astro (com React) No ano passado, o Astro surgiu como sucessor do Gatsby O Astro era conhecido principalmente por sites estáticos, mas também vem ganhando popularidade para aplicações web e endpoints de API Sites construídos com Astro processam a renderização no servidor, o que garante ótima performance por padrão O Astro também pode ser usado sem React ou sem um framework de UI, permitindo criar componentes de interface com arquivos .astro Quando usado com React, apenas HTML e CSS são enviados ao navegador, e o JavaScript só é entregue quando necessário "rápido por padrão" Autenticação (no React) A autenticação no React voltou a ficar interessante graças a várias startups e projetos open source Além de Firebase Authentication, Auth0, Passport.js e NextAuth, novas alternativas de autenticação estão surgindo O Supabase oferece vários recursos como uma alternativa open source ao Firebase O Clerk foca exclusivamente em autenticação, facilitando cadastro e login de usuários no React O Lucia ganhou popularidade junto com o Astro e oferece código aberto e uma camada de abstração clara para bancos de dados Aplicações React full stack com tRPC O tRPC se tornou meu favorito para aplicações full stack com segurança de tipos Enquanto o Prisma gera tipos a partir dos modelos de banco de dados no backend, o tRPC mantém a segurança de tipos do backend até a camada de API do frontend Graças à característica central de chamadas de procedimento remoto do tRPC, a aplicação cliente pode chamar a API do backend usando funções comuns O tRPC usa a especificação JSON-RPC e a camada de transporte HTTP, e combinado com react-query oferece cache eficiente e agrupamento de requisições React Server Components e Next.js React Server Components (RSC) foram implementados e adotados pela comunidade no ano passado por meio do Next 13.4 RSC está trazendo uma grande mudança de paradigma para o desenvolvimento web Pode ser uma mudança ainda maior do que os React Hooks, porque faz repensar como usar componentes React em aplicações maiores Com RSC, é possível buscar dados no nível do componente no servidor antes que os componentes sejam enviados (ou transmitidos em streaming) ao navegador, melhorando a performance Fico curioso sobre qual será o papel do RSC quando tRPC e react-query forem usados para comunicação cliente-servidor, mas os dados forem buscados no servidor. Estou ansioso para ver o que este ano trará TanStack Router para React SPA Tanner Linsley afirma que as SPA (Single Page Applications) ainda não morreram Ele, que participou da criação de react-query e react-table, anunciou a nova biblioteca TanStack Router Muitos desenvolvedores estão adotando meta-frameworks como Next.js e Remix, com roteadores embutidos (e que também focam na implementação de RSC), mas ninguém havia criado do zero um roteador type-safe para React O TanStack Router preenche uma lacuna importante no ecossistema React e é um novo roteador com suporte a TypeScript Esse roteador permite que desenvolvedores leiam e escrevam estado de URL de forma type-safe Vercel empurra o React para a Edge A Vercel é a empresa que impulsiona o Next.js, profundamente envolvida no movimento RSC Como vários desenvolvedores centrais foram contratados pela Vercel, muita gente considera a empresa a força motriz por trás do React A Vercel não está apenas expandindo os limites do React com RSC, mas também ampliando, via Next.js, as formas de implantar e entregar aplicações React de maneira eficiente aos usuários Ao usar aplicações Next na Vercel, é possível fazer streaming de componentes React por meio do runtime de edge Fazer streaming de componentes React na edge tem grande impacto na performance Combinado com bancos de dados serverless como o PlanetScale, que têm réplicas no mundo todo, isso pode se tornar uma tendência interessante para a forma como aplicações serão hospedadas no futuro (ou em melhores localizações) Bundlers para React: Turbopack vs Vite O Turbopack é o sucessor do Webpack; ainda não está pronto para uso em produção, mas já pode ser usado no desenvolvimento local de aplicações Next.js No passado, os bundlers já tinham muitas responsabilidades, mas a tendência de combinar componentes de cliente e servidor em ambientes de desenvolvimento e produção exige um novo tipo de bundler Pessoalmente, eu queria ver o Vite e seus recursos do lado do servidor sendo usados no Next.js, mas enquanto Remix, outros meta-frameworks e SPAs adotaram o Vite, a Vercel/Next começou a trabalhar no Turbopack Compilador do React (conhecido como React Forget) Desenvolvedores React têm reclamado do uso de useCallback, useMemo e memo A equipe do React está desenvolvendo, de forma relativamente discreta, um compilador chamado React Compiler para automatizar toda a memoização em aplicações React Espera-se que o processo manual de memoizar funções (useCallback), valores (useMemo) e componentes (memo) desapareça no futuro O React cuidará de memoizar tudo isso para evitar recalcular tudo na próxima renderização O React Compiler deve melhorar a performance das aplicações React ao automatizar essa memoização manual Provavelmente será anunciado em eventos como o React 19 e o React Conf 2024 Biome Há insatisfação com as configurações do ESLint e do Prettier e com a forma como eles interagem, e o Biome (antigo Rome) quer oferecer uma solução rápida e integrada de toolchain para substituí-los Outra alternativa bastante promissora de toolchain all-in-one é o oxc (JavaScript Oxidation Compiler) Bibliotecas de UI headless para React Desenvolvedores React tendem a trocar de biblioteca de UI favorita todos os anos Alguns anos atrás usavam Material UI, depois migraram para Semantic UI/Ant Design, depois para Chakra UI, depois Mantine UI, e no ano passado acabaram ficando com shadcn/UI Todas as escolhas anteriores vinham principalmente do desejo por design e usabilidade, mas com o shadcn/UI algumas coisas mudaram O shadcn/UI é a primeira biblioteca de UI popular a abraçar totalmente o Tailwind e permitir personalizar o design dos componentes Bibliotecas de UI headless seguem a tendência de oferecer funcionalidade e acessibilidade sem impor design Soluções CSS-in-JS como Styled Components e Emotion sobrecarregam o cliente/o navegador, então novas soluções como StyleX aliviam isso ao compilar para CSS utility-first

(robinwieruch.de)

30 pontos por xguru 2024-02-23 | 4 comentários | Compartilhar no WhatsApp

Astro (com React)

No ano passado, o Astro surgiu como sucessor do Gatsby
O Astro era conhecido principalmente por sites estáticos, mas também vem ganhando popularidade para aplicações web e endpoints de API
Sites construídos com Astro processam a renderização no servidor, o que garante ótima performance por padrão
O Astro também pode ser usado sem React ou sem um framework de UI, permitindo criar componentes de interface com arquivos .astro
Quando usado com React, apenas HTML e CSS são enviados ao navegador, e o JavaScript só é entregue quando necessário
- "rápido por padrão"

Autenticação (no React)

A autenticação no React voltou a ficar interessante graças a várias startups e projetos open source
Além de Firebase Authentication, Auth0, Passport.js e NextAuth, novas alternativas de autenticação estão surgindo
O Supabase oferece vários recursos como uma alternativa open source ao Firebase
O Clerk foca exclusivamente em autenticação, facilitando cadastro e login de usuários no React
O Lucia ganhou popularidade junto com o Astro e oferece código aberto e uma camada de abstração clara para bancos de dados

Aplicações React full stack com tRPC

O tRPC se tornou meu favorito para aplicações full stack com segurança de tipos
Enquanto o Prisma gera tipos a partir dos modelos de banco de dados no backend, o tRPC mantém a segurança de tipos do backend até a camada de API do frontend
Graças à característica central de chamadas de procedimento remoto do tRPC, a aplicação cliente pode chamar a API do backend usando funções comuns
O tRPC usa a especificação JSON-RPC e a camada de transporte HTTP, e combinado com react-query oferece cache eficiente e agrupamento de requisições

React Server Components e Next.js

React Server Components (RSC) foram implementados e adotados pela comunidade no ano passado por meio do Next 13.4
RSC está trazendo uma grande mudança de paradigma para o desenvolvimento web
Pode ser uma mudança ainda maior do que os React Hooks, porque faz repensar como usar componentes React em aplicações maiores
Com RSC, é possível buscar dados no nível do componente no servidor antes que os componentes sejam enviados (ou transmitidos em streaming) ao navegador, melhorando a performance
Fico curioso sobre qual será o papel do RSC quando tRPC e react-query forem usados para comunicação cliente-servidor, mas os dados forem buscados no servidor. Estou ansioso para ver o que este ano trará

TanStack Router para React SPA

Tanner Linsley afirma que as SPA (Single Page Applications) ainda não morreram
Ele, que participou da criação de react-query e react-table, anunciou a nova biblioteca TanStack Router
Muitos desenvolvedores estão adotando meta-frameworks como Next.js e Remix, com roteadores embutidos (e que também focam na implementação de RSC), mas ninguém havia criado do zero um roteador type-safe para React
O TanStack Router preenche uma lacuna importante no ecossistema React e é um novo roteador com suporte a TypeScript
Esse roteador permite que desenvolvedores leiam e escrevam estado de URL de forma type-safe

Vercel empurra o React para a Edge

A Vercel é a empresa que impulsiona o Next.js, profundamente envolvida no movimento RSC
Como vários desenvolvedores centrais foram contratados pela Vercel, muita gente considera a empresa a força motriz por trás do React
A Vercel não está apenas expandindo os limites do React com RSC, mas também ampliando, via Next.js, as formas de implantar e entregar aplicações React de maneira eficiente aos usuários
Ao usar aplicações Next na Vercel, é possível fazer streaming de componentes React por meio do runtime de edge
Fazer streaming de componentes React na edge tem grande impacto na performance
Combinado com bancos de dados serverless como o PlanetScale, que têm réplicas no mundo todo, isso pode se tornar uma tendência interessante para a forma como aplicações serão hospedadas no futuro (ou em melhores localizações)

Bundlers para React: Turbopack vs Vite

O Turbopack é o sucessor do Webpack; ainda não está pronto para uso em produção, mas já pode ser usado no desenvolvimento local de aplicações Next.js
No passado, os bundlers já tinham muitas responsabilidades, mas a tendência de combinar componentes de cliente e servidor em ambientes de desenvolvimento e produção exige um novo tipo de bundler
Pessoalmente, eu queria ver o Vite e seus recursos do lado do servidor sendo usados no Next.js, mas enquanto Remix, outros meta-frameworks e SPAs adotaram o Vite, a Vercel/Next começou a trabalhar no Turbopack

Compilador do React (conhecido como React Forget)

Desenvolvedores React têm reclamado do uso de useCallback, useMemo e memo
A equipe do React está desenvolvendo, de forma relativamente discreta, um compilador chamado React Compiler para automatizar toda a memoização em aplicações React
Espera-se que o processo manual de memoizar funções (useCallback), valores (useMemo) e componentes (memo) desapareça no futuro
O React cuidará de memoizar tudo isso para evitar recalcular tudo na próxima renderização
O React Compiler deve melhorar a performance das aplicações React ao automatizar essa memoização manual
Provavelmente será anunciado em eventos como o React 19 e o React Conf 2024

Biome

Há insatisfação com as configurações do ESLint e do Prettier e com a forma como eles interagem, e o Biome (antigo Rome) quer oferecer uma solução rápida e integrada de toolchain para substituí-los
Outra alternativa bastante promissora de toolchain all-in-one é o oxc (JavaScript Oxidation Compiler)

Bibliotecas de UI headless para React

Desenvolvedores React tendem a trocar de biblioteca de UI favorita todos os anos
Alguns anos atrás usavam Material UI, depois migraram para Semantic UI/Ant Design, depois para Chakra UI, depois Mantine UI, e no ano passado acabaram ficando com shadcn/UI
Todas as escolhas anteriores vinham principalmente do desejo por design e usabilidade, mas com o shadcn/UI algumas coisas mudaram
O shadcn/UI é a primeira biblioteca de UI popular a abraçar totalmente o Tailwind e permitir personalizar o design dos componentes
Bibliotecas de UI headless seguem a tendência de oferecer funcionalidade e acessibilidade sem impor design
Soluções CSS-in-JS como Styled Components e Emotion sobrecarregam o cliente/o navegador, então novas soluções como StyleX aliviam isso ao compilar para CSS utility-first

4 comentários

firea32 2024-02-26

https://github.com/facebook/react-strict-dom
Também estou no aguardo do react-strict-dom.
Se sair direito, acho que pode substituir o react-native-web.

greenhead 2024-02-23

Estou muito ansioso pelo React Forget

2024-02-23

[Este comentário foi ocultado.]