Angular, React, vagy Vue? Melyiket lehet érdemes használnunk?

Ma már szinte senki nem használ pure JavaScriptet frontend fejlesztéshez. Nekünk is szükségünk lehet egy egyéb opcióra-a kérdés az, hogy mire?

Sok alkalommal, mikor frontend fejlesztést bíznak ránk, döntenünk kell: milyen keretrendszert, könyvtárat lenne érdemes ehhez választanunk? Ez, nyilván függhet sok mindentől. Bizonyos esetekben talán nem is érdemes keretrendszert választani, más esetekben viszont kifejezetten praktikus, és az, hogy mit válasszunk, az nagyban függhet attól, hogy milyen projektet, munkát kellene elkészítenünk.

Illetve, talán azon gondolkodunk, hogy milyen frontend oldali keretrendszert lenne érdemes megtanulnunk, hiszen még ha backend felé hajlunk, akkor is elvárás a legtöbb helyen, hogy értsünk valamilyen szinten ehhez is, valamint sokkal több helyre keresnek manapság Full Stack fejlesztőt, mint sima Backendest, aki nem ért a böngésző oldali fejlesztéshez.

A cikkünk során leginkább a három legismertebb keretrendszert/könyvtárat fogjuk bemutatni: az Angulart, Reactot, és Vuet. 

Érdemes keretrendszert használnunk?

Sok esetben talán először az merülhet fel, hogy érdemes-e egy adott projektre keretrendszert használnunk. Sokan mondják, hogy nem érdemes a natív JavaScripttel bajlódni, valamint a jQueryvel, ugyanis sokkal több manuális munkával lehet ugyanazt az eredményt elérni, és több hibalehetőséggel. Ennek ellenére, sok alkalommal, mikor egy kisebb projekttel van dolgunk, és úgy tűnik, hogy nem lesz „többre szükség”, tehát nem fog komplexebbé válni a projekt, akkor felesleges lehet egy Laravel applikációra felrakni egy Vue.js-t, és arra még 2 hozzá gyártott Packaget, hogy mondjuk el kell küldenünk egy Ajax formot, vagy hogy megnyissunk egy Modalt. Ugyanis, ez akár 100-as nagyságrendű MB-nyi értékkel is megnövelheti az applikációnk méretét, ezen felül negatívan hathat a betöltési időre.

Összegezve: ha pár sornyi kóddal meg tudunk oldani egy adott feladatot, akkor kár lenne külön keretrendszert használni. 

Miért érdemes

Felmerülhet bennünk a kérdés, hogy milyen esetekben érdemes használni ezeket a keretrendszereket, könyvtárakat? Habár sok mindenben eltérnek, alapvetően sok olyan dolgot meg lehet velük csinálni, amit szimpla JavaScripttel sokkal nehezebb lenne kivitelezni, vagy több idő. A mai modern frontend keretrendszerek előnyei többek közt, hogy

• Könnyen használhatók
• Komponensekből állnak, melyeket újra hasznosíthatunk
• Strukturált, áttekinthető kódot biztosítanak számunkra
• Lehetőség nyílhat velük nem csupán "single-page" applikációk írására, így az "üzleti logika" jobban elkülöníthető
• Különféle állapotok jobban leírhatók vele
• Időt spórolnak meg számunkra

Történeti áttekintés

Ahhoz, hogy el tudjuk dönteni, melyiket szeretnénk megtanulni, vagy a „fő profilunkká tenni”, érdemes lehet kicsit a történeti hátterüket is ismernünk.

Angular

Angular 2010-ben jelent meg, eredetileg a Google fejlesztette. Alapvetően TypeScriptre épül, az Angular 2 verziója csupán 2016-ban jelent meg, addig csupán az AngularJS létezett, melyet ma már nem igen használnak sehol. Ha azt halljuk valakitől, hogy „Angular”, akkor alapértelmezettként az Angular 2+ verziókra érdemes gondolnunk (jelenleg már Angular 9 is létezik). 

Az Angular egy keretrendszer, és a választások „legszélesebb” spektrumát nyújtja ebből adódóan, ugyanis a két vetélytársa csupán könyvtár, azaz library.

React

A React.js-t eredetileg a Facebook fejlesztette, ebből adódóan a Facebook is azt használja, valamint az Instagram. 2013-ban jelent meg, tehát „fiatalabb” az Angularnál.

Vue

A Vue.js a „legfiatalabb” tag a csapatban, 2014-ben jelent meg. A Google egyik volt fejlesztője készítette, és annak ellenére, hogy nem olyan régóta ismert, rengeteg cég tette le mellette a voksát az utóbbi időben.

Learning Curve-tanulási görbe

Amennyiben meg szeretnénk tanulni életünkben először egy frontendes keretrendszert, akkor nem utolsó szempont az, hogy melyik az, amivel könnyebben lehet boldogulni, és rövidebb idő alatt eljutni egy olyan szintre, amivel már egy jól működő, látványos applikációt írhatunk.

A Vue.js nagy egyszerűen tanulható, és könnyen használható. Ha valaki elvégez egy Udemys kurzust, akkor néhány hét alatt eljuthat egy olyan szintre, hogy egész jó, működőképes applikációkat tud majd vele írni: egy kisebb játékot (Pl. memória kártya), és meg fogunk lepődni rajta, hogy mennyivel kevesebb munkával lehet vele ezt elérni, mint mondjuk jQueryvel.

Az Angular, és a React megtanulása alapvetően nehezebb, az Angular TypeScript alapú, amit azt jelenti, hogy ahhoz, hogy jobban tudjunk vele dolgozni, ennek az alapjait is érdemes ismernünk . Sokak szerint az Angulart a legnehezebb megtanulni, ha például megnézzük az Udemy-n levő bestseller, ilyen témájú kurzusokat, akkor láthatjuk, hogy az Angular, és a React 30-40 órányi stream anyagot ölelnek fel, míg a Vue csupán 22 órát: ami egyértelműen jelzi, hogy az utóbbi kettő nehezebb, és több tanulást is igényel.

Munkalehetőségek

Amennyiben meg szeretnénk tanulni valamit, akkor természetesen elsőként fogalmazódik meg bennünk: van-e rá kereslet. Hisz senki nem szeretne olyasmit tanulni, ami nem térül meg később.

A Vue.js nagyon jó párosítást alkot Laravellel, kifejezetten passzol ehhez, a legnépszerűbb Php oldali keretrendszerhez, ebből kifolyólag nagyon jól járhatunk vele, rengeteg cég használja, és egyik technológia sem annyira nehéz a kettő közül. Ezen felül, az utóbbi időben egyre több helyen olvasni, hogy a frontend-fejlesztői állás betöltéséhez előnyt jelent a Vue.js használata. Nem véletlen: nagyon gyorsan fejlesztik, és rengeteg nagyon jó package létezik hozzá, mint például a Bootstrap Vue.

A React, és az Angular megtanulása leginkább azoknak ajánlott, akik kifejezetten frontend fejlesztői munkát szeretnének végezni. Óriási kereslet, és igény van olyan fejlesztőkre, akik értenek hozzá, ráadásul rengeteg helyen együtt várják el a kettő használatát. Egy Angular, vagy React fejlesztő akár haza vihet bruttó 800 ezer-1 millió forintos fizetést is havi szinten.

A trendekből minta picit az rajzolódna ki, hogy a Vue népszerűsége kezdi felváltani az Angularét, míg a React változatlanul keresett.

Ezen felül, az, hogy melyiket érdemes megtanulnunk, függ a jelenlegi ismert technológiáinktól is. A Vue.js például Laravel mellé nagyon passzol, a Symfony keretrendszer mellé a Reactot szeretik nagyon használni.

Ha a konkrét "mozgásteret" elemeznénk: leginkább Angulart használnak nagy projektekre, illetve nagyvállalatoknál. Reactet inkább saját, valamint közepes méretű projektek esetén szoktak használni. A Vue.js a legkevésbé elterjedt nagy cégeknél, viszont saját projektekre, valamint startup-ok fejlesztésére kiváló lehet.

Komplexitás

A választásunkat erősen befolyásolhatja azt is, hogy milyen komplexitású projekten szeretnénk dolgozni.

Amennyiben nem kifejezetten frontend fejlesztői munkáról lenne szó, hanem csupán egy jobb böngésző oldali élményt nyújtó webáruházhoz szeretnénk valamit választani, akkor a Vue.js kifejezetten jó opció lehet.

Az Angularral, Reacttel általában a komplexebb munkákat szokták kivitelezni. Amennyiben a projektünk vélhetően ilyen irányba fog elmenni később, vagy erre reális esély lehet, érdemes lehet ezeket választanunk.

Migráció

Nagyon sok esetben problémát jelenthet, és ez nem csupán a frontend fejlesztésre igaz, mikor egyik verzióról át kellene állni egy másik verzióra. A Vue keretrendszer előnye, hogy nagyon könnyen véghez vihető vele a migráció, könnyű vele a változtatások kivitelezése. Az Angularnál ez több problémát jelenthet, az Angularra jellemző leginkább az, hogy a verziókat folyamatos jelleggel változtatgatják, és cserélik. A React ilyen téren nagyjából a kettő „között” helyezkedik el.

Méret

A projekthez történő választást befolyásolhatja a keretrendszer, könyvtár mérete is, ugyanis a betöltési idő sem egy utolsó szempont. Ezek mérete folyamatos jelleggel változik, viszont nagyjából az alábbi méretbeli jellemzőkkel bírnak:

• Angular: 500 kB
• React: 100 kB
• Vue: 80 kB

Az Angular méretbeli különbsége abból ered, hogy ez egy keretrendszer, míg a másik kettő csupán library, azaz könyvtár. Ebből adódóan az Angular rendelkezik a legszélesebb választási spektrummal lehetőségeket tekintve, habár érdemes megjegyezni, hogy az 500 kB nem elhanyagolható méret, egy weboldal átlag mérete 2 MB körül mozog. Tehát, jóval lassabb lesz a betöltési idő, ha ezt választjuk.