React Ekosistem
Next.js React’ın Geleceğine Mi Karar Veriyor ? veya Yerine mi deseydim :)
Son Next.JS konferansında How Next.js is delivering React’s vision for the future (Sam Selikoff) videosu sonrasında çok fazla konuşulan konu oldu, peki Next.JS React’ın yerine mi karar alıyor ?
Aslında bu yazıda çoğunlukla Next.js is delivering React’s vision for the future (Sam Selikoff) → Next.js React’ın gelecek vizyonunu nasıl gerçekleştiriyor videosu üzerinde duruyor olacağım.
Son dönemlerde facebook/react çevresinde gelişen ekosistemde React Hook’lar ile birlikte DX (Developer Experience) vb.. nedenlerle Class Component’ ları , Functional Component ve Hook kullanımına dönüştürmüşlerdi.
Bu Hooks soyutlaması aslında geliştiricileri altyapı ve bileşen detaylarından soyutlayarak işlerin biraz daha magic(sihir) şeklinde gerçekleşmesine neden oldu, bu aslında React’ın ilk yaptığı soyutlamada değildi, React.createElement → JSX kullanımı soyutladığından itibaren React Ekosistemde büyük eleştirilere neden olmuştu
Çünkü JSX ile JavaScript kodlarının içerisinde HTML benzeri yapılar oluşturarak HTML, Styling ve JS kodunu tek bir modül içerisinde bir bileşen içerisinde kullanılabilmesini sağladı.
Bu durum birçok geliştiricinin alışık olmadığı bir durumdu, Neyse zaman içerisinde bu duruma alışıldı ve artık JSX siz yapılamaz olmaya başlandı.
Benzeri durum React’ın 3rd Party kütüphane ve servis kullanımını, ortak fonksiyonları bileşenler arası paylaşımında yaşadığı sorunlardı. Sınıf bileşenlerinde
- Render Props
- High Order Components
- Extend
gibi yöntemler karşımıza çıkıyor ama bunlar bileşenlerin iç içe çok karmaşık bir yapı ile yönetimini zorluyordu. Hooks yapısı ilk çıktığından itibaren React Ekosisteminde kütüphane sayısında daha fazla çoğalma ve standartlaşma başladı artık herkes
useHooks, AHooks vb benzeri kütüphanesinin servislerini uygulama geliştiricilere daha basit bir şekilde sunabiliyordu.
React Hooks’lara geçiş yeni başlayanlar için kolay fakat eski sınıf bileşen yapısı kullananlar için zor bir geçiş olacaktı, fakat ekosistemdeki kütüphaneler yavaş yavaş Class Component desteklerini kaldırdıkça Hooks geçişi daha fazla hızlanmaya başladı.
Burada React’ın bir başarısıda Class Component ve Function Component + Hook yapısını desteklemeyi bırakmaması. Bu legacy kodlar açısından çok önemliydi.
Özetle React Hooks geçişide başarılı olmuştu.
Sonra Server Side Rendering ve Hybrid çözümler yaygınlaşmaya başladı, React’ın bu kısımda bir takım fonksiyonları vardı fakat bunlar RSC kadar etki yaratabilecek konular değildi.
- React Suspense
- React Transition
- Streaming
- https://github.com/reactjs/rfcs/pull/229
- CRA (Create React App) Neden Sonlandırıldı
- React’ın yeni sitesi ve Framework (Next, Gatsby, Remix, Expo) yapılan vurgular artık React’ın geleceğinin Framework’ lere teslim edildiğinin bir göstergesiydi. Vite ve Parcel ile kullanıma derinlerde bahsediliyordu.
React’ın yoluna devam edebilmesi için ekosistemde büyük alımlar ve geliştirici transferleri gerçekleştirildi
- Vercel Next.js için Meta React ekibinden bir grubu şirkete dahil etti.
- React Router Ekibi → Remix oluşturdu → Shopify bu ekibi satın aldı
- Netlify ise GraphQL üzerine olan CMS altyapısı Gatsby ekibini satın aldı
- Ekosistemde Astro ve Vite ile React support edilmeye devam ediyor
Yukarıda da görüleceği üzere artık Routing, Data Fetching vb.. bir çok yetenek için Framework’ ler dönemine girilmiş bulunuyor.
Bu durumun getirdiği parasal kaynak avantajının yanında bir dezavantajda bulunuyor, Next.JS , Remix, Gatsby giderek Vendor bağımlı olmaya onların işlerine hizmet etmeye başlıyor.
Bir çok kurumsal firma bu seviyelerde bağımlılıklara sıcak bakar mı bu durumu henüz bilmiyoruz, kütüphanelere bağımlılık ile framework’lere bağımlılık arasında ciddi farklar bulunuyor. Kurumsal firmalar bunu dikkate alacaktır. Bundan dolayı Vite ekosistemide her geçen gün daha fazla gelişmektedir.
Video
Gelelim Video’ya öncelikle Sam burada bahsettiği konular gerçekten çok güzel özellikle anlatım şekli çok hoşuma gitti.
Burada üzerinde durulan konu Data Fetching ,
- useSWR, useQuery vb.. kütüphaneler kullanılarak
- sunucu’ daki veri Client getiriliyor ve
- React kütüphanesi ile bu Render ediliyor
Buradaki problem olarak gözüken sorun ekranda Spinner gösterilmesi. Halbuki bu bir çok Enterprise ürün için çok büyük bir sorun değil. Çünkü diğer yöntem Server’ da render edilmesi ki bunun
- Maliyet boyutu
- Server, Tarayıcı kadar kolay debug edilememesi (observability) boyutu
gibi sorunları var.
Tabi buradaki web uygulamasının neye hizmet ettiği çok önemli, Bu bir E-Ticaret sitesi veya Müşterilerin bir süre beklemesi , müşteri memnuniyetsizliği ve para kaybına dönüşüyor ise SEO işlemleri önemli ise bu durumda ServerSide Rendering yönelebilirsiniz.
Burada Next.JS getServerSideProps faydalanarak veriyi sunucu tarafta render etmeyi sağlayan yapılarını kullanabilirsiniz.
Sonuçta sunucu kısmında bu bileşeni render ederek, Spinner sorunun kurtulmuş olundu fakat Composeble değil, çünkü bir bileşen veri için dışarıda bulunan başka bir fonksiyona bağımlı..
Burada aşağıdaki resimde olduğu gibi NewStory bileşenleri → getServerSideProps bağımlılar.
Composeble
Fonksiyonel Programlama kitabında bu konu üzerinde oldukça detaylı şekilde durmuştum.
Bileşenleri bir fonksiyon olarak düşünürsek bunların birbirlerini kapsayarak uygulamayı oluşturmasıdır. Bu açıdan React uygulamasını aşağıdaki şekilde düşünebilirsiniz.
f(g(h(x)))React’ın bu altyapısı sadece Client çalışabilirken, yani Sunucu tarafında bir API üzerinden kullanırken uygulama bir bütün olarak birbirini kapsayan blok yapılardan oluşmuyordu.
Eğer biz bileşenleri hem sunucu’ da , hemde tarayıcıda çalıştırırsak ve bunları birbirine kapsayan hale getirebilirsek istediğimiz esneklikte uygulamaları kolayca geliştirebilir ve bu blokları istediğimiz gibi farklı kısımlara koyabiliriz.
Bu taşınabilir bir blok olduğunda aşağıdaki resimlerde olduğu gibi NewStory bileşeni ile istediğimiz uygulama kısımlarına basitçe ekleyebiliyoruz.
Aynı bileşen içeriside hem Sunucu, hemde Client yeteneklerini kullanabildiğimiz bileşenler yazabildiğimiz anlamına geliyor.
Server Actions
Aşağıdaki örnekte NewStory bileşenine Bookmark eklemesi yapmak istiyor. Aslında aşağıdaki yapı kadar kolay olması gerekir.
Fakat bunun yapılabilmesi için Bookmark bileşeni içerisinde bir API call yapılması gerekmektedir.
Burada da temel sorun bileşen yine dışarıda bulunan bir API bağımlı tek başına taşınabilir ve reuse edilebilir halde değil , bunun yerine bileşen içerisinden action ile db / diğer 3rd party API erişim verildiğinde
Next.JS platformu bunu otomatik çalıştırabilir hale geliyor, bu sayede React bileşenleri içerisinden backend API’ler oluşturmadan Fullstack Composable uygulama geliştirmenize olanak sağlamış oluyor.
Artık bileşenler daha hazır bir şekilde kopyalanıp kullanılabilir olacak. Aşağıdaki resimde StripeCheckout bileşenini alıp uygulamanızda çalışabilir şekilde kullanabileceksiniz. , S3Uploader bileşenin uygulamanıza attığınızda direk çalışacak. Giriş ekranları hazır olacak.
Aklımdaki Sorunlar
- Bu yapıların kullanılabilmesi sanki NoCode gibi ama NoCode yapıların bir problemi Vendor bağımlılık yani bu bileşenler sadece Next.JS platformu üzerinde kullanılabilir olacağı anlamına geliyor.
- Güvenlik problemi , Bileşenler üzerinden SQL kullanmak bir çok Security katmanını OWASP atlamak anlamına geliyor.
- Debugging zorluğu, bileşenler bir UI’da, bir Sunucuda Render edilecek, bu da kodun zor debug edilebilmesini ve takip edilebilmesini neden olacak. Observability Tool ve API kullanımları (OpenTelemetry) güçlenmesi gerekecek.
- Ekosistemdeki bazı kütüphanelerin geleceğini etkileyecektir. ReactQuery, SWR, Redux, RTKQuery vb.. Server Sync kütüphanelerinin geleceği nasıl olacak ?
- Bazı teknolojilere rakip haline gelecektir. Örneğin GraphQL, BFF veya Sunucu API altyapılarına rakip olacaktır.
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke (frontend ecosystem) tıklayabilirsiniz.
Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke (react server component) tıklayabilirsiniz.
LearnReactUI.dev
React Ekosisteminde kendi kariyerinizi daha ileriye götürmek için LearnReactUI.dev sitesine üye olmayı unutmayın. Bu site piyasada çalışan(real-world) Web Uygulaması geliştirmek isteyen React geliştiricileri için oluşturulmuş bir web sitesidir.
