Sadece birkaç yıl önce, geliştiriciler esas olarak projeleri için Angular vs React kullanmaları gerekip gerekmediğini tartışıyorlardı. Ancak son birkaç yıl boyunca, Vue.js adında üçüncü bir framework e olan ilginin arttığını gördük.
Bu yazı sadece Angular vs React vs Vue hakkında bir rehber değil, aynı zamanda genel olarak frontend JavaScript framework lerini anlamaya yardımcı olacak bir yapı sağlamayı amaçlamaktadır.
Bölüm 1: Angular vs React vs Vue tarihçesi
Teknik detaylara girmeden önce, bu framework lerin ardında yatan hikayeden biraz bahsedelim.
Angular, Google tarafından geliştirilen bu framework ilk olarak 2010 yılında AngularJS adı ile piyasaya sürüldü. 2016 yılında ise Angular 2 versiyonunun çıkması ile beraber önemli bir değişim meydana geldi ve AngularJS ismi Angular olarak değişmesi ile beraber bu framework baştan aşağı yepyeni bir mimari ile Typescript kullanılarak tasarlandı. AngularJS günümüzde hala güncellemeler alsa da, bunun çok uzun sürmeyeceği ve 2022 yılında bu desteğin biteceği söylenmekte. Şuan ki en son kararlı sürüm Haziran 2020 de çıkan Angular 10 dur.
Vue, aynı zamanda Vue.js olarak da bilinir. 2014 yılında eski Google çalışanı Evan You tarafından geliştirilmiştir. Büyük bir şirketin desteğini almadan geliştirilen Vue son zamanlarda popülerliğinde artış yakaladı. En son kararlı sürüm Aralık 2019 da çıkan 2.6.11 sürümüdür. Şu anda Beta aşamasında olan Vue 3 ile Vue kaynak kodu baştan aşağı Typescript ile yazılmakta.
React, Facebook tarafından geliştirilen bu framework ilk olarak 2013 yılında yayınlandı. Facebook, React i ürünlerinde yaygın olarak kullanıyor (Facebook, Instagram, WhatsApp vs..). En son kararlı sürüm Mart 2020 de çıkan 16.13.1 sürümüdür.
Popülerlik 🔥
Bu framework lerin Github da aldığı yıldızlardan yola çıkarak bir grafikle anlatmaya çalışalım. Vue nin gittikçe artan popülerlik ivmesi kazandığı görülmekte.
Angular vs React vs Vue için iş piyasası 🔨
Bu konu için yazılmış bir makaleden yola çıkarak, Angular ve React için aranan geliştirici sayısı başa baş yarışıyor olarak gözükmekte, Vue ise bu konuda oldukça geride.
Bölüm 2: Topluluk ve geliştirme
Framework lerin tarihine baktıktan sonra şimdi bu framework lerin geliştirici topluluğu içerisindeki konumlarını inceleyelim.
Her bir framework için geçtiğimiz yıllarda düzenli olarak güncelleme geldiği ve sürümlerin arttığını gördük, bu da hala bu framework lere olan desteğin güncel ve yüksek olduğu anlamına geliyor.
Github üzerindeki istatistiklere bakalım: (31.07.2020)
+----------------+---------+-------+-------+
| | Angular | React | Vue |
+----------------+---------+-------+-------+
| # Watchers | 3.2k | 6.6k | 6.2k |
| # Stars | 63.8k | 153k | 169k |
| # Forks | 17.2k | 30k | 25.8k |
| # Contributors | 1,190 | 1,482 | 371 |
+----------------+---------+-------+-------+Burada dikkate almak isteyeceğiniz ek bir istatistik ise Github projesini açtığınızda karşınıza çıkan “Used By” bölümü. Bunu henüz Angular projesinde göremiyoruz aktif edilmediği için fakat bu sayı React de 4 milyonun üzerinde, Vue de ise 99 bin+ olarak gözüküyor. Bu ikisi arasında oldukça fark var ve bunun sebebi ise Vue nin daha yeni olması olarak değerlendirebiliriz.
Bölüm 3: Angular vs React vs Vue ile çalışma
Burada, genel framework boyutu, mevcut bileşenler ve öğrenme eğrisi olmak üzere birkaç önemli özellikten bahsedeceğiz.
Boyut 📏
Framework lerin varsayılan boyutları şu şekilde, (Hello World uygulaması yapılarak kontrol edilmiştir)
- Angular: 2,23MB default, 422KB gzipped
- React: 472KB default, 66,3KB gzipped
- Vue: 96,2KB default, 34,2KB gzipped
Vue nin açık ara önde olduğu görülüyor, bu da Vue kullanılarak yapılan web sitelerinin Angular ve React e göre daha hızlı yükleneceğinin işareti.
Performans 🌡️
- DOM manipülasyonları konusunda Angular, React ve Vue e göre oldukça yavaştır. React ve Vue birbirine yakın ve hızlı performans sergiler.
- DOM manipülasyonlarında Angular Incremental DOM, React ve Vue ise Virtual DOM kullanır. Angular ın Incremental DOM yöntemini tercih etme sebeplerinden biri düşük memory kullanımı. Bu durum mobil cihazlarda da performanslı uygulamalar yazımını sağlıyordu. Ama DOM diff (DOM üzerinde değişen elementlerin farkının hesaplanması) alırken hızdan kayıp oluyordu. Dolayısıyla Virtual DOM kullanan React ve Vue memory konusunda geri kalsa da (tüm DOM un memory de bir kopyası tutulduğu için) hız olarak daha iyi. Fakat günümüzde çıkan mobil cihazların donanımlarının iyileştiğini de düşünecek olursak, Virtual DOM kullanan framework ler tercih sebebi olacaktır. Daha fazlası için
- Tree-shaking ve kod çıktısının minimize edilmesi Angular, React ve Vue içerisinde standart olarak gelmektedir.
- React başka bir kütüphaneye ihtiyaç duymadan SSR (Server-side Render) desteği (ReactDOMServer) sunar.
Bileşenler (Components) 🧱
Angular, bileşenler directive olarak adlandırılır ve Angular ın belirli davranışları izleyebildiği veya ekleyebildiği DOM öğelerinin işaretçileri olarak söyleyebiliriz. Bu nedenle Angular, kullanıcı arayüzü bölümünün HTML etiketlerinin nitelikleri ve davranışlarını JavaScript kodundan ayırır. Bileşenlerin ayrı bir HTML dosyası olması, Angular ı, React ve Vue den ayıran önemli bir kısımdır.
React, kullanıcı arayüzünü (HTML) ve JavaScript kodunu birleştiren bir yapısı vardır. Yani, React bileşenleri hem bileşenin davranışını belirleyen kodları içermekle kalmaz, bileşenin arayüzde gözükecek olan HTML kısmını da oluşturmaktan sorumludur. JavaScript ve HTML aynı dosyanın içerisinde yazılır.
Vue, kullanıcı arayüzü ve davranışı yine React te olduğu gibi aynı dosya içerisindedir fakat farklı alanlarda ifade edilirler. Aynı zamanda style ile ilgili kodları da aynı dosyada yazabiliriz. <template> <script> <style> olarak ayrılmışlardır.
Yazılan benzer bir uygulamanın bu üç framework de nasıl yazıldığını, nelerin farklı olduğunu anlatan güzel bir makaleyi de incelemenizi tavsiye ediyorum.
Öğrenme zorluğu 🎓
Angular, bir projede olması gereken veya olabilecek her türlü ihtiyacı tek bir paket içerisinde sunduğu için tüm bileşenlerin/modüllerin nasıl birbiriyle etkileşim içerisinde olduğunu öğrenmek çoğu kişi için zorlu bir süreçtir. Öğrenme eğrisinin oldukça dik olduğunu söyleyebiliriz. Angular üzerinde çalışırken TypeScript ve MVC gibi kavramları öğrenmeniz gerekir.
React, sağladığı dökümantasyon ve kodun yazım kolaylığı sayesinde 1–2 saatte framework ün basit olarak nitelendirilebilecek kısımları öğrenilebilir. React, Angular gibi tüm paketleri bir arada sunmaz ve üçüncü parti kütüphanelerin kullanılmasını zorunlu kılar. Bu sayede React in çekirdeğinin nasıl çalıştığını öğrenmek kolaydır.
Vue, sağladığı özelleştirilebilme ile Angular ve React e göre öğrenmesi bir tık daha kolaydır. Sebebi ise, Angular ve React framework lerinin en iyi özelliklerinin alınarak Vue nin tasarlanmış olmasıdır.
Bölüm 4: Peki hangisi daha iyi?
Angular, framework ler arasında en olgun/oturmuş ve eski olanıdır. En küçük projeden enterprise olarak adlandırılan büyük çaplı projelere kadar rahatlıkla kullanılabilecek, her ihtiyaç için tek bir yerden çözüm sunar. Ancak, öğrenme zorluğu sebebiyle geliştiricilerin korkulu rüyası olmaya devam ediyor ve çoğu şirketin tercihi olmaktan uzak.
React, toplulukta oldukça yaygın kullanıldığı için olgun/oturmuş bir framework diyebiliriz. React için iş piyasası oldukça çeşitli ve iyi durumda. JavaScript framework lerine başlangıç için iyi bir seçenek olduğunu söyleyebiliriz. Başka framework lerle olan entegrasyonu sayesinde çoğu geliştirici için ilk tercih olmaya devam edecektir.
Vue, büyük bir şirketin (Google, Facebook) desteğini almadan şuanki bulunduğu popülerliği yakalayan tek framework. Son yıllarda yapılan geliştirmeler sayesinde Angular ve React karşısında önemli başarı yakalamıştır. Bunun sebebi olarak ise Çin de bulunan büyük şirketlerden Alibaba ve Baidu nun JavaScript framework ü olarak Vue yi tercih etmesi olduğunu düşünüyorum. Gelecekte nasıl bir ivme yakalayacağı yeni yayınlanacak olan Vue 3 sürümünden sonra daha da netlik kazanacaktır. Basit, özelleştirilebilir ve daha rahat bir kod yazma ortamı isteyenlerin tercihi olabilir.
Sonuç olarak, Angular vs React vs Vue karşılaştırmasında kesin olarak şu framework en iyisidir diyemiyoruz, çalışılan projenin iyi analiz edilip ilgili proje için hangi framework ün en iyi özellikleri sağladığını bulmak gerekmekte. Her framework ün kendine ait artıları ve eksileri mevcut diyerek bu yazıyı noktalamak istiyorum.
