React, Angular vai Vue.js?

Fronttiteknologioiden osalta oma polkuni on ollut: pelkkä JavaScript > jQuery > Knockout > React > Vue.js > Angular (5).
Olen nyt siis tehnyt kolmella tämän hetken suosituimmalla (React, Angular, Vue.js) vaihtoehdolla tarpeeksi suurta ja kompleksista, että voin sanoa jotain näiden eduista ja haitoista ns. "oikeassa" käytössä. Kaikilla pystyy kyllä toteuttamaan 99% web-sovelluksista ja suorituskykytesteissä erot ovat olleet merkityksettömiä. Perusteiden oppimisessa ei ollut kauheasti eroa. Ammattitaitoisen ohjelmoijan, jolla on jo HTML ja JavaScript hallussa, pitäisi oppia minkä tahansa perusteet päivässä tai parissa. Suurin ero kirjastojen/frameworkien välillä tiivistyy tuottavuuteen. Sen taas voidaan ajatella koostuvan useasta osa-alueesta; kirjastot, kehitysnopeus, debuggaus, ylläpidettävyys jne. Vaikka näiden osa-alueiden paremmuudessa on eroja, yksi on hyvä kaikissa.

TLDR;

Vue.js:llä homma olisi jo valmis ;)

Oppimisnopeus

Vue ja Angular käyttävät perinteisempää koodin lisäystä HTML:n sekaan erikoisattribuuteilla (esim. v-if tai [ngClass]) ja mallin (data, metodit,...) erottelua UIsta. Reactissa asetelma on toisinpäin; JavaScriptin sekaan laitetaan UI-komponentteja. En ole kokenut kummankaan ideologian sisäistämisessä ongelmia. Ohjelmointitaustasta riippuen toinen saattaa tuntua luontevammalta, mutta toisenkin tyylin sisäistämisessä puhutaan korkeintaan parista päivästä. Angularin pakotetun arkkitehtuurin ja moduulien sisäistäminen vaatii oman aikansa, mutta jos kyseessä on "hello worldiä" laajempi sovellus, pitää vastaavat asiat opetetella myös Reactissa ja Vuessa.

Kirjastot

Vaikka perus SPA-toiminnallisuus tulee Angularissa valmiina, löytyy Reactille ja Vuelle starter pack/cli, joilla saa hyvät palikat (router, lokalisointi, tilanhallinta, http) alkuun pääsemiseksi. Kaikkiin löytyy myös kirjastoja yleisiin tarpeisiin, kuten ajan/päivämäärän valinta, graafit, taulukot, lokalisointi, Bootstrap-"wrapperit". React on eniten käytössä, joten siihen myös löytyy eniten kirjastoja. Tosiasia on kuitenkin se, että eri tarpeisiin löytyy joka alustalle yksi tai kaksi suosittua vaihtoehtoa ja enemmän tai vähemmän niitä pienen suosion kirjastoja. Kirjastojen osalta eroa ei kauheasti synny, pl. tilanteet, joissa jokin tietty kirjasto säästää todella paljon aikaa eikä sitä löydy muille alustoille.

Kehitysnopeus

Reactin ongelma kehitysnopeudessa on suuri boilerplate-koodin määrä. Tämä johtuu siitä, että data on sidottu vain tilasta UI:hin päin (one-way binding). Tällöin komponentit täyttyvät onFirstNameChange, onLastNameChange, onEmailChange tms. metodeista, jotka ovat 90% toistensa kopioita. Toki voihan tähän ongelmaan tehdä geneerisen ratkaisun, mutta sekin vie aikansa. Lisäksi metodien ja UI:n ollessa samassa tiedostossa, joutuu jatkuvasti skrollaamaan näiden välillä. Vaikka ajallisesti nuo eivät vaadi kauheasti, copy-pastetus ja skrollaus vaativat kuitenkin kontekstin vaihdon ja katkaisevat tehokkaasti ajatuksen kulun.

Vue ja Angular hoitavat em. tapaukset automaattisesti sitomalla datan kumpaankin suuntaan (two-way binding). Lisäksi datan ja UI:n ollessa eri tiedostoissa, voi näitä tarkastella rinnakkain. Reactissa komponentin kokonaiskuva on myös vaikeampi nähdä, sillä ruudussa näkyvistä riveistä osa on koodia ja osa UI:ta. Näin ollen koko UI-hierarkian näkeminen vaatii yleensä skrollausta edestakaisin.

Komponentit

Kaikkien komponenttimalli on suht samanlainen. Komponentit ovat pieniä rakennuspalikoita. Sovellus koostuu juurikomponentista, jonka sisällä on joukko alikomponentteja jne. Tämän suhteen eroa ei siis juurikaan ole. Kaikki mahdollistavat uudelleenkäytettävyyden ja ylläpidettävyyden yhtä lailla. Angularin ja Vuen eduksi voi tässäkin laskea komponentin rakenteen erottelun malliin ja templateen. Tällöin toista näistä voi käyttää pohjana toisessa komponentissa. Reactissa tämä vaatisi ylimääräisen abstraktiokerroksen.

Debuggaus

Step-by-step -debuggauksessa ei juurikaan ole eroja. Angular jää kuitenkin jalkoihin selainlaajennoksissa (Chrome). Olen testannut useampaa suosittua (AngularJS Batarang, AngularJS Inspect Watchers, Augury, ng-inspector for AngularJS) eikä niistä mikään toimi kunnolla; ei joko ollenkaan, lataa minuutteja tai kaatuu jatkuvasti. React Developer Tools ja Vue.js devtools toimivat ja niillä pystyy tarkastelemaan/muokkaamaan tilaa mikä nopeuttaa debuggausta huomattavasti. Lisäksi käytettässä Reduxia (React) tai Vuex:ää (Vue) pystyy testatessa kopioimaan kehittäjän työkaluilla koko sovelluksen tilan ja laittamaan sen bugi-ilmoituksen liitteeksi. Näin bugin korjaaja voi helposti palauttaa sovelluksen siihen tilaan missä bugi ilmenee.

Mobiili

Kaikilla voi tehdä natiivi-/ ja hybridisovelluksia. React Nativella voi tehdä mobiilisovelluksia. Angularilla ja Vuella voi tehdä natiivisovelluksia NativeScriptin päälle. Hybridisovelluksiin on lukuisia kirjastoja. Esim. Onsen UI (React/Angular/Vue), Ionic (Angular), Framework 7 (React, Angular, Vue), Quasar Framework (Vue).

Vertailua en voi näiden välillä tehdä, sillä olen tehnyt mobiilisoftan vain Vuella käyttäen loistavaa Quasar Frameworkia. Fitlog.fi-mobiilisofta syntyi vain kymmenissä tunneissa (huom. uusi framework, ensimmäinen mobiilisofta). En usko, että olisin päässyt samaan tuottavuuteen millään muulla. Quasar Frameworkista löytyi 95% tarvittavista komponenteista (välilehdet, pickerit, valikot, router, lokalisointi, autocomplete, swipe, reload, ...). Ainoastaan graafeihin piti ottaa erillinen kirjasto (ja chartjs-kirjasto löytyi Vuelle). Datamallin ollessa sama pystyin myös käyttämään suoraan n. 2/3 web-sovelluksen koodista. Ainoastaan UI-komponentit piti vaihtaa Bootstrapista Quasar Frameworkin vastaaviksi.

Yhteenveto

Vue.js on hyvä yhdistelmä Angularin ja Reactin parhaita puolia (mutta ei onneksi niitä huonoja). Sitä ei ole kehittänyt suuri yritys, mutta sillä on aktiivinen yhteisö ja sitä ovat käyttäneet useat suuret yritykset. Kehitysnopeus kärsii Reactin tapauksessa boilerplate-koodista. Angularin ongelma taas on hyvän/toimivan selainlaajennoksen puuttuminen. Molemmat näistä syö tuottavuutta merkittävästi. Miksi siis käyttää enemmän aikaa samaan tulokseen, kun Vue.js:llä homma olisi jo valmis ;)