Monta hyvää syytä käyttää Reactia

Ajankohtaiset, Palvelut

Facebookin ylläpitämä JavaScript-kirjasto React tarjoaa ohjelmoijalle tukun ominaisuuksia, joilla web-sovellusten teko sujuvoituu merkittävästi. Vahvuudet kompensoivat puutteet mennen tullen.

JavaScript-kirjasto React oli ensijulkaisunsa aikaan 2013 edelläkävijä. Sen voi huoletta sanoa pitäneen asemansa parhaana välineenä web-sovellusten renderöintiin, kun sovelluksen käyttöliittymä on monimutkainen ja sisältää dynaamisesti päivittyviä elementtejä.

Mikä avointa lähdekoodia hyödyntävästä Reactista sitten tekee passelin valinnan? Etuja on lukuisia. Se piilottaa nettiselainten väliset erot tehokkaasti. Siten ohjelmoijan ei tarvitse miettiä, miten käyttöliittymä saadaan toimimaan samalla tavalla Chromella, Internet Explorerilla, Firefoxilla tai vaikka Safarilla. Tämä ominaisuus oli merkittävä, kun Reactin ensimmäinen versio julkaistiin. Se on yhä arvossaan.

Koska React hoitaa vain sovelluksen käyttöliittymän renderöintiä eli sitä, miten ne piirtyvät selaimeen, yhteistyö toisten kirjastojen kanssa on mutkatonta. Ohjelmoija voi valita projektiin mukaan muita kirjastoja vapaasti, esimerkiksi tilanhallintakirjastoja tai kirjastoja, joilla selain keskustelee palvelinsovelluksen kanssa. On helppo kokeilla, ratkaiseeko jokin kirjasto jonkin tietyn ongelman. Jos ei ratkaise, sen voi vaihtaa toiseen helposti. Samoin Reactilla tehtyjä käyttöliittymäkomponentteja pystyy siirtämään projektista toiseen melkein sellaisenaan. Jos on vaikka tehnyt yhdelle sivustolle kätevän alasvetovalikon, sitä voi hyödyntää myös muualla.

Reactin toimintavalle on toki vaihtoehtoja. Valittavana on kokonaisia ohjelmistokehyksiä, esim. Angular tai Ember, jotka tarjoavat kaiken valmiina. Renderöinti, tilanhallinta ja tapa keskustella palvelimen kanssa löytyy niissä samasta paketista. Haittapuolena on, että niiden kanssa helposti sitoo kätensä tekemään asiat vain yhdellä ohjelmistokehyksen määrittelemällä tavalla. Avoltuksessa me käytämme Reactia lähes yksinomaan web-sovellusten käyttöliittymien tekemiseen. Poikkeuksen muodostavat tietyt vanhat projektit ja sellaiset projektit, joissa yksinkertaisempi ratkaisu on järkevämpi.

Reactissa on myös se hyvää, että ohjelmakoodissa ei tarvitse kuin kertoa, miltä käyttöliittymän kuuluisi näyttää, ja kirjasto päivittää sivun rakenteen selaimeen mahdollisimman optimaalisesti. Tällöin ei tarvitse miettiä, miten sivun rakennetta pitäisi milloinkin muuttaa, jotta sivu päivittyisi nopeasti ja sivulle päivittyisivät oikeat asiat näkyviin.

Sovelluksen tilanhallinta toimii Reactin kanssa näppärästi. Kyse on hierarkioista: on päätason komponentti ja sen alle lisätään alemman tason komponentteja. Päätason komponentti antaa sovelluksen tilasta osia eteenpäin sen alla oleville komponenteille. Mikäli alemman tason komponentit haluavat muuttaa sovelluksen tilaa, ne kertovat päätason komponentille, mitä muutetaan. React-kirjasto päivittää näkymän automaattisesti sovelluksen tilaa vastaavaksi, joten ohjelmoijan ei tarvitse tällöinkään itse miettiä, miten näkymää pitäisi muuttaa.

React on käyttäjäystävällinen ja pienen rajapinnan vuoksi helpohko oppia. Alkuun pääsee muutamassa minuutissa jo pelkästään käymällä Reactin kotisivuilla [1]. Sivuilta löytyy koodieditori, jolla voi kokeilla itse tehdä React-komponentteja.

React on innoittanut muita kirjastoja tekemään selaimen renderöinnin samalla tavalla. Osa kirjastoista on lähtenyt kilpailemaan nopeudella ja kirjaston koolla sivuuttamalla ominaisuudet joita ei välttämättä tarvita. Esimerkiksi InfernoJS-kirjastosta on jätetty pois React Nativea vastaava toiminto, eli sillä ei pysty siis tekemään natiiveja mobiilisovelluksia. Tämän ansiosta se on kuitenkin saatu Reactia huomattavasti nopeammaksi ja pienemmäksi. Puhelimen selaimessa InfernoJS-sovellukset toki toimivat kuten React-sovellukset. React on kuitenkin varma valinta, sillä se on suosituin vastaavantyyppisistä kirjastoista, joten siihen löytyy valmiita komponentteja ja dokumentaatiota enemmän.

Reactia kirjoitetaan yleensä JSX-syntaksilla, joka lisää JavaScriptiin HTML:n näköistä muotoa. Sitä voi periaatteessa pitää yhtenä kirjaston haittapuolista, koska JSX täytyy kääntää pelkäksi JavaScriptiksi, jotta se toimisi selaimessa. Moderneissa JavaScript-sovelluksissa koodin käännössysteemi on kuitenkin jo muistakin syistä mukana, esimerkiksi yksikkötestien ajamisen ja tuotantokoodin pienentämisen vuoksi, joten JSX:n kääntäminen ei ole iso haitta.

Pienissä sovelluksissa sovelluksen tila voidaan ja kannattaakin pitää React-komponenteissa itsessään. Sovelluksen koon kasvaessa pitää miettiä vaihtoehtoisia tapoja järjestää sovelluksen tilanhallinta. React-kirjasto ei itsessään tarjoa tähän ratkaisua, mutta tätä varten on olemassa ulkopuolisia kirjastoja. Yksi kelpo vaihtoehto on Redux-kirjasto [2], joka käsittelee sovelluksen tilan puumallisena rakenteena. React-komponentit hakevat tästä rakenteesta vain ne osat tilasta, jotka ovat komponenteille kiinnostavaa tietoa. Kun komponentit haluavat muuttaa tilaa, ne kertovat Reduxille, miten tilaa muutetaan, ja muutoksista seurannut uusi tila päivittyy komponenteille automaattisesti.

Koska Reactin renderöintiin riittää, että sille kerrotaan, miltä sovelluksen pitää näyttää, ja muutokset päivittyvät automaattisesti, React sopii erityisen hyvin reaaliaikaisesti muuttuvan tiedon esittämiseen, esimerkiksi urheilutuloksien esittämiseen samalla, kun urheilukisa on vielä menossa.

Osa Reactin ketteryydestä on sen ansiota, että siinä ei hallinnoida erillisiä template-tiedostoja. Komponentin logiikka ja se, miltä sivun tulee näyttää, ovat samassa paikassa. Ennen Reactia yleinen tapa oli pitää templatet ja logiikka tiukasti eri paikoissa, mutta tässä tavassa piti muistaa, mistä milloinkin löytyvät oikea template ja siihen kuuluva toimintalogiikka. React-komponenteista ohjelmoija näkee helposti samasta paikasta, miltä komponentti tulee selaimessa näyttämään ja miten se toimii.

Reactilla tehdyn sovelluksen sivuja voidaan renderöidä palvelimella etukäteen, jolloin web-sovelluksen etuna on käyttäjän näkökulmasta se, että sivut vaikuttavat latautuvan hyvin nopeasti. Palvelin palauttaa selaimelle renderöinnin tuloksen ja selain voi näyttää sivun sisältöä heti, vaikka varsinaista ohjelmakoodia vielä ladataan palvelimelta. Kun ohjelmakoodi saadaan ladattua ja käynnistettyä, React ottaa sivun sisällön saumattomasti hallintaan. Kun sovelluksessa tämän jälkeen vaihdetaan näkymää, riittää että palvelimelta haetaan ainoastaan tarvittavat tiedot ja React renderöi sisällön uudelleen.

Vielä on syytä mainita sananen tietoturvasta. React auttaa XSS-haavoittuvuuksia, eli cross site scriptejä vastaan, koska oletuksena sillä ei pysty tekemään käyttäjäsyötteestä HTML-koodia. Ohjelmoijan pitää erikseen pakottaa React tuottamaan käyttäjäsyötteestä HTML-koodia, jos on erityinen tilanne, jolloin näin halutaan tehdä. Tämä on hyvä oletus React-kirjastolta, koska muuten olisi isompi riski, että sovelluksessa on piilossa vika, jota kautta käyttäjät voisivat luoda haitallista sisältöä sivustolle näkyviin. Esimerkkinä tällaisesta haavoittuvuudesta voisi olla vaikka lomake, jolla kalastellaan luottokorttitietoja tai sähköpostiosoitteita.

1
2

  • 1. [1] https://facebook.github.io/react/
  • 2. [2] http://redux.js.org