Tendencias de React en 2024

Astro (junto con React)

• El año pasado, Astro apareció como sucesor de Gatsby
• Astro era conocido principalmente por los sitios web estáticos, pero también está ganando popularidad para aplicaciones web y endpoints de API
• Los sitios web construidos con Astro manejan el renderizado en el servidor, por lo que ofrecen un gran rendimiento por defecto
• Astro puede usarse incluso sin React ni un framework de UI, y permite crear componentes de UI mediante archivos .astro
• Cuando se usa junto con React, solo se envían HTML y CSS al navegador, y JavaScript se entrega solo cuando es necesario
  • "fast-by-default"

Autenticación (en React)

• Gracias a varias startups y proyectos de código abierto, la autenticación en React vuelve a ser interesante
• Además de Firebase Authentication, Auth0, Passport.js y NextAuth, están apareciendo nuevas alternativas de autenticación
• Supabase ofrece varias funciones como alternativa de código abierto a Firebase
• Clerk se enfoca solo en autenticación, y permite implementar fácilmente registro e inicio de sesión de usuarios en React
• Lucia ganó popularidad junto con Astro, y ofrece código abierto y una capa de abstracción clara con la base de datos

Aplicaciones full-stack de React con tRPC

• tRPC se ha convertido en mi favorito para aplicaciones full-stack con seguridad de tipos
• Mientras Prisma genera tipos a partir de los modelos de base de datos de la aplicación backend, tRPC mantiene la seguridad de tipos desde el backend hasta la capa de API del frontend
• Gracias a la característica base de tRPC, llamada llamadas a procedimientos remotos, la aplicación cliente puede invocar la API del backend llamando funciones normales
• tRPC usa la especificación JSON-RPC y la capa de transporte HTTP, y al combinarse con react-query permite caching eficiente y batching de solicitudes

React Server Components y Next.js

• React Server Components (RSC) fue implementado y adoptado por la comunidad el año pasado a través de Next 13.4
• RSC está impulsando un gran cambio de paradigma en el desarrollo web
• RSC podría ser un cambio aún mayor que los React Hooks, porque obliga a repensar cómo se usan los componentes de React en aplicaciones más grandes
• Con RSC, es posible hacer data fetching a nivel de componente en el servidor antes de que el componente sea enviado (o transmitido en streaming) al navegador, lo que mejora el rendimiento
• Me intriga qué papel jugará RSC cuando tRPC y react-query se usen para la comunicación cliente-servidor, pero RSC obtenga los datos en el servidor. Tengo curiosidad por ver qué resultados habrá este año

TanStack Router para React SPA

• Tanner Linsley sostiene que las SPA (Single Page Applications) todavía no están muertas
• Él, que participó en la creación de react-query y react-table, presentó recientemente la nueva librería TanStack Router
• Muchos desarrolladores están adoptando meta-frameworks como Next.js y Remix, con router integrado (y que internamente usan el router de React más popular, además de enfocarse en implementar RSC), pero nadie había creado desde cero un router con seguridad de tipos para React
• TanStack Router llena un vacío importante en el ecosistema de React, y es un nuevo router con soporte para TypeScript
• Este router permite a los desarrolladores leer y escribir el estado de la URL de forma type-safe

Vercel empuja React hacia el Edge

• Vercel es la empresa que está impulsando Next.js, profundamente involucrada en el movimiento RSC
• Como varios desarrolladores clave fueron contratados por Vercel, muchos desarrolladores piensan que Vercel es la fuerza motriz detrás de React
• Vercel no solo está ampliando las fronteras de React con RSC, sino también la manera de desplegar y entregar eficientemente aplicaciones React a los usuarios a través de Next.js
• Al usar aplicaciones Next en Vercel, es posible hacer streaming de componentes React mediante el runtime de Edge
• Hacer streaming de componentes React en el Edge tiene un gran impacto en el rendimiento
• Combinado con bases de datos serverless como PlanetScale, que tienen réplicas en todo el mundo, esto podría convertirse en una tendencia interesante para la forma futura de hospedar aplicaciones (o dónde hacerlo mejor)

Bundlers para React: Turbopack vs Vite

• Turbopack es el sucesor de Webpack; todavía no está listo para usarse en producción, pero ya puede utilizarse para desarrollo local en aplicaciones Next.js
• En el pasado, los bundlers ya tenían muchas responsabilidades, pero la tendencia de combinar componentes de cliente y servidor tanto en desarrollo como en producción exige un nuevo tipo de bundler
• Personalmente, me habría gustado ver a Vite y sus capacidades del lado del servidor usándose en Next.js, pero mientras Remix, otros meta-frameworks y las SPA adoptaban Vite, Vercel/Next comenzó a trabajar en Turbopack

React Compiler (conocido como React Forget)

• Los desarrolladores de React se quejan del uso de useCallback, useMemo y memo
• El equipo de React está desarrollando (relativamente en silencio) un compilador llamado React Compiler, que automatiza toda la memoización de las aplicaciones React
• Se espera que desaparezca el proceso manual de memoizar funciones (useCallback), valores (useMemo) y componentes (memo)
• React se encargará de memoizar todo esto para que en el siguiente render no sea necesario recalcularlo todo
• React Compiler mejorará el rendimiento de las aplicaciones React al automatizar esta memoización manual
• Probablemente se anunciará en React 19 y en eventos como React Conf 2024

Biome

• Aunque hay frustración con la configuración y la interacción entre ESLint y Prettier, Biome (antes Rome) busca ofrecer una solución rápida e integrada de toolchain para reemplazarlos
• Otra alternativa muy prometedora como toolchain todo en uno es oxc (JavaScript Oxidation Compiler)

Librerías de UI headless para React

• Los desarrolladores de React tienden a cambiar su librería de UI favorita cada año
• Hace unos años usaban Material UI, luego pasaron a Semantic UI/Ant Design, después a Chakra UI, luego a Mantine UI, y el año pasado se asentaron en shadcn/UI
• Todas las elecciones anteriores se debían principalmente al deseo de diseño y usabilidad, pero con shadcn/UI cambiaron algunas cosas
• shadcn/UI es la primera librería de UI popular que adopta por completo Tailwind para diseñar componentes de forma personalizada
• La tendencia de las librerías de UI headless es ofrecer funcionalidad y accesibilidad sin imponer diseño
• Las soluciones CSS-in-JS como Styled Components o Emotion cargan más al cliente/navegador, por eso nuevas soluciones CSS-in-JS como StyleX mitigan ese problema compilando a CSS utility-first

[firea32]

https://github.com/facebook/react-strict-dom
También tengo expectativas sobre react-strict-dom.
Si sale bien, creo que podría reemplazar a react-native-web.

[greenhead]

Tengo muchísimas expectativas con React Forget.