Photo by Ioann-Mark Kuznietsov on Unsplash

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 ?

Onur Dayıbaşı

Published in

Frontend Development With JS

4 min readJun 25, 2023

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

https://twitter.com/addyosmani/status/1503082964204199939?s=20&t=XqwCfI10AvhMHNn6ytkx6Q

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.