Angular vs React vs Vue 2022

Web uygulamaları oluşturmak için her ön uç geliştiricinin duyduğu üç çerçeve vardır: React, Vue.js ve Angular.

React bir UI kitaplığıdır, Angular tam teşekküllü bir ön uç çerçevedir, Vue.js ise aşamalı bir çerçevedir.

Ön uç uygulamaları oluşturmak için neredeyse birbirinin yerine kullanılabilirler, ancak yüzde 100 aynı değildirler, bu nedenle bunları karşılaştırmak ve farklılıklarını anlamak mantıklıdır.

Her çerçeve bileşen tabanlıdır ve kullanıcı arabirimi özelliklerinin hızla oluşturulmasına olanak tanır.

Bununla birlikte, hepsinin farklı bir yapısı ve mimarisi vardır - bu yüzden önce, arkalarındaki felsefeyi anlamak için mimari farklılıklarına bakacağız.

Mimari

Tepki

React, belirli bir proje yapısını zorlamaz ve aşağıdaki resmi “Merhaba Dünya” örneğinden de görebileceğiniz gibi, sadece birkaç satır kod ile React'i kullanmaya başlayabilirsiniz.

 ReactDOM.render(
  <h1>Merhaba dünya!</h1>,
  Document.getElementById('root')
);

React, belirli bir proje yapısını zorlamadan öğeleri oluşturmak için bir UI kitaplığı olarak kullanılabilir ve bu yüzden kesinlikle bir çerçeve değildir.

React Elements, React uygulamalarının en küçük yapı taşlarıdır. DOM öğelerinden daha güçlüdürler çünkü React DOM, bir şey değiştiğinde onları verimli bir şekilde güncellemeyi sağlar.

Bileşenler, uygulama boyunca kullanılacak bağımsız ve yeniden kullanılabilir parçaları tanımlayan daha büyük yapı taşlarıdır. Sahne adı verilen girdileri kabul ederler ve daha sonra kullanıcıya görüntülenen öğeler üretirler.

React, JavaScript'e dayanır, ancak çoğunlukla, aynı anda HTML ve JavaScript içeren öğeler oluşturmanıza olanak tanıyan bir sözdizimi uzantısı olan JSX (JavaScript XML) ile birleştirilir.

JSX ile oluşturduğunuz her şey React JavaScript API ile de oluşturulabilir, ancak çoğu geliştirici daha sezgisel olduğu için JSX'i tercih eder.

Vue

Vue.js çekirdek kitaplığı yalnızca Görünüm katmanına odaklanır. Aşamalı çerçeve olarak adlandırılır, çünkü işlevselliğini gerçek bir çerçeveye dönüştürmek için Vue Router veya Vuex gibi resmi ve üçüncü taraf paketlerle genişletebilirsiniz.

Vue, MVVM (Model-View-ViewModel) modeliyle sıkı bir şekilde ilişkili olmasa da, tasarımı kısmen ondan esinlenmiştir. Vue ile, uygulama verilerinin çerçevenin güncel bir Görünüm oluşturmasına izin verecek şekilde işlendiğinden emin olmak için çoğunlukla ViewModel katmanı üzerinde çalışacaksınız.

Vue'nun şablonlama sözdizimi, Görünüm bileşenleri oluşturmanıza olanak tanır ve tanıdık HTML'yi özel yönergeler ve özelliklerle birleştirir. Ham JavaScript ve JSX de desteklense de bu şablonlama sözdizimi tercih edilir.

Vue'daki bileşenler küçüktür, bağımsızdır ve uygulama boyunca yeniden kullanılabilir. .vue uzantılı Tek Dosya Bileşenleri (SFC'ler), ilgili tüm kodların tek bir dosyada bulunması için HTML, CSS ve JavaScript içerir.

SFC'ler, Vue.js projelerinde, özellikle daha büyük projelerde kodu düzenlemenin önerilen yoludur. SFC'leri çalışan JavaScript koduna aktarmak için Webpack veya Browserify gibi araçlar gerekir.

Açısal

Bu yazıda, şimdi AngularJS olarak bilinen çerçevenin ilk versiyonunu değil, Angular 2'yi tartışıyorum.

Orijinal çerçeve olan AngularJS, bir MVC (Model-View-Controller)) çerçevesidir. Ancak Angular 2'de, bileşen tabanlı olduğu için MV* kalıplarıyla kesin bir ilişki yoktur.

Angular'daki projeler Modüller, Bileşenler ve Hizmetler şeklinde yapılandırılmıştır. Her Angular uygulamasının en az bir kök bileşeni ve bir kök modülü vardır.

Angular'daki her bileşen bir Şablon, uygulama mantığını tanımlayan bir Sınıf ve MetaData (Dekoratörler) içerir. Bir bileşenin meta verileri, Angular'a görünümünü oluşturmak ve sunmak için ihtiyaç duyduğu yapı taşlarını nerede bulacağını söyler.

Açısal şablonlar HTML olarak yazılır, ancak diğer şeylerin yanı sıra reaktif veri çıktısı almak ve birden çok öğeyi işlemek için özel yönergelere sahip Angular şablon sözdizimini de içerebilir.

Angular'daki hizmetler, Components tarafından veri alma veya girişi doğrulama gibi iş mantığı görevlerini devretmek için kullanılır. Angular uygulamalarının ayrı bir parçasıdırlar. Angular, kullanımlarını zorunlu kılmasa da, uygulamaları yeniden kullanılabilecek bir dizi farklı hizmet olarak yapılandırmanız şiddetle tavsiye edilir.

Angular, TypeScript'te yerleşiktir, bu nedenle en sorunsuz deneyimi elde etmek için kullanılması önerilir, ancak düz JavaScript de desteklenir.

Popülerlik

Tepki

React, GitHub'da 160 bin yıldızla en popüler JavaScript projelerinden biridir. Facebook tarafından geliştirilmiş ve bakımı yapılmıştır ve birçok projede dahili olarak kullanılmaktadır. Ek olarak, BuiltWith'in kullanım istatistiklerine göre 2 milyondan fazla web sitesine güç veriyor.

Vue

Üç çerçeveden Vue, 176k yıldızla GitHub'da en fazla yıldıza sahip. Proje, eski Google çalışanı Evan You tarafından geliştirildi ve yönetildi. Açık kaynak topluluğunda çok güçlü, bağımsız bir proje ve BuiltWith'e göre 1 milyondan fazla web sitesi tarafından kullanılıyor.

Açısal

Angular, Google tarafından geliştirilmiştir, ancak şaşırtıcı bir şekilde Arama veya Youtube gibi bazı amiral gemisi ürünlerinde kullanılmamaktadır. Genellikle kurumsal projelerde kullanılır ve BuiltWith'in verilerine dayalı olarak 97.000'den fazla web sitesine güç sağlar.

GitHub'da 68 bin yıldızla üç çerçeve arasında en az yıldızlı olanıdır. Ancak Angular 1'den Angular 2'ye geçerken yine 59k yıldıza sahip olan AngularJS projesini sürdürmek yerine tamamen yeni bir havuz oluşturdular.

Ekosistem

Açık kaynak paketleri, uygulama geliştirirken size değerli zaman kazandırır. Sadece bu değil, aynı zamanda savaşta test edildikleri için genellikle özel yapım bileşenlerden ve paketlerden daha iyidirler.

Yeni özellikleri daha kolay oluşturmanıza yardımcı olabilecek kullanıma hazır bileşenlerin, temaların ve diğer araçların kullanılabilirliğine bakmak önemlidir.

Tepki

Birçok ön uç uygulaması, kimin oturum açtığı ve diğer kullanıcı ayarları gibi bilgileri depolamak için genel durum yönetimine güvenir.

JavaScript durum yönetimi için en popüler proje Redux'tur. Çoğu geliştirici, Redux ekibi tarafından sağlanan Redux için resmi React bağlamalarını kullanır.

React'in popülaritesi nedeniyle, girdi bileşenlerini ve kullanıma hazır öğeleri bulmak son derece kolaydır. Hepsi yalnızca bir Google veya GitHub araması uzağınızda.

React ekosistemi ayrıca, React'te yazılmış tek bir kod tabanından yerel iOS ve Android uygulamaları oluşturmanıza olanak tanıyan React Native'i de içerir. Bu nedenle React, web teknolojilerini kullanarak mobil uygulamalar oluşturmak için de harika bir seçim olabilir.

React, MongoDB, ExpressJS, React ve NodeJS içeren MERN yığınının bir parçasıdır. Bu kombinasyonla ilgili harika olan şey, tek bir dilin - JavaScript - tüm uygulamaya güç vermesidir.

Vue

Redux, Vue'da kullanılabilse de, resmi bir bağlama yoktur. Ancak bu sizi endişelendirmemeli çünkü Vuex, özellikle Vue uygulamaları için yapılmış resmi devlet yönetim kitaplığıdır. Vue ile çok iyi entegre olmanın yanı sıra, Vue'nun geliştirici araçlarını kullanarak hata ayıklamak kolaydır.

Vue'nun ilk günlerinde kullanıma hazır bileşenleri bulmak daha zordu. Topluluk büyüdüğünden, gelişiminizi hızlandırmak için kullanabileceğiniz çok çeşitli girdi bileşenleri ve gelişmiş öğeler bulunmaktadır.

Mobil uygulama geliştirme için Weex adında yeni bir proje var. Weex, Alibaba tarafından geliştirildi ve kullanıldı, ancak React Native kadar olgun ve güçlü değil. Üstelik proje daha çok Çin'de geliştirilip kullanıldığı için İngilizce dokümantasyon ve sorunlara çözüm bulmak daha zor.

Vue, Laravel ile iyi bir şekilde bütünleşir ve bu nedenle sıklıkla birlikte kullanılırlar. Laravel, yeni projelerde Vue kullanımını sağlamak için eksiksiz JavaScript ve CSS iskelesi sunar.

Açısal

Angular'da durum yönetimi için NgRx projesini kullanabilirsiniz. Redux'tan ilham almıştır, ancak özellikle Angular için yaratılmıştır.

Vue ve React'te olduğu gibi, projelerinize aktarabileceğiniz birçok kullanıma hazır bileşen vardır. Angular hakkında biraz farklı olan şey, Angular Material projesinde birçok resmi bileşenin bulunmasıdır. Bu, Google'ın Angular uygulamaları için Materyal Tasarımı bileşenleri sunan resmi bir projesidir.

NativeScript kullanarak Angular'da platformlar arası mobil uygulamalar oluşturabilirsiniz. Vue'yi de destekliyor, ancak Angular desteği daha olgun.

Angular, Angular'ı MongoDB, ExpressJS ve NodeJS ile birleştiren iyi bilinen MEAN yığınının bir parçasıdır. MERN yığınına benzer şekilde, hem ön uç hem de arka uç için tamamen JavaScript'e dayanır.

Ortak Teknolojiler

Angular, React ve Vue, PWA'lar olarak da bilinen Progressive Web Uygulamaları geliştirmek için kullanılabilir.

PWA'lar mobil uygulamalar değil, akıllı telefon kullanıcılarının ana ekranlarına kısayol olarak ekleyebilecekleri ve yerel mobil uygulamalara benzer bir görünüm ve his sunan web uygulamalarıdır.

Her çerçeve için premium şablonlar ve önceden hazırlanmış uygulamalar da bulabilirsiniz, ancak Angular ve React, Vue'dan daha fazla premium seçeneğe sahiptir.

Verim

Bir çerçeve veya kitaplık seçerken performansı da düşünmeniz gerekir.

Çoğu durumda, özellikle küçük bir proje oluşturuyorsanız, performans konusunda endişelenmenize gerek kalmayacak. Bununla birlikte, bir proje kapsam ve karmaşıklık açısından ne kadar büyürse, performans bir endişe konusu olabilir (ve olacaktır).

Web performansı söz konusu olduğunda geliştirme kalitesinin ve en iyi uygulamaları izlemenin çerçeve seçiminden daha önemli olduğunu belirtmek önemlidir.

Ancak bazı performans ölçütleri ve farklılıklar olduğundan, bunları inceleyeceğim ve her birinin geliştirme çabalarınızı nasıl etkileyebileceğini açıklayacağım.

JS Çerçeve Karşılaştırması: Angular vs React vs Vue

JS Framework Benchmark'ın sonuçları, hepsinin bir tabloda satır oluşturma veya ekleme gibi çoğu kıyaslamada oldukça iyi performans gösterdiğini gösteriyor.

Yukarıda görebileceğiniz gibi, Vue, satır seçiminde Angular ve React'ten oldukça yavaştır. Öte yandan, Angular ve React, satırları değiştirmede çok verimli değildir.

Bunlar, karşılaştırma ölçütlerinin oluşturulmasındaki tek önemli farklardır ve çoğu durumda gözle görülür sonuçlar vermez. Satırları seçmek, satırları değiştirmekten daha yaygın bir işlev olduğundan, bu kıyaslamanın Vue'yu en üst konumu paylaşan Angular ve React'in arkasında üçüncü sıraya koyduğunu söyleyebilirim.

Bellek ve önyükleme süresi söz konusu olduğunda, React ve Vue çok iyi puan alıyor ancak Angular biraz daha yavaş. Angular, temel bir betiği başlatmak için 150 ms sürebilir ve çalışması için daha fazla bellek gerektirir.

Perf Track: Angular vs React vs Vue

Google Chrome Labs tarafından sunulan Perf Track, binlerce web sitesinden üretim verilerini gösterir. Bu istatistikler başka birçok şeyden etkilenir ve sadece seçim çerçevesinden değil, sayılara da bakalım.

İlk İçerikli Boya

Vue ve React web siteleri, içeriğin kullanıcıya açılması ve sunulması daha fazla zaman alabilen Angular'a kıyasla bu metrik için daha üst sıralarda yer alır.

En Büyük İçerikli Boya

Angular ayrıca, Angular web sitelerinin yalnızca yüzde 27'si kabul edilebilir aralıkta puan alarak tam bir sayfa oluşturmada üç çerçeve arasında en yavaş olanıdır.

İlk Giriş Gecikmesi

Her üç çerçeve için, web sitelerinin yüzde 80'inden fazlası, ilk giriş gecikmesi için kabul edilebilir aralıktadır; bu, kullanıcının sayfayla etkileşime girmesine kadar ne kadar sürdüğünü gösterir.

JavaScript Baytları

En hafif uygulamalar, açık ara farkla Vue ile geliştirilenlerdir ve Vue uygulamalarının yüzde 68'i 1MB'den az JavaScript yüklemektedir. Öte yandan, Angular ve React uygulamaları daha büyük kod boyutuna sahip olma eğilimindedir.

Bu Metrikler Nasıl Kullanılır?

Bu rakamlardan bir eğilim görebilirsiniz, ancak sonuç çıkarmak için çok hızlı olmamalısınız. Örneğin son şekil için, Vue daha hafif uygulamalar geliştirmek için kullanılırken Angular daha büyük projeler için kullanılıyor olabilir.

İstatistikler, iyi bir karar vermenize yardımcı olabilir, ancak bunları bir çerçevenin diğerinden daha hızlı veya daha iyi olduğunu kanıtlamak için kullanamazsınız.

Gelişmiş özellikler

Daha gelişmiş uygulamalar için, kullanımdaki ön uç çerçeve, performansı artıran ve daha iyi ölçeklenebilen bazı görevleri gerçekleştirebilmelidir.

Anahtar olan iki teknoloji, sunucu tarafı oluşturma (SSR) ve sanallaştırmadır.

Tepki

React, resmi ReactDOMServer paketi ile sunucu tarafı oluşturmayı destekler. Sanallaştırma için React Virtualized adlı popüler bir üçüncü taraf aracı kullanabilirsiniz.

Vue

Sunucu tarafı oluşturma, resmi SSR paketiyle birlikte Vue'da da desteklenir. Ek olarak, Vue üzerine inşa edilmiş ve SSR'yi destekleyen Nuxt.js çerçevesini de kullanabilirsiniz.

Vue'daki sanallaştırma seçenekleri ne yazık ki o kadar güçlü değil. Bence Vue Virtual Scroll List, sanal kaydırma için en iyi çözüm, ancak biraz sorunlu ve React ve Angular seçenekleri kadar kararlı değil.

Açısal

Angular, SSR için resmi Angular Universal paketine ve sanal kaydırma ve büyük listelerin verimli bir şekilde oluşturulması için resmi bir bileşene sahiptir.

Öğrenme eğrisi

Bu çerçevelerin her birini öğrenmek ne kadar kolay?

Bu soruyu cevaplamak için, her çerçevenin karmaşıklığına ve getirdikleri kavramlara bakmamız gerekiyor.

Tepki

En temel kullanım durumunda, React üç çerçevenin en az karmaşık olanıdır. Bunun nedeni, yalnızca kitaplığı içe aktarmanız gerektiğidir, ardından birkaç satır kodla React uygulamanızı yazmaya başlayabilirsiniz.

Ancak Hello World örneğinin yanı sıra, çoğu React uygulaması bileşen tabanlıdır ve sayfada yalnızca birkaç öğe oluşturmaz.

Bazı geliştiricilerin React hakkında garip veya zor bulduğu bir şey, JSX öğrenmenin tek yönlü bir yol olduğu gerçeğidir. Ham JavaScript'i de kullanabilirsiniz, ancak çoğu React geliştiricisi JSX kullandığından, bunu öğrenmek neredeyse kaçınılmazdır.

Bu, React'in öğrenme eğrisini biraz daha dik hale getirebilecek ana şeydir, ancak bunun dışında, JavaScript'i bilen ve web geliştirme kavramlarını anlayan geliştiriciler için öğrenmesi kolay bir kitaplık.

Vue

Vue, React'ten biraz daha karmaşıktır. HTML'niz boyunca kullanabileceğiniz bileşenleri tanımlamak için bir kitaplık olarak kullanabilirsiniz - ancak React'e benzer şekilde, çoğu proje bu şekilde oluşturulmaz.

Çoğu Vue projesi, App.vue adında bir kök bileşene ve çeşitli şeyleri görüntülemek için bir dizi alt bileşene sahip olacaktır.

Sözdizimi söz konusu olduğunda, öğrenmeniz gereken tek yeni şey Vue'nun şablon sözdizimidir, HTML biliyorsanız kavraması çok kolaydır. Koşullu oluşturma ve liste oluşturma için v-if ve v-for gibi temel yönergeler, yeni başlayanlar için bile anlaşılması kolaydır.

Ek olarak, Vue'nun tek dosya bileşenleri, tüm ön uç kodunu tek bir yerde tutarak yeni projeleri organize etmeyi kolaylaştırır.

Vue, basitliği ve sezgisel sözdizimi nedeniyle bence öğrenmesi en kolay olanıdır.

Açısal

Angular, üçü arasında en karmaşık proje yapısına sahiptir ve tamamen gelişmiş bir ön uç çerçeve olduğu için daha fazla konsepte dayanır.

Bileşenlerin yanı sıra Angular, modülleri ve hizmetleri destekler. Kod tabanınızı, ölçeklendiğinde projenizi daha sürdürülebilir hale getirecek şekilde yazmanızı ve tasarlamanızı bekler.

Sözdizimine gelince, Angular en iyi TypeScript ile çalıştığından, bir Angular projesi oluştururken TypeScript'i bilmeniz önemlidir.

Vue'da olduğu gibi, Angular ile yeni UI özelliklerini kodlamaya başlayabilmeniz için HTML benzeri sözdizimine de aşina olmanız gerekir.

Bence, Angular ortalama bir geliştirici için öğrenmesi en zor olanıdır çünkü daha karmaşıktır ve TypeScript'e dayanır.

Gelecek tahminleri

Birçok açık kaynaklı proje ve çerçeve unutulup gidiyor ve bakımsız hale geliyor. Burada tartıştığımız çerçevelerden herhangi biri hakkında endişelenmeli misiniz?

Ne olacağını tam olarak tahmin edemesek de, devam eden geliştirme çalışmaları bu projelerin sağlıklı olduğunun iyi bir göstergesidir. Popülerlik ve büyüme de bir projenin ömrünü tahmin etmek için önemli ölçütlerdir, o yüzden her bir çerçeveye bir göz atalım.

Tepki

React v17.0 piyasaya sürüldü, ancak şaşırtıcı bir şekilde geliştiriciler için herhangi bir yeni özellik içermiyor.

En büyük değişiklik, bu yeni sürümün React'in kendisini yükseltmeyi kolaylaştırmasıdır. Tüm projeyi yükseltmek zorunda kalmadan React'in yalnızca bazı bölümlerini eski sürümden yeni sürüme yükseltebilirsiniz.

Uygulamanız yeni sürümle birlikte değişen veya kullanımdan kaldırılan özelliklere dayanıyorsa, bu işlevi canlı tutmak için eski sürümü koruyabilirsiniz. Bu güncelleme, React'i uzun vadeli harika bir seçim haline getiriyor çünkü yeni sürümlerle güncel kalmayı kolaylaştırıyor.

React, haftalık npm indirmelerinde geçen yıldan bu yana yüzde 44 büyüdü. Mutlak sayılarla, hala üç projeden en çok indirileni.

Vue

Vue 3, Eylül 2020'de piyasaya sürüldü ve Vue 2'nin büyük projelerde sahip olduğu birçok ciddi sorunu ele alıyor. React Hooks'tan ilham alan ve bileşenler arasında mantığı yeniden kullanmayı kolaylaştıran Composition API'yi sunar.

Tüm proje TypeScript'te yeniden yazılmıştır, bu da yeni Vue projelerinde TypeScript desteğini geliştirirken aynı zamanda projeyi daha sürdürülebilir hale getirir.

Vue 3, çok ihtiyaç duyulan bir yükseltmedir ve Vue'yi büyük ölçekli projeler için daha uygun hale getirir.

Vue'nin haftalık indirmeleri geçen yıldan bu yana yüzde 87 artarak Vue'yi göreceli olarak en hızlı büyüyen çerçeve haline getirdi. Vue bu büyüme oranını sürdürebilirse, yakında Angular'ı kesinlikle geçecektir.

Açısal

Angular son zamanlarda Ivy Compiler'ı tanıttı. Oluşturma sürelerini kısaltır, varlıkları optimize eder, daha hızlı test yapılmasına olanak tanır ve genellikle geliştirici deneyimini iyileştirir.

Angular ekibi, yılda iki kez, yeni özellikler içerebilen veya çerçeveyi yeni tarayıcı sürümleriyle hızlandırabilen büyük güncellemeler yayınlar.

Angular, geçen yıldan bu yana haftalık indirmelerde yaklaşık yüzde 50 büyüdü, bu nedenle hala popüler bir proje.

Çözüm

Angular, React ve Vue çok aktif geliştirme aşamasındadır. Düzenli olarak yeni sürümler yayınlarlar ve mevcut sürümleri korurlar. Her durumda mevcut destek seviyesi yüksek olduğundan, bu çerçevelerden herhangi birini güvenle kullanabilirsiniz.

Angular'ın eskisi kadar hızlı büyümediğini, Vue'nin daha yakın zamanda başlamasına rağmen çok fazla büyüdüğünü belirtmek önemlidir.

Daha önce belirtildiği gibi, uzun vadede hangi çerçevelerin alakalı kalacağını tahmin edemeyiz, ancak her projenin arkasında büyük bir topluluk vardır ve sürekli olarak gelişmektedir.

Bu makaledeki amacım, mimari farklılıkları açıklamak, her bir çerçevenin güçlü ve zayıf yanlarını yıkmak ve uygun olan her yerde bunları karşılaştırmaktı.

Yeni bir çerçeveye geçmeden önce, dikkate alınması gereken birkaç şey var.

İlk olarak, yeni bir teknoloji seçerken ekibinizin deneyimi belirleyici bir faktör olabilir.

Benzer şekilde, projeniz için geliştiricileri işe alabilmeniz için bölgenizde mevcut olan yetenekleri göz önünde bulundurmalısınız.

Son olarak, projenin kendisine gelince, karmaşıklık ve kapsam, çerçeve seçiminizi de etkileyebilir.

Tüm önemli farklılıkları göz önünde bulundurarak, hedefleriniz ve ihtiyaçlarınız için hangisinin en iyi ön uç çerçeve olduğuna karar verebileceğinizi umuyorum.