React-Trends 2024

Astro (zusammen mit React)

• Letztes Jahr erschien Astro als Nachfolger von Gatsby
• Astro ist vor allem für statische Websites bekannt, gewinnt aber auch für Webanwendungen und API-Endpunkte an Beliebtheit
• Mit Astro erstellte Websites rendern auf dem Server und sind dadurch standardmäßig sehr performant
• Astro kann auch ohne React oder ein UI-Framework verwendet werden; über .astro-Dateien lassen sich UI-Komponenten erstellen
• Bei Verwendung mit React werden nur HTML und CSS an den Browser gesendet, JavaScript nur bei Bedarf
  • "fast-by-default"

Authentifizierung (in React)

• Dank mehrerer Startups und Open-Source-Projekte wird Authentifizierung in React wieder spannender
• Neben Firebase Authentication, Auth0, Passport.js und NextAuth sind neue Alternativen für Authentifizierung entstanden
• Supabase bietet als Open-Source-Alternative zu Firebase verschiedene Funktionen
• Clerk konzentriert sich ausschließlich auf Authentifizierung und ermöglicht in React eine einfache Benutzerregistrierung und Anmeldung
• Lucia wurde zusammen mit Astro populär und bietet Open Source sowie eine klare Abstraktionsschicht zu Datenbanken

Full-Stack-React-Anwendungen mit tRPC

• tRPC ist für mich zum Favoriten für typsichere Full-Stack-Anwendungen geworden
• Während Prisma Typen aus den Datenbankmodellen von Backend-Anwendungen erzeugt, erhält tRPC die Typsicherheit vom Backend bis zur API-Schicht im Frontend
• Durch die grundlegende Eigenschaft von tRPC als Remote Procedure Call kann die Client-Anwendung das Backend über gewöhnliche Funktionsaufrufe ansprechen
• tRPC verwendet die JSON-RPC-Spezifikation und die HTTP-Transportschicht und unterstützt in Kombination mit react-query effizientes Caching und Request-Batching

React Server Components und Next.js

• React Server Components (RSC) wurden im vergangenen Jahr mit Next 13.4 von der Community implementiert und übernommen
• RSC bringt einen großen Paradigmenwechsel in die Webentwicklung
• RSC könnte eine größere Veränderung sein als React Hooks, weil es dazu zwingt, den Einsatz von React-Komponenten in größeren Anwendungen neu zu denken
• Mit RSC kann das Laden von Daten auf Komponentenebene auf dem Server erfolgen, bevor Komponenten an den Browser gesendet (oder gestreamt) werden, was die Performance verbessert
• Ich frage mich, welche Rolle RSC spielen wird, wenn tRPC und react-query für die Client-Server-Kommunikation genutzt werden und RSC Daten auf dem Server lädt. Ich bin gespannt, was dieses Jahr daraus wird

TanStack Router für SPA-React

• Tanner Linsley behauptet, dass SPAs (Single Page Applications) noch nicht tot sind
• Er war an der Entwicklung von react-query und react-table beteiligt und hat nun die neue Bibliothek TanStack Router vorgestellt
• Viele Entwickler setzen zwar auf Meta-Frameworks wie Next.js und Remix mit eingebautem Router (die intern die populärsten React-Router verwenden und sich ebenfalls auf die RSC-Implementierung konzentrieren), aber bisher hat noch niemand einen von Grund auf typsicheren Router für React gebaut
• TanStack Router schließt eine wichtige Lücke im React-Ökosystem und ist ein neuer Router mit TypeScript-Unterstützung
• Dieser Router ermöglicht es Entwicklern, URL-Zustand typsicher zu lesen und zu schreiben

Vercel treibt React an den Edge

• Vercel ist das Unternehmen hinter Next.js, das tief in die RSC-Bewegung eingebunden ist
• Da mehrere Kernentwickler von Vercel eingestellt wurden, sehen viele Entwickler Vercel als treibende Kraft hinter React
• Vercel verschiebt mit RSC nicht nur die Grenzen von React, sondern erweitert über Next.js auch die Möglichkeiten, React-Anwendungen effizient bereitzustellen und an Nutzer auszuliefern
• Mit Next-Anwendungen auf Vercel lassen sich React-Komponenten über die Edge Runtime streamen
• Dieses Streaming von React-Komponenten am Edge hat großen Einfluss auf die Performance
• In Kombination mit serverlosen Datenbanken wie PlanetScale mit Replikaten auf der ganzen Welt könnte das ein spannender Trend dafür werden, wie Anwendungen künftig gehostet werden – oder wo es besser ist

Bundler für React: Turbopack vs. Vite

• Turbopack ist der Nachfolger von Webpack. Es ist noch nicht reif für den produktiven Einsatz, kann aber in Next.js-Anwendungen für die lokale Entwicklung verwendet werden
• Früher hatten Bundler bereits viele Aufgaben, doch durch den Trend, Client- und Server-Komponenten in Entwicklungs- und Produktionsumgebungen zusammenzuführen, wird eine neue Art von Bundler benötigt
• Persönlich hätte ich gern gesehen, dass Vite und seine serverseitigen Funktionen in Next.js verwendet werden, aber während Remix, andere Meta-Frameworks und SPAs Vite übernehmen, haben Vercel/Next mit der Arbeit an Turbopack begonnen

React Compiler (bekannt als React Forget)

• React-Entwickler sind unzufrieden mit der Verwendung von useCallback, useMemo und memo
• Das React-Team entwickelt derzeit vergleichsweise still einen Compiler namens React Compiler, der die gesamte Memoisierung in React-Anwendungen automatisieren soll
• Es wird erwartet, dass der manuelle Prozess des Memoisierens von Funktionen (useCallback), Werten (useMemo) und Komponenten (memo) künftig verschwindet
• React soll all dies selbst memoisiert behandeln, damit beim nächsten Rendering nicht alles neu berechnet werden muss
• Der React Compiler wird diese manuelle Memoisierung automatisieren und so die Performance von React-Anwendungen verbessern
• Vermutlich wird er auf der React 19 und der React Conf 2024 vorgestellt

Biome

• Es gibt Unzufriedenheit mit Konfiguration und Zusammenspiel von ESLint und Prettier, und Biome (früher Rome) will dafür eine schnelle, integrierte Toolchain als Ersatz bieten
• Eine weitere Alternative ist oxc (JavaScript Oxidation Compiler), das als All-in-One-Toolchain sehr vielversprechend wirkt

Headless-UI-Bibliotheken für React

• React-Entwickler neigen dazu, jedes Jahr ihre bevorzugte UI-Bibliothek zu wechseln
• Vor einigen Jahren nutzte man Material UI, dann Semantic UI/Ant Design, danach Chakra UI und später Mantine UI; im vergangenen Jahr hat man sich bei shadcn/UI eingependelt
• Frühere Entscheidungen waren meist vom Wunsch nach Design und Usability getrieben, aber bei shadcn/UI hat sich einiges geändert
• shadcn/UI ist die erste populäre UI-Bibliothek, die Tailwind vollständig annimmt und das individuelle Design von Komponenten in den Vordergrund stellt
• Headless-UI-Bibliotheken folgen dem Trend, Funktionalität und Barrierefreiheit ohne vorgegebenes Design bereitzustellen
• CSS-in-JS-Lösungen wie Styled Components oder Emotion belasten den Client/Browser, daher mildern neue CSS-in-JS-Lösungen wie StyleX dieses Problem, indem sie zu Utility-First-CSS kompilieren

[firea32]

https://github.com/facebook/react-strict-dom
Ich bin auch gespannt auf react-strict-dom.
Wenn es ordentlich erscheint, könnte es wohl react-native-web ersetzen.

[greenhead]

Ich freue mich schon riesig auf React Forget.