JS Client Tarafında Framework Seçimi: React vs Vue vs Angular

JS kullanarak client tarafında bir uygulama geliştirmek istiyorsanız,el mahkum demek istemiyorum ama mutlaka bir framework kullanmanız gerekiyor. Neden kullanmamız gerekiyor konusunu tecrübeli yazılımcı arkadaşlar zaten biliyor, yeni yazılıma başlayan arkadaşlar ise ülkemizde bununla ilgili yazılmış çok güzel makaleler var oraya başvurabilirler, o konuya bu makale kapsamında girmek istemiyorum. Bu konuyu sonraya bırakarak ben şimdi JS Frameworkleri arasında hangi frameworkü seçmeliyiz,hangi framework uygulamamıza daha uygun, hangi framework en yaygın kullanılıyor, bu frameworklerin performansları nelerdir vs alt başlıklarını istatistiksel ve teknik veriler ışığında göstermek istiyorum.

Makaleye başlamadan önce şunuda ayrıca belirtmekte fayda var. Bu veya başka bir makalede birinin size şu frameworkü seçmelisiniz, şu kesinlikle daha iyi, bak bu olmadan uygulamanın belli kısımları eksik kalır gibi net ifadeler kullanması doğru değil burada elimizde geldiğince, kapsamlı olmasına özen göstererek, birbiriyle ortak nesnel ve öznel değerlerinin karşılaştırmasını yapıp kalan yorumlamayı size bırakmak. Bylge’nin yapımına başlarken bende üç aşağı beş yukarı aynı konuları değerlendirip bir seçim yapmıştım. Sizinde malumunuz, dünyada en iyi framework veya yazılım dili diye bir şey söz konusu değil, her framework’ün kendine ait avantajları ve dezavantajları var.

İlk önce teknik olarak analizlerine geçmeden önce. Bu frameworklerin geçmişlerini, kullanımlarını veya bir anlamda tanıtımına kısaca yazalım.

React

Facebook tarafından 2013 yılında piyasa sürüldü. Facebook’un kendi bileşenlerinde yaşamış olduğu genel sıkıntılar ile başa çıkmak için yine kendi içinde kurduğu takım tarafından oluşturuldu.Bence, çok dinamik ve kullanıcı dostu bir kullanıma sahip. React one-way data binding kullanımı sunarken, tek bir veri kaynağından dağılan bir veri iletme alt yapısına sahip. React size ayrıca SSR işlemlerinizi yapabilme imkanı da veriyor(Bkz: Next.js)

Twitter, Whatsapp, Instagram, Uber, BBC, Udemy ve Twitter React kullanan şirketler arasında yer alıyor.

Vue

2014 yılında piyasa çıktı. Angular ve React’ın aksine arkasında dev teknoloji şirketleri bulunmuyor. Google Angular takımının eski çalışanlarından Evan You tarafından geliştirildi. Kullanımı, React ve Angulara kıyasla daha kolay. Vue ile işlem yaparken hem one-way data binding hem de two-way data binding kullanabilirsiniz. Vue aynı zamanda SSR desteğide sunuyor.

Gitlab, Alibaba, Baidu ve 9Gag Vue kullanan şirketler arasında.

Angular

Google tarafından 2010 yılında piyasa sürüldü. Kullanımı bu üçü arasında bana göre en çok emek isteyeni. Emekten kastım burada diğer iki frameworke göre öğrenmesi daha fazla zaman alır , ama nihayetinde JavaScript olduğu için bu frameworklarin öğrenme süresi arasında bir haftadan fazla zaman olacağını düşünmüyorum. Angular diğer frameworklerden ayrılan bir diğer özelliği Type-Script temelli olması. Angular two-way data binding imkanı sunuyor ayrıca MVC modeline göre tasarlanmış. Model, View ve Controller ayrı olarak projenizde yer alıyor.

Google, Wix, Forbes, The Guardian ve Weather.com Angular kullanan şirketler arasında

Stackoverflow İstatistikleri

Benim en sevdiğim istatistik, yazılımla ilgili genel olarak bir şeylere karar vereceksem ve aradığım şey eğer stackoverflow istatistiklerinde yer alıyorsa mutlaka buraya bakarım.

Stackoverflow istatistiklerine göre, hangi framework’ün en çok sevilen ve en çok istenilen framework listesi aşağıdaki gibi. Bu liste yukarıda da ifade ettiğim gibi bence önemli bir liste dünya yazılım olarak yönü ne tarafa doğru konusunun adeta kısa bir özeti.

Çok fazla değil ama kısaca bir yorum yapmak gerekirse şu anda yazılımcılar framework olarak en çok JS Frameworklerini seviyorlar. Üçüde ilk 10 da kendine yer bulmuş durumda. Bu listede diğer yazılım dillerinde de yer aldığını söyleyelim.

Google Trend

Popülerlik için diğer bakacağımız liste Google Trend, aşağıdaki resimden görebileceğiniz veya buradaki linktende göreceğiniz üzere. Her ne kadar Vue çok fazla sevilen ve istenilen listesinde yer alsada google aramalarında hem react hemde angular’ın yanına fazla yaklaştığını söyleyemeyiz. Arama sorgularında, Vue dünya’nın her hangi bir ülkesinde dominant olarak görünmemesi ilerleyen dönemler için benim için çok iyi bir sinyal değil.

Peki bu frameworkler ne kadar indiriliyor ne kadar yıldızları var kısmını framework trendlerinin diğer bir yönü. Bu bilgiyi Npm trendlerden bakabiliriz yine aşağıdaki resimde görebilirsiniz, detaylı olarak incelemek istiyorsanız buradaki linke tıklayabilirsiniz

Grafikten de anlaşılacağı üzere, istatistiğe baktığımızda yıldız sayısında Vue ‘nin React’ı geçtiğini görüyoruz. Özellikle son bir senede Vue’nin ciddi bir atağı olduğunu gördük. İndirilmeler sayılarında ise React’ın çok bariz bir üstünlüğü mevcut ancak burada bir dipnot eklemek istiyorum. React indirilmelerinin diğerlerine göre çok daha fazla olması, React ekosisteminin, angular ve vue ye göre çok geniş olmasından kaynaklanıyor. Topluluk sayısındaki bu frameworkler arasındaki farklılık, örnek uygulamaların indirilme sayısına etkisini göstereceği aşikar.

Popülerliği bir kaç kaynaktan yararlanarak değerlendirdik bu konu hakkında son bir yorum yapmak gerekirse React’ın diğer JS Framework’üne göre daha popüler olduğu söylenebilir. Ancak Vue’nin github’daki yıldız sayısında React’ı geçmesi göz ardı edilecek konulardan biri değil. Artık ülkemizdede Vue kullanan büyük ve kurumsal şirket sayısı da buna bağlı olarak artmaya başladı. Bildiğim kadarıyla kariyer.net, Vue'yi kullanmaya başlamıştı. Kısa dönemde olmasada Vue’nin popülerliği artmaya devam edecek gibi gözüküyor.

Performans

Eğer uygulamanız çok fazla bileşen içeriyor, bileşenler arası çok fazla iletişime dayalı veya bir başka bir deyişle eğer uygulamanızın hacmi büyük ise ise bu durumda belkide framework seçiminde ilk dikkat etmeniz gereken şeylerden biri performans olacaktır. Component Based Framework(Bileşene Dayalı) dünyasında, performansı büyük oranda DOM yapısının nasıl güncelleneceği veya nasıl yönetileceği konusuna dayalıdır. Doküman yapısının nasıl oluşturulacağı konusunda şu anda iki yaklaşım mevcut, Virtual DOM ve Real DOM. Virtual DOM, ben buna Sentetik Doküman Yapısı demeye seviyorum Gerçek Doküman Yapısına göre daha performanslı veya bir anlamda daha hızlı şekilde tepki verir(bkz: Tree-Shaking). Neden daha hızlı çalışır konusuna girmek istemiyorum bu konuyu daha sonra değerlendirebiliriz. Çünkü gerçekten bu makalenin boyutunu aşar. Ama kısaca ana noktaya değinererek açıklamak gerekirse; Virtual DOM html dokümanında güncelleme işlemini yaparken ,sadece etkilenmiş olan veya diğer bir deyişle değişikliği uğramış olan node'larda yapar. Bundan dolayı bütün yapı tekrar render edilmek zorunda kalmaz, böyle bir optimizasyon sayfanın yüklenme sırasında en fazla performansı kaybının yer olduğu html elementleri üzerindeki operasyon süresini azaltarak müthiş bir performans kazancı sağlar.

React ve Vue, html ‘i update ederken Virtual DOM prensibini uygulayarak güncelleme işlemlerini yapıyor, Angular ise Real DOM prensibini kullanarak güncelleme işlemlerini yapıyor. Eğer projenizin hacmi büyük ve çok fazla SPA mantığına dayalı ise bu durumda React ve Vue’nin bu projelerde daha iyi performans sergilemesi muhtemel. Ancak hacim olarak çok büyük olmayan projelerde gözle görülür bir fark olacağını düşünmüyorum.

Framework Hacimleri

Projeye başlarken aklımızda tutmamız gereken diğer önemli bir konuda frameworklerin hacimleri. Projenin boyutuna göre framework seçimimizde etkili olacak. Çünkü bir framework’ün hacmi ne kadar fazla ise bir o kadar yavaş çalışmasına veya başka bir deyişle performansının bir nebzede olsun diğerlerine göre daha düşük olmasına sebep olacaktır.

Yukarıdaki verilmiş olan hacimlere bakıldığı zaman Angular’ın React ve Vue’ye göre çok daha fazla hacme sahip olduğu görülebilir. Bunun sebebi Angular’ın web uygulamasında her şeyi kendi paketi içinde vermesidir. Yani bir web uygulamasına başladığınız zaman React ve Vue ‘nin aksine 3.parti kütüphaneleri sisteminize zorunlu kalmadıkça eklemeniz gerekmiyor. Bu ne demek, mesela React client tarafında routing işlemlerini yapmak istiyorsanız mutlak react-router veya alternatiflerini kullanmanız gerekiyor ancak Angular routing işlemleri için Angular ile gelen angular/router modülü ile bu işlemi yapabilirsiniz veya test işlemleri için React’ta jest veya alternatifleri projenize dahil etmeniz gerekirken yine angularda bu paket hazır olarak angular framework’ün içinde gelmektedir. Temel hacim farkının buradan kaynaklandığını söyleyelim.

Esneklik ve İş İmkanı

Angular esneklik arayan yazılımcılar için çok uygun değil çünkü uygulamada kullanacağınız her şey Angular ile hazır olarak geliyor. React ve Vue ise 3. parti modülleri sisteminize dahil edebilmenizden dolayı çok daha esnek bir yapıya sahip. Esnekliği bir diğer tarafı bu frameworklere ne kadar üçüncü parti modüllerinin geliştirildiğidir. Böyle bakılınca, bence React' in Angular ve Vue’ye göre çok daha esnek olduğunu söyleyebiliriz.

Yukarıdaki grafikte üç framework'ün ABD'de oransal olarak iş imkanlarını göstermekte. React'ın diğer frameworklere göre büyük bir üstünlüğü söz konusu. Türkiye ye baktığımızda ise aşağıdaki gibi bir grafik mevcut Türkiye, Amerika Birleşik Devletleri'ne benzer bir grafiği var.

Bu grafik oluştururken aşağıdaki linkten bu listeye kendiniz yine bulunduğunuz döneme göre tekrar bakabilirsiniz. Detaylı olarak listeye ulaşmak isteyenlere linkedin arama kritelerlerinin linkini aşağıya bırakıyorum. Mesela, Çini baz alarak sorgu çekerseniz Vue'nin ağırlığını görebilirsiniz.

Angular React Vue

Makaleyi şöyle bir toplamak ve hangisini seçmeliyiz konusunu son bir kez değerlendirmek gerekirse makaleyi aşağıdaki gibi bir listeyle sonlandırabiliriz.

Eğer çok fazla esneklik istiyorsanız React Kullanın,

Eğer Type-Script kullanmayı seviyorsanız Angular Kullanın,

Eğer temiz bir kod yapısı ve kolay öğrenim istiyorsanız Vue kullanın,

Eğer projeniz küçük ise Vue kullanın,

Eğer projeniz orta boyutta veya büyük hacimli ise React veya Angular kullanın,

Merak edenler için Bylge üzerinde ben React > 16.8* kullanıyorum.