Angular, React vai Vue.js, mikä on paras?

JavaScriptille löytyy paljon erilaisia frameworkkeja ja kirjastoja, jotka tulevat vastaan päivittäin nykyaikaisissa verkkosivuissa sekä palveluissa. Näistä suurimmat ja eniten käytetyt ovat JavaScript-pohjaiset teknologiat kuten Angular, React sekä Vue.js. Käytämme näitä kaikkia Ceonin eri hankkeissa, joten päätimme vertailla niitä ja helpottaa lukijan valintaa. Onko yksi teknologia nopeampi kuin muut? Mikä on paras JavaScript-kirjasto? Selvitimme minkälaisessa hankkeessa kukin teknologia toimii parhaiten tai miksi sen valitsisimme projektiimme.

Kirjoitin tämän ajatellen tuoteomistajia, liiketoiminnan edustajia sekä kehittäjiä, jotka usein kohtaavat kysymyksen - mikä teknologioista on paras? Spoiler alert: mielestämme näitä ei voi arvottaa keskenään, vaan jokaiselle löytyy käyttötarkoituksena ja faniryhmänsä.

Tässä on alustuksena vertailutaulukko teknologioiden alkuperästä :

* Avoinna olevat työpaikat elävät koko ajan. Tiedot on haettu Oikotien avoimista työpaikoista hakemalla teknologian nimeä.

Missä mikäkin teknologia on paras?

Käytännössä kaikilla kolmella teknologialla voi rakentaa millaisen sivuston tahansa, sillä kaikkiin löytyy paljon lisäosia ja avustavia komponentteja mahdollistaen lähes jokaisen käyttötarpeen. Jokaisella teknologialla on kuitenkin omat vahvuudet ja heikkoudet, ja jotkut niistä osaavat tietyt asiat paremmin kuin toiset. Kaikille löytyy paljon lisäosia ja apukirjastoja, jotka mahdollistavat monet toiminnot. NPM-pakettihallinnasta löytyy kymmeniä tuhansia mainintoja jokaisesta teknologiasta.

Angular on iso ja raskas verrattuna Reactiin ja Vue.js:ään, jotka puolestaan soveltuvat pienten projektien lisäksi myös isoihin projekteihin. Käyttäisimme Angularia vain, jos on varmaa, että projektista tulee iso. Muilla teknologioilla pystyy aloittamaan pienestä ja lisäämään ominaisuuksia tarpeen mukaan. Angularin raskaus näkyy pidempinä latausaikoina ja hitaampana suorituskykynä eli huonompana käyttökokemuksena. Kannattaa ottaa huomioon myös Suomen todella nopeat internet-yhteydet, kaikkialla ei ole saatavilla yhtä nopeita yhteyksiä.

Angularin vahvuudet tulevat pitkän tuen muodossa ja monipuolisten sisäänrakennettujen ominaisuuksien vuoksi. Hyvänä esimerkkinä monorepo-arkkitehtuuri on suoraan tuettuna Angularissa. Monorepolla saadaan eri käyttöliittymät (kuten asiakkaiden ja ylläpitäjien) samaan koodipohjaan, mutta esimerkiksi julkaisut voidaan tehdä toisistaan riippumatta. Kattavat ominaisuudet helpottavat käyttöönottoa. Ei tarvitse asentaa monia lisäosia, vaan riittää että määrittelee ominaisuudet mieluisaksi. Olen kuullut puhuttavan, että Angularissa olisi liikaa toimintoja ja se olisi hankala ottaa käyttöön. Todellisuudessa lisätoimintoihin kosketaan harvoin, eivätkä ne ole muodostuneet ongelmiksi omissa projekteissani.

React on näppärä, jos on tarve myös mobiilisoftien kehittämiselle. React Nativella pystytään tekemään Android- ja IOS-sovellukset samasta koodipohjasta eli vähemmällä työllä ja kustannuksella. Muillakin teknologioilla tämä on mahdollista Progressive Web Appin kanssa, mutta React Native tuottaa paremman lopputuloksen käyttämällä mobiilijärjestelmien natiiveja elementtejä, jotka ovat käyttäjälle tuttuja muista mobiilisovelluksista.

Yhteinen koodipohja nopeuttaa kehitystyötä ja vähentää virheiden määrää. Yhteisellä koodipohjalla pystytään koneellisesti vahvistamaan lomake joka on asiakkaiden ja ylläpitäjien muokattavissa käyttäen samaa koodia. Vahvistusten ollessa eri koodipohjissa on inhimillisen virheen riski, että vahvistus on tehty eri tavalla. Yhteinen koodipohja nopeuttaa kehitystä, sillä yhteisiä toimintoja ei tarvitse tehdä useampaan kertaan, esimerkiksi tiedoston lähettämistä palvelimelle.

Reactin käyttämä syntaksi (JSX) voi olla hankalampi kehittäjän lukea ja ymmärtää verrattuna muiden teknologioiden käyttämiin syntakseihin. JSX eroaa normaalista HTML- ja JavaScript syntaksista, joten se ei ole tuttu mistään muusta teknologiasta tulevalle. Jotkut kehittäjät kuitenkin vannovat JSX:n nimeen ja pitävät sitä parempana, koska JSX:ssä pystyy käyttämään kaikkia JavaScriptin ominaisuuksia missä tahansa. React on ehdottomasti suosituin, joten sille on helpoin löytää tekijöitä ja näin ollen toisen teknologian käyttö voi aiheuttaa ihmetystä.

Vue.js toimii nopean MVP:n tekemisessä, ja sitä pystyy laajentamaan ilman mittavia muutoksia myöhemmin ominaisuuksia lisätessä. Vue.js:n syntaksi on lähellä Angularin syntaksia, joten niiden kahden välillä kehittäjät pystyvät hyppäämään helposti. Vue.js on myös todella helppo oppia, koska se ei ole yhtä jäykkä isommissa asioissa kuin Angular, vaan voidaan rakentaa pieniä osia kerrallaan. Ceonilla Joni Karlsson on huomannut Vue.js:n helppouden, sillä hänen mielestään se on nopeammin opittavissa kuin React.

Vue.js:n mukana tulee myös joitakin työtä helpottavia valmiita kirjastoja, joita ei ole Reactissa. Tämän vuoksi projektin aloitus on nopeampaa. Esimerkiksi Vue.js tukee tyylien kohdistamista tiettyyn komponenttiin (scoped CSS), joka pitää lisätä Reactiin omana lisäkirjastonaan. Valmiita kirjastoja ei kuitenkaan ole läheskään yhtä paljon kuin Angularissa. Tyylien kohdistaminen estää tyylejä karkaamasta halutun paikan ulkopuolelle vähentäen virheitä.

Vue.js:ää ja Reactia yhdistävät kehittämisen ja lopullisen tuotteen nopeus sekä ketteryys. Ei tarvitse asentaa turhia asioita taustalle pyörimään. Voidaan myös sanoa, että Vue.js:ssä yhdistyy kahden muun teknologian hyvät puolet; Reactin ketteryys ja Angularin yksinkertainen syntaksi. Kaikesta huolimatta Vue.js on selvästi vähiten suosittu työympäristöissä.

Pellin alla, miten teknologiat eroavat kehittäjän näkökulmasta?

Käytännössä jokainen näistä kolmesta saadaan tekemään mitä halutaan. Lernalla saa monorepo-tuen mihin tahansa JS-projektiin. Angularista pystyy käyttämään pelkkää corea, jossa on vähemmän tavaraa mukana. On muistettava, että kun vertaillaan, niin jokainen tykkää vähän eri asioista ja katsoo maailmaa itselleen sopivien väristen lasien läpi.

Isoin tekijälle näkyvä ero on template syntaxeissa. Reactin JSX on syntaksilaajennus JavaScriptiin, kun taas Angular tai Vue.js laajentaa HTML-elementtejä. Asian voi ajatella niin, että React tekee JavaScriptistä DOM-elementtejä, mutta kun Angularissa tai Vue.js:ssä tehdään HTML-elementtejä, niihin liitetään frameworkin ominaisuudet. Kehitystyössä suurin ero näkyy siinä, että React käyttää JS:n omia sisäänrakennettuja funktioita määriteltäessä komponentin toimintoja, kun taas Angularilla tai Vue.js:lla on oma tapa tehdä asia. Vertaa esimerkiksi ehdollinen renderöinti:

<h1 *ngIf="show">Hello world</h1>

<h1 v-if="show">Hello world</h1>

if (show) { return <h1>Hello world</h1> }

HTML syntaksia käytettäessä voidaan lisätä täysin omia “lisäosia” normaaleihin HTML elementteihin direktiiveillä, joissa koodi pyörii omanaan. Reactissa puolestaan pitää “lisäosien” ominaisuudet virittää koodin sekaan. Se ei ole kovin kätevää, jos samaa ominaisuutta tarvitaan monessa eri paikassa tai tarvitaan esimerkiksi normaali lomakekenttä yhdellä lisäominaisuudella.

Reactissa tieto liikkuu vain yhteen suuntaan, alaspäin. Reactin kanssa on mietittävä komponenttirakenne tarkasti ja/tai käyttää lisäosia, kuten Reduxia tiedon hallintaan. Angular ja Vue.js osaavat lähettää tietoa korkeammalle puuhun käyttämällä emit-funktiota.

Mainittakoon vielä, että Vue.js:n core on suurelta osin alkuperäisen kehittäjän, Evan You:n käsialaa, joten siihen voi tulla muutoksia, jotka eivät miellytä.

Päivitykset

Angular lupaa LTS (Long Term Support) -versioille 18 kuukauden tuen, joten näitä versioita käytettäessä ei tarvitse esimerkiksi tietoturvan takia tehdä rikkovia muutoksia. Lupauksen takana on Google eli voidaan olettaa lupauksen pitävän. Kolikon kääntöpuolella on se, että tuki on aina 18kk; 6kk seuraavaan versioon ja 12kk päivitykset vanhoihin versioihin.

React tai Vue.js eivät tee lupauksia ei-rikkovien päivitysten kestosta, mutta molemmat ovat tehneet tähän asti töitä pitääkseen päivittämisen helppona. React ei saanut moneen vuoteen hajottavia muutoksia, vaan itse asiassa päivitysväli venyi huomattavasti Angularin 18 kuukauden yli. Reactin viimeisin versio 17 mahdollisti sovelluksen osittaisen päivittämisen, kunnes versio 18 joskus hamassa tulevaisuudessa tulee.

Vue.js:stä tuli juuri versio 3, jonka mukana tuli hajottavia muutoksia. Uuden version matkaan pääsee helposti juuri julkaistulla Migration Buildillä. Tosin uusimpiin ominaisuuksiin ei välttämättä pääse heti kiinni. Versio 3 julkaistiin noin yhdeksän kuukautta aikaisemmin ja uuteen versioon päivittämistä ei suositeltu kriittisille järjestelmille ennen Migration Buildin julkaisua. Käsin päivittäminen oli työlästä ja virheiden riski oli suuri.

Pitkästä versiotuesta on hyötyä isoissa kriittisissä järjestelmissä, joita tullaan käyttämään pitkiä aikoja. Angular on varma valinta, koska sen päivitykset voi suunnitella etukäteen. React ja Vue.js voivat palkita pidemmällä tuella, mutta hajottavien päivitysten tullessa pitää kehitystiimin ja asiakkaan olla ketteriä päivitysten hoitamisessa.

Tulevaisuus

Yksikään mainituista teknologioista ei näytä kuolemisen merkkejä. Niillä on tehty paljon kriittisiä järjestelmiä, joita halutaan tukea jatkossakin.

Angular ja React ovat molemmat ison yrityksen kehittämiä, joten niiden kehittäminen voi lakata yhden yrityksen päätöksestä. Isot yritykset mahdollistavat isot budjetit teknologioiden kehittämiselle, joka puolestaan mahdollistaa lukuisia uusia sekä parempia ominaisuuksia ja korjauksia.

Vue.js puolestaan on yhteisön kehittämä, jolloin kehitystyö ei lopu yksittäisen yrityksen niin päättäessä. Yhteisön kehittäessä teknologiaa on huonona puolena sen hidas kehitysnopeus, koska työtä tehdään vapaaehtoisesti vapaa-ajalla. On myös hyvin todennäköistä, että jos nykyiset kehittäjät lopettavat tekemisen, ottaa jokin toinen vapaaehtoisporukka kehitysvastuun projektista.

Lyhyesti ja ytimekkäästi, valitse:

• Angular:
• isoihin järjestelmiin, joissa on tarvetta monille esiasennetuille kirjastoille
• kun järjestelmän on tuettava monia erilaisia käyttötarkoituksia ja toimintoja
• React:
• kun tarvitaan tuki React Nativen elementteihin tai yksinkertainen järjestelmä, johon on helppo löytää tekijöitä.
• kun halutaan web- ja mobiilisovellukset samaan koodipohjaan
• Jack of all trades - toimii kaikessa
• nopeaan MVP:hen
• Vue.js:
• kun halutaan joustava järjestelmä, jota on helppo jatkokehittää
• Jack of all trades - toimii kaikessa
• nopeaan MVP:hen
• erityisesti jos halutaan yksinkertainen ja helposti ylläpidettävä järjestelmä