Teknolojiyên Frontend: Berhevkirina React, Vue.js û Angular

Hilbijartina çarçoweya frontend ya rast, yek ji biryarên herî girîng ên di pêşveçûna webê de ye. Sê çarçoweyên sereke — React, Vue.js û Angular — her yek bi avantaj û dezavantajên xwe yên taybet têne. Di vê gotarê de, em ê van sê teknolojiyên populer bi hûrgulî berhev bikin da ku hûn bikarin biryara herî baş ji bo projeya xwe bidin.

Dîroka Kurt

React

React, ji hêla Facebook (Meta) ve di sala 2013-an de wekî pirtûkxaneya JavaScript ya çavkaniya vekirî hat weşandin. Ew bi Virtual DOM û mîmariya li ser bingeha pêkhateyan navdar e. Îro, React çarçoweya frontend ya herî bikaranîn e ku ji hêla tîmên Netflix, Airbnb, Instagram û gelek pargîdaniyên din ve tê bikaranîn.

Vue.js

Vue.js, ji hêla Evan You ve di sala 2014-an de hat afirandin. Ew berê li Google di tîma AngularJS de dixebitî û xwest çarçoweyek siviktir û hêsantir biafirîne. Vue bi curve ya hînbûnê ya sivik û belgekirina xweş navdar e. Alibaba, GitLab û Nintendo Vue.js bikar tînin.

Angular

Angular, ji hêla Google ve di sala 2016-an de wekî ji nû ve nivîsandina AngularJS (2010) hat weşandin. Ew bi TypeScript hatiye nivîsandin û çarçoweyek tevahî ye ku hemû amûrên pêwîst di nav xwe de dihewîne. Google, Microsoft û Samsung Angular bikar tînin.

Berhevkirina Teknîkî

Taybetmendî	React	Vue.js	Angular
Cure	Pirtûkxane	Çarçowe (Progressive)	Çarçowe (Tevahî)
Ziman	JSX (JavaScript)	Template + JS	TypeScript
Mezinahî (gzipped)	~42 KB	~33 KB	~143 KB
Curve ya Hînbûnê	Navîn	Hêsan	Zehmet
Piştgiriya Pargîdanî	Meta (Facebook)	Civaka Çavkaniya Vekirî	Google
Birêvebirina Rewşê	Redux, Zustand, Context	Pinia, Vuex	RxJS, NgRx, Signals

Virtual DOM vs Reactive System

React: Virtual DOM

React, Virtual DOM bikar tîne — nûneriya virtual a DOM-a rastîn di bîrê de. Gava rewşa pêkhateyekê diguhere, React Virtual DOM-a nû diafirîne, wê bi ya berê re berhev dike (diffing), û tenê guherînên pêwîst li DOM-a rastîn dike (reconciliation). Ev nêzîkatî, nûvekirinên DOM-ê kêm dike û performansê baştir dike.

Vue.js: Reactivity System

Vue.js, pergala reaktîvîteyê bikar tîne ku li ser JavaScript Proxy (Vue 3) hatiye avakirin. Gava hûn daneyê diguherin, Vue bi otomatîk dizane ku kîjan pêkhateyên UI-yê divê nûve bibin. Ev nêzîkatî ji Virtual DOM-ê jî bi performansê re çêtir e ji ber ku tenê pêkhateyên bandorkirî nûve dibin.

Angular: Change Detection

Angular, mekanîzmaya Change Detection bikar tîne ku bi Zone.js re dixebite. Di her çerxa guhertinê de, Angular hemû dara pêkhateyan kontrol dike da ku guherînan bibîne. Bi stratejiya OnPush, ev pêvajo tê optimîze kirin ku tenê pêkhateyên bi input-ên guhertî kontrol bibe.

Mîmariya Pêkhateyan

React: Pêkhateyên Fonksiyonê + Hooks

import { useState, useEffect } from 'react';

function ProductList() {
  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('/api/products')
      .then(res => res.json())
      .then(data => {
        setProducts(data);
        setLoading(false);
      });
  }, []);

  if (loading) return <div>Tê barkirin...</div>;

  return (
    <ul>
      {products.map(p => (
        <li key={p.id}>{p.name} - {p.price} TL</li>
      ))}
    </ul>
  );
}

Vue.js: Composition API

<script setup>
import { ref, onMounted } from 'vue';

const products = ref([]);
const loading = ref(true);

onMounted(async () => {
  const res = await fetch('/api/products');
  products.value = await res.json();
  loading.value = false;
});
</script>

<template>
  <div v-if="loading">Tê barkirin...</div>
  <ul v-else>
    <li v-for="p in products" :key="p.id">
      {{ p.name }} - {{ p.price }} TL
    </li>
  </ul>
</template>

Angular: Components + Services

@Component({
  selector: 'app-product-list',
  template: `
    <div *ngIf="loading">Tê barkirin...</div>
    <ul *ngIf="!loading">
      <li *ngFor="let p of products">
        {{ p.name }} - {{ p.price }} TL
      </li>
    </ul>
  `
})
export class ProductListComponent implements OnInit {
  products: Product[] = [];
  loading = true;

  constructor(private productService: ProductService) {}

  ngOnInit() {
    this.productService.getProducts().subscribe(data => {
      this.products = data;
      this.loading = false;
    });
  }
}

Kengê Kîjanê Bikar Bînin?

React Bikar Bînin Ger:

• Ekosîstema mezin û civaka berfireh dixwazin
• Di hilbijartina amûran de azadî dixwazin
• Sepanên mobile jî dixwazin (React Native)
• SSR bi Next.js re dixwazin
• Di bazara kar de zêdetirî derfetên kar dixwazin

Vue.js Bikar Bînin Ger:

• Hînbûna bilez û destpêkirina hêsan dixwazin
• Projeyên piçûk-navîn hene
• Ji AngularJS an jQuery koç dikin
• Belgekirina bêhempa dixwazin
• SSR bi Nuxt.js re dixwazin

Angular Bikar Bînin Ger:

• Sepanên pargîdanî yên mezin ava dikin
• Çarçoweya standard û tevahî dixwazin
• TypeScript ji destpêkê ve dixwazin
• Dependency injection û modular architecture dixwazin
• Piştgiriya Google dixwazin

Performansa Berhevkirî

Di warê performansê de, her sê çarçowe ji bo piraniya karanînan bes in. Lêbelê, di senaryoyên taybet de cuda ne:

• Nûvekirina DOM: Vue.js ≥ React > Angular (bê OnPush)
• Dema destpêkirinê: Vue.js > React > Angular
• Bikaranîna bîrê: Vue.js ≤ React < Angular
• Mezinahiya bundle: Vue.js < React < Angular

TAGUM™ û Teknolojiyên Frontend

TAGUM™, li gorî hewcedariyên projeyê çarçoweya herî guncaw bikar tîne. Di projeyên wekî HemenBasla.Net de Next.js (React), di panelên birêvebirinê de Vue.js, û di sepanên pargîdanî de Angular bikar tîne. Tîma me ya pispor dikare ji we re alîkariyê bike da ku hûn çarçoweya herî guncaw ji bo projeya xwe hilbijêrin.

Ji bo şêwirdariya teknolojiyê, bi me re têkilî daynin.