Vue.js vs React

Dvi ekosistemos, vienas tikslas

Jei bent kiek laiko praleidai front-end kūrimo pasaulyje, tikriausiai žinai tą jausmą – sėdi prie naujo projekto, atsidari naršyklę ir pradedi ieškoti „Vue vs React 2024”. Ir taip kiekvieną kartą. Nes atsakymas niekada nėra paprastas, o internetas pilnas straipsnių, kurie arba akivaizdžiai šališki, arba tokie abstraktūs, kad po jų perskaitymo vis tiek nežinai, ką pasirinkti.

Šiame straipsnyje pabandysiu pažiūrėti į abu framework’us kiek kitaip – ne per „kas geriau” prizmę, o per „kas tinka tau ir tavo projektui” prizmę. Nes realybėje ir Vue.js, ir React yra puikūs įrankiai. Problema tik ta, kad jie sprendžia tuos pačius uždavinius skirtingais būdais, ir tas skirtumas gali reikšti labai daug.

Architektūra ir filosofija – čia prasideda skirtumai

React techniškai nėra framework’as – tai biblioteka. Facebook’as (dabar Meta) sukūrė React kaip UI bibliotekos sprendimą, ir ši filosofija persmelkia visą ekosistemą. React daro vieną dalyką – renderina UI komponentus. Visą kitą – routing, state management, HTTP užklausas – turi pasirinkti pats. Tai suteikia neįtikėtiną lankstumą, bet kartu gali tapti galvos skausmu, ypač jei esi naujokas.

Vue.js, kurį sukūrė Evan You (buvęs Google darbuotojas), yra progresyvus framework’as. Tai reiškia, kad gali naudoti tik tiek Vue, kiek reikia – nuo paprastos reaktyvumo logikos iki pilnos SPA architektūros. Vue ateina su daugiau „iš dėžutės” – direktyvomis, computed properties, watchers ir visa reaktyvumo sistema, kuri yra integruota, o ne prilipdyta iš šono.

Praktiškai tai atrodo taip:

• React projekte turėsi pasirinkti tarp React Router, TanStack Router ar kito routing sprendimo. State management – Redux, Zustand, Jotai, Recoil… sąrašas ilgas. Kiekvienas pasirinkimas prideda konfigūracijos.
• Vue projekte Pinia (oficialus state management) ir Vue Router yra de facto standartai, gerai integruoti ir dokumentuoti. Mažiau sprendimų, daugiau kodo rašymo.

Tai nėra nei gera, nei bloga – tai tiesiog skirtinga filosofija. React pasaulyje vertinama laisvė rinktis. Vue pasaulyje – nuoseklumas ir aiškumas.

Sintaksė ir mokymosi kreivė – kur tikrai skiriasi patirtis

Čia daugelis straipsnių sako „Vue lengviau išmokti”, ir iš esmės tai tiesa, bet reikia suprasti kodėl.

Vue naudoja Single File Components (SFC) – .vue failai, kuriuose HTML, JavaScript ir CSS gyvena kartu, bet aiškiai atskirti:

<template>
  <div class="counter">
    <p>{{ count }}</p>
    <button @click="increment">+</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const count = ref(0)
const increment = () => count.value++
</script>

<style scoped>
.counter { padding: 1rem; }
</style>

Tai labai artima tradiciniam web kūrimui – HTML lieka HTML, JavaScript lieka JavaScript. Žmogui, kuris mokėsi web kūrimą klasikiniu būdu, tai atrodo natūraliai.

React naudoja JSX – JavaScript sintaksės plėtinį, kuris leidžia rašyti HTML-panašų kodą tiesiai JavaScript funkcijose:

import { useState } from 'react'

function Counter() {
  const [count, setCount] = useState(0)
  
  return (
    <div className="counter">
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  )
}

JSX iš pradžių gali atrodyti keistai – ypač className vietoj class, onClick vietoj onclick. Bet kai pripranti, tai tampa labai galinga – visas JavaScript ekosistemos galimybes gali naudoti tiesiai template’e. Sąlyginis renderinimas, sąrašai, event handlers – viskas yra tiesiog JavaScript.

Praktinis patarimas: Jei esi visiškas naujokas ir nori kuo greičiau pradėti kurti, Vue bus mažiau frustracijos. Jei jau moki JavaScript gerai ir nori gilintis į funkcinį programavimą, React konceptai bus artimesni.

Reaktyvumas – Vue’o supervalstybė

Vienas didžiausių Vue privalumų yra jo reaktyvumo sistema. Vue 3 pristatė Composition API ir naują reaktyvumo variklį, kuris yra tiesiog elegantiškas.

Vue reaktyvumas veikia automatiškai – kai keiti reaktyvų kintamąjį, UI atsinaujina. Nereikia rankiniu būdu nurodyti, kas pasikeitė. Tai veikia per JavaScript Proxy objektus:

import { reactive, computed } from 'vue'

const state = reactive({
  firstName: 'Jonas',
  lastName: 'Jonaitis',
})

const fullName = computed(() => 
  `${state.firstName} ${state.lastName}`
)

// Kai keiti state.firstName, fullName automatiškai perskaičiuojamas
state.firstName = 'Petras'

React veikia kitaip – jis naudoja explicit state updates per useState ir useReducer. Tai reiškia, kad turi pats nurodyti, kada state keičiasi, ir React nusprendžia, ką rerenderinti. Tai suteikia daugiau kontrolės, bet reikalauja daugiau disciplinos.

Vienas iš dažniausių React klaidų šaltinių – stale closures ir neteisingas useEffect dependencies array naudojimas. Vue šios problemos tiesiog nėra – reaktyvumo sistema pati seka priklausomybes.

Tačiau React turi savo kortą – React Server Components. Tai palyginti naujas konceptas, kuris leidžia renderinti komponentus serveryje be JavaScript siuntimo į klientą. Vue taip pat turi server-side rendering per Nuxt, bet RSC yra fundamentaliai kitoks požiūris į komponentų architektūrą.

Ekosistema ir darbo rinka – realybė be rožinių akinių

Čia reikia būti sąžiningam. React šiuo metu dominuoja darbo rinkoje. Jei žiūri į job listings, React pozicijų yra gerokai daugiau nei Vue. Tai faktas, ir jei tavo tikslas yra greitai rasti darbą, šis faktorius yra svarbus.

Keli skaičiai kontekstui (remiantis Stack Overflow Developer Survey ir npm statistika):

• React npm weekly downloads: ~20-25 milijonų
• Vue npm weekly downloads: ~4-5 milijonai
• React naudoja tokios kompanijos kaip Meta, Airbnb, Netflix, Uber
• Vue naudoja Alibaba, Xiaomi, GitLab, Nintendo

Bet ekosistema nėra tik darbo rinka. React ekosistema yra didesnė, bet tai reiškia ir daugiau fragmentacijos. Kiekvienai problemai yra 5 skirtingi sprendimai, ir pasirinkti teisingą gali būti sunku. Vue ekosistema yra mažesnė, bet labiau konsoliduota – oficialūs įrankiai (Pinia, Vue Router, Vite) yra aiškūs standartai.

Konkreti rekomendacija: Jei kuriesi karjerą ir nori maksimaliai padidinti darbo galimybes – mokis React. Jei kuriesi savo projektą ar dirbi mažoje komandoje ir vertini produktyvumą – Vue gali būti geresnis pasirinkimas.

Performance – kur tikrai svarbu ir kur ne

Performance diskusija apie Vue ir React dažnai yra perdėta. Abiejų framework’ų performance yra puikus realioms aplikacijoms, ir skirtumas tarp jų paprastai yra nereikšmingas lyginant su kitais faktoriais – tinklo greičiu, duomenų bazės užklausomis, neoptimizuotomis nuotraukomis.

Bet vis tiek verta suprasti, kaip jie veikia:

React naudoja Virtual DOM – tai JavaScript objektų medis, kuris reprezentuoja UI. Kai state keičiasi, React sukuria naują Virtual DOM, palygina su senu (diffing algoritmas) ir atnaujina tik tai, kas pasikeitė realiame DOM. React 18 pristatė concurrent features – startTransition, useDeferredValue – kurie leidžia prioritizuoti UI atnaujinimus.

Vue 3 taip pat naudoja Virtual DOM, bet jo reaktyvumo sistema yra tikslesnė – Vue žino tiksliai, kurie komponentai priklauso nuo kurio state, todėl rerenderina mažiau. Compile-time optimizacijos Vue 3 leidžia statiškai analizuoti templates ir generuoti efektyvesnį kodą.

Benchmarkuose Vue 3 dažnai šiek tiek lenkia React, bet tai laboratorinės sąlygos. Realiame projekte skirtumas bus nematomas, nebent kuri kažką labai specifinio – didelių sąrašų renderinimą, sudėtingas animacijas ar real-time duomenų vizualizacijas.

Praktinis patarimas: Jei performance yra kritinis reikalavimas, abu framework’ai turi savo optimizavimo įrankius. React – React.memo, useMemo, useCallback. Vue – v-memo, shallowRef, defineAsyncComponent. Svarbiau yra žinoti, kaip teisingai naudoti pasirinktą įrankį, nei kuris įrankis yra „greitesnis”.

Kada rinktis Vue, kada React – be diplomatijos

Užteks apvalių atsakymų. Čia konkrečios situacijos ir rekomendacijos:

Rinkis Vue jei:

• Esi pradedantysis arba tavo komandoje yra žmonių su tradicinio web kūrimo patirtimi (HTML/CSS/jQuery)
• Kuriate vidaus įrankius, admin panelius, dashboard’us – Vue SFC struktūra čia labai produktyvi
• Vertinate aiškią, nuoseklią dokumentaciją – Vue dokumentacija yra viena geriausių ekosistemoje
• Naudojate Nuxt – tai vienas geriausių meta-framework’ų, kuris sprendžia SSR, SSG ir file-based routing labai elegantiškai
• Komanda yra maža ir reikia greito onboarding’o naujų narių

Rinkis React jei:

• Darbo rinka ir karjeros galimybės yra prioritetas
• Kuriate didelę aplikaciją su dideliu team’u – React ekosistema turi daugiau enterprise-level sprendimų
• Naudosite Next.js – ypač jei React Server Components ir edge computing yra svarbūs
• Komanda jau moka JavaScript gerai ir nori funkcinį programavimo stilių
• Reikia React Native – jei ateityje planuojate mobile aplikaciją toje pačioje ekosistemoje

Ateitis ir kur viskas juda – spoileris: abu niekur nedingsta

Vienas iš dažniausių klausimų – „ar Vue/React mirs?” Trumpas atsakymas: ne. Bent jau artimiausiu metu.

React šiuo metu labai aktyviai dirba su React Server Components ir nauju kompiliatoriumi (React Compiler, anksčiau žinomas kaip React Forget), kuris automatiškai optimizuos memoizaciją. Tai reikštų, kad useMemo ir useCallback taps mažiau reikalingi – kompiliatorius tai darys už tave. Tai didelis žingsnis, kuris gali pakeisti, kaip rašome React kodą.

Vue aktyviai tobulina Vapor Mode – naują renderinimo strategiją, kuri atsisakys Virtual DOM ir generuos tiesioginį DOM manipuliavimo kodą. Tai potencialiai dramatiškai pagerins performance ir sumažins bundle dydį. Vue 3.5 jau pristatė keletą optimizacijų, ir ekosistema auga.

Bet yra ir platesnis kontekstas – Svelte, Solid.js, Qwik ir kiti framework’ai spaudžia tiek Vue, tiek React iš šono. Solid.js ypač įdomus, nes naudoja tikrą reaktyvumą be Virtual DOM ir yra labai greitas. Tačiau šie framework’ai kol kas yra nišiniai, ir jų ekosistemos nėra palyginamos su React ar Vue.

Taip pat verta paminėti TypeScript integraciją. Abiejų framework’ų TypeScript palaikymas yra puikus, bet Vue 3 buvo perrašytas TypeScript kalba, ir tipų sistema yra labai gerai integruota. React su TypeScript taip pat veikia puikiai, bet reikia šiek tiek daugiau konfigūracijos ir tipų anotacijų.

Galiausiai, jei tektų duoti vieną patarimą – neskirk per daug laiko šiam pasirinkimui. Abi technologijos yra brandžios, gerai palaikomos ir leidžia kurti puikias aplikacijas. Svarbiau yra giliai išmokti vieną, suprasti jos principus, ir tada, jei reikės, pereiti prie kitos bus daug lengviau. Reaktyvumo konceptai, komponentų architektūra, state management principai – tai universalios žinios, kurios perkeliamos. Laikas, praleistas mokantis Vue ar React, niekada nėra švaistomas – tai investicija į supratimą, kaip modernios web aplikacijos veikia.