2024 React Trendleri

Astro (React ile birlikte)

• Geçen yıl Astro, Gatsby'nin halefi olarak ortaya çıktı
• Astro ağırlıklı olarak statik web siteleriyle bilinse de, web uygulamaları ve API endpoint'leri için de popülerlik kazanıyor
• Astro ile oluşturulan web siteleri, render işlemesini sunucuda yaptığı için varsayılan olarak yüksek performans sunuyor
• Astro, React veya bir UI framework'ü olmadan da kullanılabiliyor; .astro dosyaları üzerinden UI bileşenleri oluşturulabiliyor
• React ile birlikte kullanıldığında tarayıcıya yalnızca HTML ve CSS gönderiliyor, JavaScript ise yalnızca gerektiğinde sağlanıyor
  • "fast-by-default"

Kimlik doğrulama (React'te)

• Çeşitli startup'lar ve açık kaynak projeleri sayesinde React'te kimlik doğrulama yeniden ilgi çekici hale geliyor
• Firebase Authentication, Auth0, Passport.js, NextAuth'un yanı sıra yeni kimlik doğrulama alternatifleri de ortaya çıkıyor
• Supabase, açık kaynaklı bir Firebase alternatifi olarak çeşitli özellikler sunuyor
• Clerk yalnızca kimlik doğrulamaya odaklanıyor ve React'te kullanıcı kaydı ile giriş işlemlerini kolaylaştırıyor
• Lucia, Astro ile birlikte popülerlik kazandı; açık kaynak yapısı ve veritabanlarıyla net bir soyutlama katmanı sunuyor

tRPC ile full-stack React uygulamaları

• tRPC, tip güvenli full-stack uygulamalar için benim favorim haline geldi
• Prisma arka uç uygulamasının veritabanı modellerinden tipler üretirken, tRPC arka uçtan ön ucun API katmanına kadar tip güvenliğini koruyor
• Uzak prosedür çağrısı olan tRPC'nin temel yapısı sayesinde istemci uygulaması, sıradan fonksiyonları çağırarak arka uç API'sini kullanabiliyor
• tRPC, JSON-RPC spesifikasyonunu ve HTTP taşıma katmanını kullanıyor; react-query ile birleştiğinde verimli caching ve istek gruplamayı destekliyor

React Server Components ve Next.js

• React Server Components(RSC), geçen yıl Next 13.4 aracılığıyla topluluk tarafından uygulanıp benimsendi
• RSC, web geliştirmede büyük bir paradigma değişimi getiriyor
• Daha büyük uygulamalarda React bileşenlerini nasıl kullandığımızı yeniden düşünmeye zorladığı için, RSC React Hook'lardan bile daha büyük bir değişim olabilir
• RSC kullanıldığında, bileşenler tarayıcıya gönderilmeden (veya stream edilmeden) önce sunucu tarafında bileşen düzeyinde veri getirme yapılabildiğinden performans artıyor
• tRPC ve react-query istemci-sunucu iletişimi için kullanılırken, RSC'nin veriyi sunucudan aldığı senaryoda hangi rolü üstleneceği merak konusu. Bu yıl ne sonuçlar çıkacağını görmek heyecan verici

SPA React için TanStack Router

• Tanner Linsley, SPA'lerin (Single Page Applications) hâlâ ölmediğini savunuyor
• react-query ve react-table geliştirilmesinde yer alan ismin yeni duyurduğu kütüphane: TanStack Router
• Birçok geliştirici, yerleşik router'lara sahip Next.js ve Remix gibi meta framework'leri benimsiyor olsa da (bunlar içeride en popüler React router'ını kullanıyor ve RSC implementasyonuna da odaklanıyor), bugüne kadar hiç kimse React için sıfırdan tip güvenli bir router inşa etmedi
• TanStack Router, React ekosistemindeki önemli bir boşluğu dolduran ve TypeScript desteği sunan yeni bir router
• Bu router, geliştiricilerin URL durumunu tip güvenli bir şekilde okuyup yazmasına olanak tanıyor

Vercel, React'i Edge'e taşıyor

• Vercel, RSC hareketinin derin şekilde içinde olan ve Next.js'i öne iten şirket
• Birçok çekirdek geliştirici Vercel tarafından işe alındığı için, pek çok geliştirici Vercel'i React'in itici gücü olarak görüyor
• Vercel yalnızca RSC ile React'in sınırlarını genişletmekle kalmıyor, aynı zamanda Next.js üzerinden React uygulamalarını verimli biçimde deploy etme ve kullanıcılara ulaştırma yöntemlerini de genişletiyor
• Vercel üzerinde Next uygulamaları kullanıldığında, edge runtime aracılığıyla React bileşenleri stream edilebiliyor
• React bileşenlerini bu şekilde edge'de stream etmek performans üzerinde büyük etki yaratıyor
• Dünyanın dört bir yanında kopyaları bulunan PlanetScale gibi serverless veritabanlarıyla birleştiğinde, gelecekte uygulamaların nasıl (veya daha iyi hangi konumdan) host edileceğine dair ilgi çekici bir trend olabilir

React için bundler'lar: Turbopack ve Vite

• Turbopack, Webpack'in halefi olarak görülüyor; henüz production'da kullanılacak aşamada olmasa da Next.js uygulamalarında local geliştirme için kullanılabiliyor
• Geçmişte bundler'ların zaten çok fazla sorumluluğu vardı, ancak istemci ve sunucu bileşenlerinin geliştirme ve production ortamlarında birlikte ele alınması eğilimi nedeniyle yeni bir bundler türüne ihtiyaç duyuluyor
• Kişisel olarak Vite'ın ve onun sunucu tarafı yeteneklerinin Next.js içinde kullanıldığını görmek isterdim; ancak Remix ve diğer meta framework'ler ile SPA'ler Vite'ı benimserken, Vercel/Next Turbopack üzerinde çalışmaya başladı

React Compiler (React Forget olarak biliniyor)

• React geliştiricileri useCallback, useMemo, memo kullanımından şikayet ediyor
• React ekibi, React uygulamalarındaki tüm memoization işlemlerini otomatikleştiren React Compiler adlı bir derleyiciyi (görece sessiz biçimde) geliştiriyor
• Fonksiyonları (useCallback), değerleri (useMemo) ve bileşenleri (memo) memoize etmeye yönelik manuel sürecin gelecekte ortadan kalkması bekleniyor
• React tüm bunları memoize ederek sonraki render sırasında her şeyi yeniden hesaplama ihtiyacını ortadan kaldıracak
• React Compiler, bu manuel memoization sürecini otomatikleştirerek React uygulamalarının performansını iyileştirecek
• Muhtemelen React 19 ve React Conf 2024 gibi etkinliklerde duyurulacak

Biome

• ESLint ve Prettier yapılandırmaları ile bunların birbiriyle etkileşimine yönelik memnuniyetsizlik var; Biome (eski adıyla Rome) bunun yerine geçebilecek hızlı ve entegre bir toolchain çözümü sunmayı hedefliyor
• Bir diğer alternatif ise oldukça umut verici görünen hepsi bir arada toolchain adayı oxc (JavaScript Oxidation Compiler)

React için Headless UI kütüphaneleri

• React geliştiricileri her yıl favori UI kütüphanelerini değiştirme eğiliminde
• Birkaç yıl önce Material UI kullanılırken sonra Semantic UI/Ant Design'a, ardından Chakra UI'ya ve sonra Mantine UI'ya geçildi; geçen yıl ise shadcn/UI üzerinde karar kılındı
• Önceki tüm tercihler esas olarak tasarım ve kullanılabilirlik beklentilerinden kaynaklanıyordu, ancak shadcn/UI ile bazı şeyler değişti
• shadcn/UI, Tailwind'i tamamen benimseyen ve bileşenleri özelleştirerek tasarlamaya odaklanan ilk popüler UI kütüphanesi
• Headless UI kütüphaneleri, tasarım olmadan işlevsellik ve erişilebilirlik sunma yönünde ilerliyor
• Styled Components veya Emotion gibi CSS-in-JS çözümleri istemciye/tarayıcıya yük bindirdiği için, StyleX gibi yeni CSS-in-JS çözümleri utility-first CSS'e derlenerek bu sorunu hafifletiyor

[firea32]

https://github.com/facebook/react-strict-dom
react-strict-dom'u ben de merakla bekliyorum.
Düzgün çıkarsa react-native-web'in yerini alabilecek gibi görünüyor.

[greenhead]

React Forget gerçekten çok heyecan verici görünüyor