Kaip viskas prasidėjo ir kodėl dabar turime tris galinguosius

Prieš dešimtmetį frontend kūrimas buvo gana paprastas – jQuery, keli pluginai ir valio. Bet tada aplikacijos tapo sudėtingesnės, vartotojai norėjo greičio, interaktyvumo, o kodas virto nevaldomu spagečių kalneliu. Tada atsirado Angular (2010-aisiais kaip AngularJS), paskui Facebook’as išleido React (2013), o Vue tyliai įslinko į sceną 2014-aisiais kaip vieno žmogaus projektas.

Dabar turime tris dominuojančius žaidėjus, ir kiekvienas turi savo fanatikų armiją. Bet štai kas įdomu – jie visi sprendžia tas pačias problemas, tik skirtingais būdais. Ir čia prasideda tikrasis smagumas.

Pasirinkimas tarp šių frameworkų kartais primena religinį karą. Žmonės ginčijasi forumuose, rašo straipsnius „kodėl X yra geresnis už Y”, o iš tiesų… visi trys yra puikūs įrankiai. Klausimas ne kuris geriausias, o kuris geriausias JUMS ir jūsų projektui.

React: biblioteka, kuri nori būti frameworku

Pradėkime nuo populiariausio – React. Techniškai tai net ne frameworkas, o biblioteka. Bet praktikoje niekas to neskiria, nes React ekosistema yra tokia plati, kad gali susikurti bet kokį frameworką iš atskirų dalių.

React filosofija paprasta – viską galima aprašyti kaip komponentus, o komponentai grąžina JSX (JavaScript XML). Taip, rašysite HTML’ą JavaScript’e, ir iš pradžių tai atrodo keistai. Bet po savaitės kitaip net nebeįsivaizduosite.


function Welcome({ name }) {
return

;
}


Štai ir visas komponentas. Paprasta? Taip. Galinga? Irgi taip. React neturi nuomonės apie tai, kaip turėtumėte struktūrizuoti projektą, valdyti būseną ar maršrutizavimą. Norite Redux? Prašom. Mobx? Kodėl ne. Context API? Jau įmontuota. Zustand? Dabar madinga.

Ši laisvė yra ir privalumas, ir trūkumas. Galite sukurti bet ką, bet turite priimti šimtą sprendimų. Naujam žmogui tai gali būti pribloškiančia. Patyrusiems – laisvė.

React bendruomenė yra milžiniška. Bet kokią problemą, kurią turite, kažkas jau yra išsprendęs. NPM pilna paketų, StackOverflow pilna atsakymų, YouTube pilna tutorialų. Tai didžiulis privalumas, kai jums 2 nakties reikia išspręsti keistą bagą.

Bet yra ir kita medalio pusė – React ekosistema keičiasi greitai. Labai greitai. Class komponentai? Pasenę. Lifecycle metodai? Dabar hooks. Redux? Gal per daug. Server komponentai? Naujas standartas. Jei neatnaujinsite žinių pusmetį, jau atsiliksite.

Vue: švelnusis sukilėlis

Vue atsirado kaip Evan You projektas po to, kai jis dirbo su Angular Google’e. Jis paėmė tai, kas patiko iš Angular, pridėjo paprastumo ir sukūrė kažką nuostabaus.

Vue filosofija – progresyvumas. Galite pradėti nuo paprasto script tago HTML’e ir palaipsniui augti iki pilno SPA su Vuex, Vue Router ir visais priedais. Nereikia iš karto viską mokytis.

Matote tą gražią HTML struktūrą? Tai tikras HTML, ne JSX. Template sintaksė jaučiasi natūrali, ypač jei ateinat iš tradicinio web kūrimo. JavaScript yra atskirai, stiliai atskirai – viskas savo vietoje.

Vue dokumentacija yra legendinė. Rimtai, tai geriausiai parašyta dokumentacija, kokią esu matęs. Aiški, su pavyzdžiais, su paaiškinimais KODĖL, ne tik KAIP. Naujokams tai aukso vertės.

Composition API, pristatytas Vue 3, pakeitė žaidimo taisykles. Dabar galite rašyti kodą labai panašiai kaip React su hooks, bet išlaikant Vue paprastumą. Ir kas geriausia – Options API vis dar veikia, todėl senas kodas nesuges.

Vue bendruomenė mažesnė nei React, bet labai aktyvi ir draugiška. Kinijoje Vue yra karalius – Alibaba, Baidu, Xiaomi – visi naudoja. Vakaruose populiarumas auga, bet lėčiau.

Vienas dalykas, kuris kartais baugina įmones – Vue ilgą laiką buvo vieno žmogaus projektas. Dabar komanda išaugo, bet vis tiek nėra tokios korporacinės paramos kaip React (Facebook/Meta) ar Angular (Google).

Angular: korporacinis gigantas

Angular yra visiškai kitoks žvėris. Tai pilnas frameworkas su viskuo, ko reikia. TypeScript? Privalomas. Dependency injection? Įmontuotas. RxJS? Jau viduje. CLI? Galingas. Nuomonė apie viską? Taip, ir labai griežta.

Angular nėra pradedantiesiems. Mokymosi kreivė yra stačiausia iš visų trijų. Bet kai išmokstate, turite galingą įrankį, kuris leidžia kurti milžiniškus enterprise projektus su aiškia struktūra.


@Component({
selector: 'app-welcome',
template: '

'
})
export class WelcomeComponent {
name: string = 'Pasauli';
}


Dekoratoriai, TypeScript, klasės – viskas atrodo labai „enterprise”. Ir tai nėra blogai. Kai turite 50 developerių komandą, tokia struktūra padeda išlaikyti tvarką.

Angular CLI yra fantastiškas. Norite sukurti komponentą? `ng generate component`. Servisą? `ng generate service`. Viską galima automatizuoti, ir viskas bus sukurta pagal best practices.

RxJS integracija yra ir privalumas, ir skausmas. Observables yra galingi, bet reikalauja kitokio mąstymo. Kai suprantate reaktyvų programavimą, viskas spragtelėja. Bet iki tol – kančia.

Angular versijų politika yra aiški – kas šešis mėnesius nauja major versija. Skamba baisiai, bet praktikoje atnaujinimai yra gana sklandūs. Google palaiko senesnes versijas ilgai, todėl nereikia skubėti.

Didžiausias Angular privalumas – jis puikiai tinka dideliems projektams su daug žmonių. Kai visi turi laikytis tų pačių taisyklių, kodas tampa nuoseklesnis. Kai reikia maintaininti projektą 5 metus – Angular struktūra atsipirksta.

Našumo mūšis ir realybė

Dabar apie tai, ką visi nori žinoti – kuris greičiausias? Atsakymas: priklauso.

React su naujais server komponentais ir Suspense yra greitesnis nei bet kada. Vue 3 su Composition API ir geresnį compiler optimizacijomis taip pat šaunuolis. Angular su Ivy compiler ir lazy loading gali būti labai greitas dideliuose projektuose.

Bet štai tiesa – daugumoje projektų skirtumas nebus pastebimas. Jei jūsų aplikacija lėta, greičiausiai problema ne frameworke, o kaip jūs jį naudojate. Netinkamai optimizuoti komponentai, per daug re-renderių, dideli bundle’ai – tai tikrosios problemos.

Virtual DOM, kurį naudoja React ir Vue, yra greitas. Angular change detection su Zone.js yra kitoks požiūris, bet irgi efektyvus. Svelte (taip, žinau, ne apie jį straipsnis) išvis neturi runtime, bet tai nereiškia, kad jis visada greičiausias.

Realybėje turėtumėte galvoti apie bundle dydį. React + React DOM yra apie 40KB gzipped. Vue 3 – apie 30KB. Angular… na, jis didesnis, bet su lazy loading tai neproblema.

Svarbesnis klausimas – kaip greitai galite developinti? Kaip lengva debuginti? Kaip paprasta maintaininti? Šie dalykai turi didesnę įtaką projekto sėkmei nei kelių milisekundžių skirtumas rendering greityje.

Ekosistema ir įrankiai – kas laimi?

React ekosistema yra didžiausia. Next.js serverio pusėje, Gatsby statiniams puslapiams, React Native mobiliosioms aplikacijoms, React Native Web – viskam. Komponentų bibliotekų – šimtai. Material-UI, Ant Design, Chakra UI – pasirinkimas neribottas.

Vue turi Nuxt.js (kuris, beje, yra nuostabus), Quasar framework mobiliosioms ir desktop aplikacijoms, Vuetify komponentams. Mažiau pasirinkimų, bet kokybė aukšta. Vue ekosistema jaučiasi labiau kuruota – oficialūs įrankiai (Vue Router, Vuex/Pinia) yra gerai integruoti.

Angular ekosistema yra… Angular. Viskas jau yra viduje arba oficialiai palaikoma. Angular Material komponentams, NativeScript mobiliosioms aplikacijoms. Mažiau trečiųjų šalių bibliotekų, bet ir mažiau chaoso.

State management? React turi Redux, MobX, Zustand, Jotai, Recoil… pasirinkimas paralyžuojantis. Vue turi Vuex ir naująjį Pinia – abu oficialūs, abu gerai dokumentuoti. Angular turi NgRx (RxJS based) arba tiesiog services su RxJS.

Testing? Visi trys turi puikų palaikymą. Jest, Vitest, Cypress, Playwright – viskas veikia su visais. Angular turi įmontuotą testing setup iš dėžės, kas yra patogu.

DevTools? React DevTools yra geri, Vue DevTools yra puikūs (rimtai, labai informatyvūs), Angular DevTools (Augury) yra naudingi dideliems projektams.

Darbo rinka ir karjera

Čia tampa įdomu. Jei mokate React, darbo pasiūlymų bus daugiausia. Statistika neklauso – React dominuoja darbo skelbimų lentelėse. Ypač startupose ir tech įmonėse.

Vue populiarumas auga, bet lėčiau. Matau vis daugiau įmonių, kurios renkasi Vue naujiems projektams, ypač Europoje ir Azijoje. Bet bendras skaičius vis dar mažesnis nei React.

Angular? Dominuoja enterprise sektoriuje. Bankai, draudimo kompanijos, didelės korporacijos – jos myli Angular stabilumą ir struktūrą. Atlyginimai dažnai aukštesni, nes projektai didesni ir sudėtingesni.

Bet štai patarimas – nemokykite tik vieno. Principai tarp jų panašūs. Jei suprantate komponentų architektūrą, state management, lifecycle – pereiti iš vieno į kitą nėra sunku. Gal reikės savaitės įprasti prie sintaksės, bet tai viskas.

Aš pats pradėjau su Angular, pereinu prie React projektams, naudoju Vue asmeniniams. Kiekvienas davė skirtingų perspektyvų. Angular išmokė disciplinos, React – lankstumo, Vue – paprasto grožio.

Ką pasirinkti 2024-aisiais ir vėliau

Gerai, praktiniai patarimai. Jei kuriate naują projektą, kaip nuspręsti?

**Rinkitės React, jei:**
– Kuriate startup’ą ir norite maksimalaus talentų pasirinkimo
– Reikia mobiliosios aplikacijos (React Native)
– Mėgstate lankstumo ir norite patys spręsti, kaip daryti dalykus
– Turite komandą, kuri jau moka React
– Projektas orientuotas į JAV rinką

**Rinkitės Vue, jei:**
– Norite greitai pradėti ir turėti malonų developer experience
– Komanda mažesnė ir norite mažiau sprendimų priimti
– Kuriate vidutinio dydžio aplikaciją
– Dokumentacija ir mokymosi kreivė svarbi
– Projektas orientuotas į Aziją ar Europą

**Rinkitės Angular, jei:**
– Kuriate didelę enterprise aplikaciją
– Turite didelę komandą ir reikia griežtos struktūros
– TypeScript yra privalomas (nors dabar visi gali naudoti TS)
– Planuojate palaikyti projektą daugelį metų
– Reikia visų įrankių iš dėžės

Bet atvirai? Visi trys yra pakankamai geri beveik bet kam. Pasirinkimas dažniau priklauso nuo komandos žinių, įmonės kultūros ir asmeninių preferencijų nei nuo techninių skirtumų.

Jei mokotės – pradėkite su Vue. Jei ieškote darbo – mokykitės React. Jei norite dirbti enterprise – Angular. Bet nesustokite ties vienu – supratimas, kaip skirtingi frameworkai sprendžia tas pačias problemas, padarys jus geresniu developeriu.

Ir nepamirškite – frameworkai ateina ir eina. Prieš 10 metų visi naudojo jQuery ir Backbone. Dabar – React, Vue, Angular. Po 10 metų? Kas žino. Gal Svelte, gal Solid, gal kažkas, ko dar nėra. Svarbiausia mokytis principų, ne tik sintaksės. Tada bet koks framework bus tik įrankis, o ne kliūtis.