Angular, React ve Vue Framework’lerinin Karşılaştırılması

Single Page Application Nedir?

Angular, React ve Vue Framework’leri Single Page Application (SPA) Web Framework’leridir yani tek sayfa uygulamalar diye isimlendirebiliriz.

SPA’lar web tarayıcısı üzerinde çalışır. SPA uygulamaları çalışırken normal web sayfalarında olduÄŸu gibi sayfalar arası geçiÅŸte yeni bir sayfa yüklenmez, yani sayfalar arası geçiÅŸ yaparken uygulama yenilenmez. Bu tür web uygulamaları günümüzde oldukça yaygın olarak kullanılmaktadır. Örnek olarak Gmail, Google Maps, Facebook birer SPA uygulamalarıdır.

SPA’ların asıl amacı son kullanıcının sayfa yenilemeleri, sayfaların yüklenmesi sırasında bekleme zorunda olma gibi durumlarını ortadan kaldırarak kullanıcılarda daha natürel bir web uygulamasında dolaÅŸma hissiyatı oluÅŸturmaktır. SPA uygulamalar bu etkiyi JavaScript teknolojisi sayesinde yapabiliyorlar.

SPA uygulamaları biçimlendirmeyi ve verileri bağımsız olarak sayfa arka planında iÅŸler ve sayfaları doÄŸrudan web tarayıcıda gösterir. Bunu Angular, React ve Vue gibi geliÅŸmiÅŸ JavaScript Framework’leri sayesinde yapabiliriz.

SPA’lar yani tek sayfalı siteler, kullanıcıyı içeriÄŸin basit, kolay ve uygulanabilir bir ÅŸekilde sunulduÄŸu tek ve rahat bir web alanında tutmaya yardımcı olur.

Popüler Single Page Application Web Framework’leri

1. Angular: Angular, Google tarafından geliÅŸtirilen; sunucu tarafında deÄŸil, son kullanıcı tarafında, web tarayıcısı üzerinde çalışan bir JavaScript Framework’üdür. Angular’ın ÅŸu anki mevcut son sürümü Angular 10’dur. Angular, HTML sayfalarını yenilemek için sürekli sunucuyla istek alışveriÅŸi yapmak yerine web sayfalarını dinamik olarak arka planda verimli bir ÅŸekilde yeniler ve uygulamayı web tarayıcısında gösterir.
2. React: React, Facebook tarafından geliÅŸtirilmiÅŸ, web sayfasını bileÅŸenlere ayırıp sonrasında bu bileÅŸenler üzerinde ayrı ayrı iÅŸlem yaparak web ekranında sunmaya odaklanmış bir JavaScript kütüphanesidir. React’ın mevcut son sürümü React 16’dır.
3. js: Vue, Angular ve React’ın bazı özelliklerini içerisinde barındıran, açık kaynak olarak geliÅŸtirilmiÅŸ bir JavaScript Framework’üdür. Vue, eski Google çalışanı olan Evan You’nun baÅŸlattığı bir fikirle ortaya çıkmış bir projedir. Vue’nun ÅŸu anki en güncel sürümü Vue.js 3’tür.

Dil Yapısı

Angular, TypeScript yazılım dili ile HTML ve TypeScript mantığını bileÅŸenlere ayırır. React ise JavaScript ve JSX teknolojisini kullanır. JSX teknolojisini bir nevi HTML ile JavaScript’in birleÅŸimidir diyebiliriz. Vue ise yalın JavaScript dilini kullanır, React’ın tam tersine Vue, HTML ve JavaScript mantığını birbirinden ayırır.

OluÅŸum Felseleleri

1. Angular

Angular, kesinlikle bu üçünün arasındaki en kapsamlı Framework’tür. Hatta bazen bir Framework yerine platform olarak da adlandırılmaktadır.

Neden?

Çünkü Angular birçok ÅŸey için destek içerir. Kullanıcı arabirimini kontrol etme, kullanıcı girdisine tepki verme, formlarda kullanıcı giriÅŸini doÄŸrulama, yönlendirme, Ajax Http istekleri gönderen durum yönetimi, çevrimdışı destek ve PWA yetenekleri saÄŸlama, test etme, uygulamanızı oluÅŸturma, birden çok uygulamayı yönetme ve onları birbirine baÄŸlamak gibi birçok imkanı saÄŸlamaktadır.

Tüm Framework’lerin amacı, bir geliÅŸtirici olarak sizin için reaktif, karmaşık kullanıcı arayüzleri oluÅŸturmanızı kolaylaÅŸtırmaktır. Angular bunun için size tüm araçları saÄŸlamaktadır. Üzerinde çalıştığınız uygulamalarda ihtiyaç duyabileceÄŸiniz herhangi bir açıdan size yardımcı olabilmek için Angular birçok özelliÄŸi bünyesinde barındırır.

Ek olarak, Angular’ın projeleri oluÅŸturmanıza ve yönetmenize, bunları güncel tutmanıza, yardımcı olan resmi bir CLI’ı vardır.

Angular’ın temelinde tamamen yeniden kullanılabilir kullanıcı arabirimi bileÅŸenleri oluÅŸturmak vardır. Daha sonra Angular ile bu bileÅŸenleri kontrol edersiniz ve bu bileÅŸenleri diÄŸer bileÅŸenlerle birleÅŸtirerek bu Angular kontrollü bileÅŸenlerden tam bir kullanıcı arabirimi oluÅŸturabilirsiniz

Angular, UI yetenekleri, durum yönetimi, yönlendirme, form iÅŸleme, bir HTTP rotalama gibi birçok faydalı araçları bünyesinde barındırır.

2. React

React, Angular’dan tamamen farklıdır.

Angular’ın size her ÅŸeyi verdiÄŸi yerde, React, size yalnızca içeriÄŸi DOM’a iÅŸlemek ve daha sonra içeriÄŸinizi verimli bir ÅŸekilde kontrol etmek için bir kütüphane sunmaktadır. React aynı zamanda tamamen bileÅŸenlerle ve bileÅŸenlerden kullanıcı arayüzleri oluÅŸturmakla ilgilidir. Ayrıca, neyin hangi koÅŸullarda hangi ÅŸekilde ekranda gösterilmesi gerektiÄŸini tanımlamanız için ihtiyacınız olan tüm araçları da barındırmaktadır.

Ancak React, yerleÅŸik form doÄŸrulama desteÄŸi içermez, rotalama mekanizması barındırmaz ve kendi Http istemcisini sunucuya göndermez. React, olası tüm durumlar için olmasa da yerleÅŸik bazı durum yönetimi desteÄŸine sahiptir. Ayrıca baÅŸka herhangi ekstra bir özellikle birlikte gelmez ve bu bakımdan Angular’ın karşısında kesinlikle daha zayıf kalmaktadır.

3. Vue (Vue.js)

Vue, React ve Angular arasında yer alan bir kütüphanedir. Çünkü Vue, Angular kadar büyük bir kütüphane deÄŸildir ama kesinlikle React’e göre Vue daha fazla özellik barındırmakta. Vue size yerleÅŸik durum yönetimi de saÄŸlar ve ayrıca yerleÅŸik bir yönlendiriciyle birlikte çalışır. Bununla birlikte Vue, form doÄŸrulamasını veya Http istemci iÅŸlevlerini içermez.

Tıpkı Angular ve React gibi, Vue’nun temelinde de yeniden kullanılabilir bileÅŸenleri birleÅŸtirerek kullanıcı arayüzleri oluÅŸturma fikri vardır.

Angular, React ve Vue Framework’lerin Evriminin KarşılaÅŸtırılması

Her üç Framework de aktif geliÅŸtirme aÅŸamasındadır. Bu aynı zamanda zamanla deÄŸiÅŸtikleri anlamına gelir yani bu Framework’lere yeni özellikler eklenir, bazı özellikler kullanımdan kaldırılır ve sonunda kaldırılır ve Framework’lerin yeni modelleri ortaya çıkar.

• Angular

Angular için her altı ayda bir yeni bir ana sürüm yayınlanır. Bu, Angular’ın her altı ayda bir deÄŸiÅŸtiÄŸi anlamına gelmemektedir. Bu sadece altı ayda bir yeni özellikler ve kullanımdan kaldırılmış bazı özellikler olabileceÄŸi anlamına gelir. ÖrneÄŸin Angular 9’da Angular’ın dahili çalışma zamanını tamamen deÄŸiÅŸtirilmiÅŸtir ama yine de önceki sürümlerde yazılmış kod üzerinde hiçbir etkisi yoktu. Bu tip güncellemelerle Angular çok daha küçük ve daha hızlı paketlere sahiplik kazanmıştır.

• React

React.js katı bir geliÅŸtirme programı izlemiyor ancak yeni sürümlerin de yayınlandığını görülebilmektedir. React 16 uzun zamandır son sürüm olarak yayında ama yayınlanan ara sürümlerle de yani 16.1, 16.2 gibi sürümler ile birlikte React, bazı ciddi yeni özellikler kazanmıştır. ÖrneÄŸin, React 16.8 ile birlikte durum bilgisi olan React bileÅŸenlerini yazma ÅŸeklinizi deÄŸiÅŸtirmenize olanak tanıyan “React Hooks” bileÅŸeni eklenmiÅŸtir.

• Vue

Vue da aktif geliÅŸtirme aÅŸamasındadır. Vue 2’nin ilk sürümünden bu yana tanıtılan bazı yeni özellikler oldu ve hatta ÅŸu anda Vue 3 yayınlanmıştır. Vue 3 kısmen geriye dönük uyum saÄŸlayabilecek ve genellikle Vue 2 ile aynı felsefeyi benimsemiÅŸ halde çalışmaktadır. Aynı zamanda Vue 3 ile Vue’ya bazı yeni özellikler de eklenmiÅŸtir.

ÖÄŸrenme Kolaylığı

• Angular: Angular’ın tam bileÅŸenli bir Framework olduÄŸu düÅŸünüldüÄŸünde Angular’ı öÄŸrenmek biraz zorludur ve Angular’da uzmanlaÅŸmak, TypeScript ve MVC gibi iliÅŸkili kavramları öÄŸrenmenizi gerektirir. Angular’ı öÄŸrenmek zaman alsa da Angular’ı öÄŸrenirken Front-End sisteminin nasıl çalıştığını daha iyi kavrayacağınızdan dolayı bu zorluÄŸu bir yatırım olarak da görebilirsiniz.
• React: React, yaklaşık bir saat içinde React’i anlamanıza yardımcı olacak bir BaÅŸlarken kılavuzu sunar. React’ın dokümantasyonu eksiksizdir, ayrıca Stack Overflow’da React hakkındaki yaygın sorunlara halihazırda bolca çözümler bulabilirsiniz. React tam olarak bir Framework deÄŸildir ve React’ta geliÅŸmiÅŸ özellikleri kullanabilmek için üçüncü parti kütüphanelerin kullanılması ÅŸarttır. Bu durum React’ın öÄŸrenilmesinin zor olmadığını, ancak öÄŸrenme zorluÄŸu olarak istediÄŸiniz ek iÅŸlevsellik için izlediÄŸiniz yola baÄŸlıdır.
• Vue: Vue ise React ve Angular’a kıyasla daha ileri seviyede özelleÅŸtirilebilirlik saÄŸlar ve bu nedenle Angular ve React’ten daha kolay öÄŸrenilir. Ayrıca Vue, bileÅŸenlerin kullanımı gibi iÅŸlevsellikleri açısından Angular ve React ile örtüÅŸmektedir. Bu nedenle, ikisinden birinden Vue’ye geçiÅŸ kolay bir seçenektir. Bununla birlikte, Vue’nun basitliÄŸi ve esnekliÄŸinin bir kötü yanı vardır. Vue kalitesiz yapıdaki kodlara izin verir, bu ise debug iÅŸlemini ve testleri zorlaÅŸtırır.

Performans

Performans son derece önemli bir kavramdır. Ancak performans kavramına çok fazla vurgu yapmak ya da yanlış ölçütleri çalıştırmak ve dolayısıyla yanlış sonuçlar çıkarmak da olasıdır. Yani A Framework’ü 10.000 satırlık <div> satırını B Framework’ünden daha hızlı iÅŸlediÄŸi için, A Framework’ünün her zaman B’den daha iyi olduÄŸu anlamına gelmemektedir.

Ayrıca kıyaslamalar için kullanılabilecek farklı performans türleri de vardır:

1. BaÅŸlangıç performansı: Web uygulamanızın yüklenme hızına ve uygulamanızın etkileÅŸimli hale geldiÄŸi sürenin kıyaslanmasıyla baÅŸlangıç performansı sonucu elde edilebilir.
2. Çalışma zamanı performansı: Uygulamanız çalışır duruma geldikten sonra ne kadar hızlı çalıştığının incelenmesiyle çalışma zamanı performansı sonucu elde edilebilir.

• BaÅŸlangıç performansı, öncelikle oluÅŸturulan kod paketinin boyutundan, yani kendi kodunuzdan ve Framework’ün birleÅŸtirdiÄŸi kodlardan etkilenir.
• Çalışma zamanı performansı, öncelikle seçilen Framework’ün dahili öÄŸelerinden ve Framework’ün DOM manipülasyonu ve güncellemesine nasıl yaklaÅŸtığından etkilenir.

BaÅŸlangıç Performansı

Genel paket boyutu, yani oluÅŸturulan ve dağıtım sunucunuza yüklenen kod, bu noktada en önemli olan ÅŸeydir.

Genellikle üç ana Framework’ün paket boyutlarını karşılaÅŸtırmak için temel bir “Merhaba Dünya” uygulaması ele alınır.

Ama gerçek kullanımda sadece “Merhaba Dünya” uygulaması oluÅŸturulmadığı için bu yaklaşım aslında gerçeÄŸe yakın deÄŸildir. “Merhaba Dünya” kıyaslaması, Framework’ün boyutu hakkında temel bir fikir verirken, uygulamaların ne kadar büyüklükte olacağını belirtemez.

“Merhaba Dünya” karşılaÅŸtırmalarında Angular, Vue ve React uygulamalarından biraz daha büyük olma eÄŸilimindedir. Vue ise React’ten biraz daha küçüktür. Yalnız Angular’ın burada çok ilerleme kaydettiÄŸini ve Angular ekibinin kod paketlerinin boyutunu büyük ölçüde küçültme üzerine oldukça yoÄŸun çalışmalar yapmaktalar.

Daha büyük uygulamalar için üç Framework de kabaca eÅŸit büyüklükte kod paketleri üretmelidir, üç Framework’ün de desteklediÄŸi “Geç Yükleme” gibi optimizasyon tekniklerini kullandığınızı varsayarsak.

Çalışma Zamanı Performansı

Aslında burada önemli olan kullanıcı deneyimidir. Bir sayfa son kullanıcıya hızlı çalışıyor hissi veriyorsa teknik olarak bir Framework’ün daha yavaÅŸ olması bu konuda pek de önemli deÄŸildir.

Benimsenme ve Popülerlik KarşılaÅŸtırması

Bir Framework’ ün popülaritesi genelde önemlidir diyebiliriz. YaÅŸantımızda da sıklıkla diÄŸer insanların sevdiÄŸi ÅŸeyleri seçme eÄŸilimindeyiz.

Programlama Framework’leri ve kütüphaneler söz konusu olduÄŸunda yazılım geliÅŸtiricileri arasında popüler olan teknolojiyi tercih etmek için iyi nedenler vardır. Bunu açıklamak gerekirse:

1. Popüler Framework’lerin ortadan kalkma olasılığı kullanım oranı az olan Framework’lere kıyasla daha düÅŸüktür
2. Birçok yazılım geliÅŸtiricilerden oluÅŸan topluluklar, popüler Framework’lerin eksik yanlarını tamamlayıcı kütüphaneler ve araçlar üretmektedir.
3. Popüler kütüphaneler ve Framework’ler hakkında çok daha fazla yardım bulabilirsiniz.
4. Popüler Framework’lerle alakalı iÅŸ bulmak daha kolaydır çünkü birçok ÅŸirket genellikle popüler çözümlere yönelmektedir.

Bu durum geriye sadece bir soru bırakıyor: Bir Framework’ün popülerliÄŸini nasıl ölçülebilir?

Bu sorunun cevabı için ÅŸu iki ana kriteri inceleyebiliriz:

1. Google Trendleri

Google trendleri bize React, Angular ve Vue Framework’lerinin popülerlik durumu hakkında net bir resim ortaya çıkartmakta.

Vue ve React neredeyse eÅŸit derecede popülerdir diyebiliriz, ayrıca ikisi de Angular’a kıyasla biraz daha popülerdir.

Alttaki grafik incelendiÄŸinde Vue’nin özellikle Çin’de popüler olduÄŸu görülebilmektedir.

Arama ABD ile sınırlandığında ise ÅŸu ÅŸekilde bir grafik görülmektedir:

GörüldüÄŸü gibi önceki görsele kıyasla oldukça farklı bir sonuç görülmekte. Bu grafikte Vue ve Angular’ın birbirlerine eÅŸit derecede popüler olması ve React bunların hemen üstünde olması sebebiyle React’ın ABD’de daha popüler olduÄŸu söylenebilir.

Ancak buradaki olay ÅŸudur. Bu grafikler, Framework’lerin yalnızca Google arama motoru üzerinden aratılma sıklığını göstermektedir. Gerçek kullanım hakkında bu grafikleri inceleyerek çok fazla ÅŸey söylenemez, özellikle de büyük, kurumsal boyuttaki uygulamaları düÅŸündüÄŸümüzde.

Yine de her üç Framework’e de oldukça yoÄŸun ilgi olduÄŸunu söyleyebiliriz. Her üç Framework de oldukça güçlüdür ve ayrıca bu Framework’lere destek sunan büyük topluluklar bulunmaktadır.

2. npm Paket Ä°ndirme Verileri

Üstte görülen grafik, Google Trends grafiÄŸini, en azından ABD’deki grafiÄŸi doÄŸrular gibi bir sonuç vermektedir. React’ın npm indirme grafiÄŸine baktığımızda birbirleriyle aynı seviyede bulunan Angular ve Vue’dan kesinlikle biraz daha ileride olduÄŸu görülmektedir.

Bunun için bir ÅŸeyi bilmeniz gerekir: Angular ayrıca önbelleÄŸe alınmış paketleri kurumsal müÅŸterilere dağıtmaktadır, yani Angular’ın kurumsal müÅŸteriler npm indirmelerine dahil edilmemektedir. Ve Angular’ın halihazırda birçok sayıda kurumsal müÅŸterisi var. Bu nedenle Angular’ın asıl indirilme sayısı muhtemelen bu grafikte görüldüÄŸünden biraz daha yüksektir. Yine de React’in diÄŸer iki Framework’ten daha fazla indirildiÄŸini söylemek de doÄŸrudur. Aslında, öyle görünüyor ki sadece küçük bir farkla da olsa, React ÅŸu anda en popüler Framework gibi görünmektedir.

PWA Nedir?

Progressive Web Application (PWA) yani dilimize çevirirsek Ä°lerici Web Uygulamaları ürünleri, kullanım sırasında kullanıcıya yazılımın sanki native dille yazılmış gibi sorunsuz ve akıcı çalışan uygulama hissiyatı vermeyi amaçlamış ve bu yönde bazı geliÅŸmiÅŸ özelliklere sahip olan web uygulamaları PWA olarak tanımlanmaktadır.

PWA’lar web sitelerini, tıpkı uygulama marketlerden indirilebilen uygulamalar gibi mobil cihazlara yüklenebilmesine olanak saÄŸlamaktadır. PWA ayrıca uygulama çalıştırıldığında hızlıca yüklenebilmesine; çevrimdışı çalışabilmesine, mobil cihaza push bildirimler gönderilebilmesine, arkaplanda uygulamanın güncellenebilmesine, kamera, mikrofon, cihaz dosyaları cihaz donanımına ve özelliklerine eriÅŸim saÄŸlayabilme imkanı sunmaktadır.

PWA’lar aÄŸ baÄŸlantısı yavaÅŸ olduÄŸunda ve hatta cihaz çevrimdışı iken çalışabilecek halde tasarlanmış web uygulamalarıdır. Böylece PWA’lar, kullanıcının internete baÄŸlı olmasını gerektirmeden uygulamanın çevrimdışı halde de çalışabilmesine olanak saÄŸlar. PWA, uygulamaların görsel içerikleri için verileri önbelleÄŸe alır, bu ÅŸekilde PWA olarak geliÅŸtirilmiÅŸ bir uygulama, bir sunucu ile baÄŸlantı olmadan, yani cihaz çevrimdışı iken de çalışabilmesi fikrinin ürünüdür.

Angular, React ve Vue’da PWA Uygulamaları

1. Angular: Angular için PWA desteÄŸi ilk olarak 2017 yılında Angular 5 sürümüyle gelmiÅŸtir. Angular’a PWA desteÄŸi, 5. sürümle birlikte gelen “@angular/service-worker” modülünün sunduÄŸu Angular Service Worker script’iyle saÄŸlanmaktadır. Bu script, PWA uygulamasını baÅŸtan yazmak yerine JSON ayarlarını kullanarak bir PWA uygulaması oluÅŸturmaya olanak saÄŸlar.

Ä°lk baÅŸlarda Angular, karmaşık yapılı dinamik uygulamalara devamlılığı saÄŸlayamamaktaydı, ancak bu hata son sürümlerde düzeltilmiÅŸtir. Bugün itibariyle, Angular ile oluÅŸturulan uygulamalar, diÄŸer önde gelen Framework’ler ile oluÅŸturulan uygulamalardan performans açısından daha düÅŸük deÄŸildir.

2. React: React ile birlikte NextJS ve GatsbyJS gibi ek JavaScript kütüphanelerinin kullanılması, sunucu tarafında ve kullanıcı tarafında iÅŸlenmiÅŸ sayfalar, API etkileÅŸimleri ve rotalama yani yönlendirme oluÅŸturmaya olanak tanır.

React’in mükemmel bir desteÄŸi, dokümantasyonu, geniÅŸ bir çevrimiçi topluluÄŸu ve ayrıca Facebook, Instagram, WhatsApp ve Twitter Light dahil birçok önemli projesi vardır. React Native ile de yakından iliÅŸkili olan React; web, PWA veya native hissiyatı veren uygulamalar oluÅŸturmak, çoklu cihaz ve platformlar arası kullanıcı deneyimi saÄŸlamak için kullanılan Framework’lerden biridir.

3. Vue: React ve Angular haricinde Vue de PWA uygulama geliÅŸtirmek için kullanılan en popüler JavaScript Framework’lerinden birisidir. Vue ile PWA uygulama oluÅŸturmak Vue CLI 3 arayüzüyle oldukça basittir.

Yazının orijinaline aşağıdaki linkten ulaşabilirsiniz.

Angular, React ve Vue Framework’lerinin KarşılaÅŸtırılması

Yazar : BilgiYazan Eğitim Kurumları