1. ReactJS

ReactJS, Facebook (Meta) tarafından oluşturulan, bileşen tabanlı bir kütüphanedir (library). Framework değildir, çünkü React sadece “view layer” için sorumludur, geri kalan yapılar genellikle ayrı kütüphaneler eklenerek kullanılır.

• Amaca yönelik minimalizm (minimal core)

  React, oldukça sade bir yaklaşım sunar: “sadece gerekli olanlar”. Örneğin, routing (yol yönetimi) veya global state management (tüm uygulamada veri yönetimi) için ayrı “kütüphaneler” eklenir.

• Virtual DOM

  React'in en güçlü özelliklerinden biri “Virtual DOM”dur. UI değişmesi gerektiğinde, React önce sanal DOM'da hesaplama yapar, ardından gerçek DOM'da gerekli alanları günceller. Bu genellikle verimliliği artırır.

• Öğrenme eğrisi

  React nispeten kolay öğrenilir, ancak ek kütüphanelerle (örneğin, React Router, Redux, Redux Toolkit veya Context API) çalışmayı da bilmeniz gerekir.

React örnek kod:

import React from 'react';

// Küçük bir React bileşeni
function HelloWorld() {
  // return içinde birden fazla etiket döndürmek için Fragment veya <> </> kullanılır
  return (
    <>
      <h1>Hello World!</h1>
      <p>Bu bir React bileşeni örneğidir</p>
    </>
  );
}

export default HelloWorld;

2. Angular

Angular, Google tarafından geliştirilen, TypeScript tabanlı tam bir “front-end” framework'tür. Tüm gerekli özellikleri bir arada sunar, yani ayrı kütüphanelerle uğraşmanıza gerek kalmaz.

• Kesin yapı (strict structure)

  Angular, “components”, “services”, “modules” gibi önceden belirlenmiş bölümlerle net bir kurallar sistemine sahiptir.

• TypeScript

  TypeScript, JavaScript'in güçlendirilmiş bir versiyonudur (superset). Angular, bu dilde yazılır, bu da büyük projelerde daha düzenli yapı ve kesin bir tür sistemi sunar.

• Çift yönlü veri bağlama (two-way data binding)

  Angular, geleneksel olarak “two-way binding” ile tanınır. Yani model (data) ve view (UI) birbirini senkronize eder.

• Karmaşıklık

  Angular, daha çok kurumsal düzeydeki projeler için uygundur, çünkü birçok özellik bir arada sunulur. Ancak bu, karmaşıklığı da artırır.

Angular örnek kod:

import { Component } from '@angular/core';

@Component({
  selector: 'app-hello-world',
  template: `
    <!-- Şablonda çift yönlü veri bağlama örneği -->
    <h1>Hello World</h1>
    <p>Bu bir Angular bileşeni örneğidir</p>
  `
})
export class HelloWorldComponent {
  // Angular'da TypeScript kullanıyoruz
}

3. VueJS

VueJS, Evan You tarafından geliştirilen “progressive” bir framework'tür. “Progressive” denmesinin nedeni, Vue'nun küçük projelerden büyük uygulamalara kadar aşamalı olarak uygulanabilmesidir.

• Minimal çekirdek (core) + ekosistem (ecosystem)

  Vue, React gibi minimal bir çekirdeğe sahiptir, ancak resmi eklentiler (routing, global state management – Vuex veya Pinia) çok iyi entegre olmuştur.

• Kolay entegrasyon

  Vue'yu mevcut bir projeye eklemek veya sıfırdan başlamak oldukça kolaydır.

• Reaktivite (reactivity)

  Vue, veri izleme ve güncelleme işlemlerinde kendine özgü bir “reactive” sistem kullanır. React'teki Virtual DOM gibi, Vue da Virtual DOM kullanır.

• Öğrenme eğrisi

  Vue'nun söz dizimi basittir ve yarım gün içinde bile anlaşılabilir bir kullanıcı dostudur.

Vue örnek kod:

<template>
  <!-- Vue şablonunda verileri {{ }} ile çağırırız -->
  <div>
    <h1>(Hello World)</h1>
    <p>Bu bir Vue bileşeni örneğidir</p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    // data, bileşendeki bilgileri tutar
    return {
      message: 'Vue bileşeninden selam!'
    };
  }
};
</script>

<style scoped>
/* Scoped style - sadece bu bileşen içinde geçerli */
h1 {
  color: #42b983;
}
</style>

4. Hangisi Size Uygun?

• ReactJS – Hızlı öğrenilebilen ancak yüksek esneklik (flexibility) gereksinimi olan bir kütüphane arıyorsanız, React doğru bir seçim olabilir. Çok sayıda müşteri barındıran “freelance” projelerde React oldukça popülerdir.
• Angular – Kurumsal veya karmaşık projeler için çok uygundur. TypeScript, belirgin bir yapı ve yılların topluluk deneyimine sahiptir. Ancak biraz zaman ve çaba gerektirir.
• VueJS – Yeni başlayanlar için oldukça uygundur. Öğrenmesi kolaydır, ancak büyük projelere de uyum sağlayabilir. Orta ölçekli projelerden büyük “start-up”lara kadar Vue yaygın olarak kullanılmaktadır.

Sonuç

• ReactJS, bir kütüphane olarak minimal bir çekirdeğe sahiptir ve JavaScript dünyasında en yaygın olarak kullanılanlardan biridir.
• Angular, bir framework olarak tüm gerekli araçları bir arada sunar, ancak karmaşıktır ve TypeScript gerektirir.
• VueJS, sadeliğiyle başlangıç seviyesinden büyük projelere kadar gelişim sağlar.

Seçiminizi projenizin boyutu, ekibinizin deneyimi ve gelecekteki ölçeklenebilirlik (scalability) dikkate alarak yapın. Her birinin kendine özgü avantajları ve sınırlamaları vardır.