Miten voi olla mahdollista, että yhdestä JavaScript-kirjastosta on tullut niin suosittu kuin React on? Varmasti yksi syy on, että kirjastoa on päivitetty jatkuvasti ja se on ollut edes kohtuullisesti taaksepäin yhteensopiva. Toisaalta React on esimerkki funktionaalisesta suunnittelusta. Vaikka ensimmäisissä versioissa komponentit perittiinkin component-kantaluokasta, uusissa React-versioissa ne on toteutettu funktioina. Vaikka edellinen versio olikin luokkiin ja perintään perustuva, se perustui funktionaalisesta ohjelmoinnista tuttuun kompositioon.
Tarkkasilmäisempi lukija huomaa, että myös component-luokasta perityt (ES6) komponentit ovat itse asiassa enemmän funktionaalisia kuin oliomaisia. Data nimittäin kulkee vain yhteen suuntaan – isäntäkomponentilta lapsikomponentille. Kyse on siis funktionaalisesta suunnittelumallista – kompositiosta. Kompositio korvaa hyvin olio-ohjelmoinnista tutun perinnän ja johtaa helpommin ylläpidettävään ja varmatoimisempaan koodiin.
Datan säilöminen voidaan myös component-pohjaisessa ratkaisussa jättää tilanhallintakomponentin, kuten reduxin huoleksi. Tietoa ei siis jemmata luokkien instansseihin, vaan aivan muualle.
Vuoden 2018-2019 vaihteessa julkaistu React hooks mahdollistaa funktio-pohjaiset komponentit, sillä tilan voi säilöä hookkien avulla. Reactin kehitys ei kuitenkaan ole pysähtynyt hookkeihin, sillä uusia herkkuja on jo putkessa. Näistä tärkeimmät lienevät ”deferred set state” ja suspense -rajapinnat.
Suspensen avulla voidaan kätevästi keskeyttää komponentin piirtäminen odottamaan esimerkiksi tiedon siirtymistä selaimeen. Suspensen avulla voidaan ratkaista hankala perusongelma hyvin yleisesti ja kohtuullisen helposti.
Sievässä ja pienessä yhden kurssipäivän aikana rakennettavassa demoapplikaatiossa asynkronisten pyyntöjen hallinta onnistuu kohtuullisen hyvin manuaalisestikin, mutta monipolvisessa komponenttihierarkiassa (useampi parent-child -yhdistelmä, jossa jokaiseen komponenttiin liittyy dataa, jonka sisältö määräytyy parent-komponentin mukaan) asynkronisten pyyntöjen valmistumisen ja komponenttien piirtämisen synkronointi on todellinen ongelma.
Deferred set staten avulla päästään tutusta UI-ongelmasta: datan hakeminen kestää vain alle sekunnin ja tiimalasia tai muuta spinneriä väläytetään käyttöliittymässä turhan takia – käyttäjä ei hermostu sekunnin odotteluun, vaan siihen, että spinnereitä välkytellään ruudulla, vaikka data on jo haettu ja sitä aletaan esittämään(renderöimään) selaimessa. Rajapinnan avulla voidaan määritellä, että jos asynkroninen pyyntö valmistuu vaikkapa alle sekunnissa, spinnereitä ei piirretä.
Reactin kehityksessä on hienointa, että painotus on nyt ohjelmoijan kannalta hyvissä asioissa – ratkaisuja etsitään kaikkein vaikeimpiin, mutta eniten hyötyä tuottavien ongelmien ratkaisuihin Koodia on paitsi helpompi hallita, myös helpompi ylläpitää jatkossa. Facebookin open source -projekti on myös oiva porttihuume funktionaaliseen ohjelmointiin. Kun tämä kaikki on mahdollista hoitaa myös TypeScriptillä, saadaan isommatkin projektit helposti maaliin ja ylläpidettäviksi.
Hakernoonissa on teemasta hyvä yhteenveto, joka kannattaa lukea: https://hackernoon.com/magic-of-react-suspense-with-concurrent-react-and-react-lazy-api-e32dc5f30ed1
Keväisin terveisin,
Selma ja kaverit
”Kun valitsee keväällä fiksut työkalut, niin kesällä on aikaa chillailla auringossa”, toteaa Selma-koira.