Frontend Patterns
Hangi Frontend Framework Kullanmalıyım ? (Next, Remix, Qwik, Astro, Vite, …) Hangisi ?
Son dönemlerde Frontend geliştirmek için bir çok Framework türedi. Hangisini nasıl seçeceğiniz konusunda karar vermekte zorlanıyor musunuz Neden bu kadar çok Framework var ? React dünyası veya React Syntax Framework mantar gibi her yerden türüyor ?
Framework veya Kütüphane gibi ayrımlardan öte, bir web proje altyapısı oluştururken React ekosisteminde karşımıza artık bir çok Framework çıkıyor.
Neden React Ekosistemine Odaklanıyorum ?
Son dönemde React dilini bir meta dil ve altyapı gibi konumlandırmak yanlış olmaz. Her ne kadar sektörde angular, vue, svelte, solid gibi diller olsada sektörü react’ın domine ettiği gerçeğini değiştirmiyor. Frontend sektörüne React ve React Framework’leri yön veriyor.
Rendering Frameworkler de (Next, Remix, Gatyby, Docusaurus) toplamı diğerlerini çok çok üstünde yani yukarıda yazdığım React’ın ekosistemi domine ettiği ve yön verdiği tezini destekliyor.
Hangi Framework’ ler Var ?
Aslında bir çok Framework ve kütüphane bulunuyor Next, Remix, SvelteKit, Qwik, Hydrogen, Marco, Vite, CRA, Astro, Elder, 11yn ve (JamStack altında) bir çoğu bunuyor.
Neden Bu Kadar Framework Bulunuyor ?
Peki her geçen gün sayıları artan bu kadar Framework neden ortaya çıktı ?
Bu konuyu anlamak için öncelikle gerçek hayatta bu Framework’ leri hangi uygulamalar kullanıyor ise onları bir gruplamamız gerekiyor.
Baya bir zaman önce bu geçmiş yıllarıda düşünerek aşağıdaki şekilde bir yazı yazmıştım. Yani Web Uygulamalarını 2 ye ayırabiliyorduk.
- ya Sunucu çalışsın (JSP, PHP, ASPNet, Ruby ..)
- veya Client çalışsın API kullansın (Ember, Angular, React, Vue)
HTML Rendering Nerede Yapılmalı ? Tarayıcı (CSR) veya Sunucu (SSR)
Yukarıda ‘da bahsettiğim gibi bu yazıda Web Uygulama Geliştirme Yöntemlerini 2 ye ayırıp bir tercih yaptığımız için oldukça basit tercihlerimiz olabiliyor du.
Günümüz dünyasında ayrımlar bu kadar kesin değil. Çünkü Web Rendering içerisine bir çok ara yöntem girdi
- SSR w/hydration
- Streaming
- Progressive Hydration
- Static Generation
- Incremental Static Generation
- Resumability
Bu durumda işler artık 0,1 olmaktan yani sadece ClientSide veya ServerSide tercih etmekten çıkarak istediğin zaman ClientSide, istediğin zaman ServerSide yazılım geliştirebilecek hale gelmeye başladı.
Bu kompleksite oluşturmuyor mu derseniz evet kesinlikle oluşturuyor. React → RSC (React Server Component) ve Concurrency ile birlikte CRA ve Vite gibi Bootstrap yapılar yerine Next, Remix ve Gatsby gibi Framework leri önermeye başlamasının nedeni de bu.
CRA (Create React App) Neden Sonlandırıldı (Bir Nevi Öldürüldü) ?
Yani özetle artık çözmeye çalıştıkları sorunlar daha kompleks, geliştiricilerin bir takım açık kaynak kodla veya kendilerinin çözdükleri problemler, Örneğin;
- Routing and Navigation
- Rendering
- Hydration & State Management
- Bundling
Artık framework içerisinde hazır çözülmüş ve belli yöntemlere uyarlanmış olarak gelmekte.
Uygulama Türleri Nedir
Aşağıdaki gruplama Ryan Carniato Patterns for Building JavaScript Websites in 2022 blog yazısından alınmıştır.
Ryan, Preact yazarı olan Joson Miller 2019'daki Application Holotypes: A Guide to Architecture Decisions yola çıkarak
HoloType, gerçek fiziksel bir örnekten yola çıkarak Web Uygulama Türlerini gruplamıştır.
- Portfolio → Personal Blog.
- Content → CNN (https://edition.cnn.com/)
- Storefront → Amazon (https://www.amazon.com/)
- Social Network → Facebook (https://www.facebook.com/)
- Immerse, Toolkit, Dashboard → Figma (https://www.figma.com/)
Yukarıdaki şekilde bu paylaşıma göre örnek Framework gruplarını koymuş tabi bunlar bu uygulama aralıkları ile tam olarak örtüşüyor diye bir kural yok ama genel olarak
Uygulama Türlerine Göre Önerilen Framework ler
Editör, Tool, Oyun, Araç, Dashboard Uygulamaları için
- Birincil Olarak (Create React App, Vite)
- İkincil Olarak (Next.JS, Remix) önerilebilir
Social Network, Facebook, Twitter, Linkedin Benzeri Uygulamalar için
- Birincil Olarak (Next.JS, Remix) önerilebilir
- İkincil Olarak (Create React App, Vite)
Amazon, Alibaba, Shopify, E-Bay vb E Ticaret Siteleri için
- Birincil Olarak (Next.JS, Remix + Hydrogen, Marko, Qwik) önerilebilir
- İkincil Olarak (Gatsby) önerilebilir
Content, CNN, Help Docs vb için
- Birincil olarak (Astro, Elder, Gatsby, Docusaurus)
- İkincil olarak (Next.JS, Jekyll )
Portfolio, Personal Blog
- Birincil olarak (Jekyll, Next.JS, Astro, Gatsby)
Sonuç
Ben kişisel olarak Ryan yaptığı tabloya katılsam da, her ne kadar uygulama türlerine veya ihtiyaçlarına göre Framework veya Bootstrap ortamı tercih etsemde piyasa girerek tek bir araç ile tüm işlerini görme yönünde.
Bu konuda da indirilme sayılarına göre
- Sadece Client Side çalışacak uygulamalar için → Vite
- Diğer tüm ortamlar ve Hybrid çözümler için → Next.JS
tercih ediliyor.
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.
Referanslar
- Patterns for Building JavaScript Websites in 2022 (Ryan Carniato)
- Application Holotypes: A Guide to Architecture Decisions (Jason Miller)
- https://remix.run/docs/en/1.17.1/pages/philosophy (Remix)
- https://qwik.builder.io/docs/concepts/resumable/ (Qwik)
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.