React

React on saavuttanut valtavasti suosiota viime vuosina. Vaikka React voitaisiin määritellä JavaScript-kirjastoksi, joka on suunniteltu auttamaan interaktiivisten rajapintojen luomisessa, on siitä kehittynyt jotain vielä suurempaa. Mikä on mahdollistanut Reactin nousun yhdeksi verkkokehityksen kuumimmista teknologioista?

React on saavuttanut valtavasti suosiota viime vuosina. Vaikka React voitaisiin määritellä JavaScript-kirjastoksi, joka on suunniteltu auttamaan interaktiivisten rajapintojen luomisessa, on siitä kehittynyt jotain vielä suurempaa. Mikä on mahdollistanut Reactin nousun yhdeksi verkkokehityksen kuumimmista teknologioista?

Miksi React?

Verkkorajapintojen luominen oli ennen työlästä puuhaa. Staattisten elementtien muuttamiseen vuorovaikutteisiksi tarvittiin useita riviä koodia. Kun mukana oli useita interaktiivisia elementtejä, koodin koko ja monimutkaisuus kasvoivat nopeasti. Oli vaikeaa saavuttaa sellaisia toimintoja, joihin liittyi vuorovaikutusta rajapinnan useiden osien välillä, ja sen taustalla olevat ratkaisut olivat usein hataria.

React oli kuin raikas tuulahdus kaikkien käyttöliittymien luomiseen tarkoitettujen työkalujen ja kehysten joukossa. Sen käyttö on helppo aloittaa, ja sitä voidaan käyttää monimutkaisten rajapintojen luomiseen. Reactin taipuvaisuus erottaa sen muista samankaltaisista työkaluista. Se on kehittäjän työkalu, jolla voidaan luoda hyvin vähärajoitteisia, dynaamisia komponentteja. Tämänkaltainen vapaus näkyy siinä, ettei mitkään React-hankkeet ole keskenään identtisiä. Kehitystiimit voivat vapaasti valita monista datan käsittelyyn, verkostopyyntöihin, käyttäjäistuntoihin ym. liittyvistä ratkaisuista. Reactia voisi verrata LEGO-rakennuspalikoihin: React ei määrää ennalta, mitä ja miten sillä voi rakentaa. Se on yksinkertainen työskentelyjärjestelmä, joka antaa käyttäjälleen vapauden muokata lopputuloksesta omannäköisensä kokonaisuuden.

Reactia voisi verrata LEGO-rakennuspalikoihin: React ei määrää ennalta, mitä ja miten sillä voi rakentaa.

Miten Reactilla saavutetaan tällainen yksinkertaisuus?

React-insinöörit ymmärsivät, että rajapintaselaimet, jotka on tarkoitettu muuttamaan renderöitävää kohdetta käyttäjien näytöillä (tällaista rajapintaa kutsutaan myös sovellusohjelmointirajapinnaksi tai APIksi), eivät tarjonneet heidän kaipaamaansa joustavuutta. He loivatkin sen sijaan selaimen ohjelmointirajapinnan päälle pienen abstraktiokerroksen, joka tarjoaa kehittäjille erittäin dynaamisten verkko- ja sovellusrajapintojen luomiseen tarvittavat työkalut. Perinteisesti, sovelluslogiikka ja mallit erotetaan toisistaan. Renderöintiprosessissa ne kuitenkin yhdistettiin uudelleen, ja jotkin osat korvattiin dynaamisilla arvoilla. React tekee kaiken tämän, ja mukana tulee oma JSX-renderöintikieli. JSX on saumaton yhdistelmä HTML-merkintöjä Javascriptin kanssa. JSX tekee interaktiivisten komponenttien luomisesta paljon helpompaa ja nopeampaa, ja juurikin siihen Reactin suosio suurilta osin juontaa juurensa.

setState()

Reactin ytimessä on niin kutsuttu “tila”, eli State. State tarkoittaa niitä tietoja, jotka kuvaavat React-sovelluksen tilaa tiettynä hetkenä. Kun State muuttuu, React päivittää älykkäästi siihen nojaavat komponentit. Älykäs State yhdessä tehokkaan JSX-kielen ja työkalun suoman valinnanvapauden kanssa on tehnyt Reactista yhden kehitystiimien rakastetuimmista työkaluista.

React mikropalveluarkkitehtuureissa

Asiakkuusvastaavamme Patric Ojala kuvailee artikkelissaan, kuinka monoliittisissa toteutuksissa verkkopalvelu on rakennettu kokonaisuudessaan yhden sovelluksen varaan, kun taas mikropalveluarkkitehtuurissa eri toiminnot on jaettu yksittäisiksi sovelluksiksi, jotka ovat toisiinsa yhteydessä ohjelmointirajapintojen kautta. React toimii täydellisesti esimerkiksi Drupalin vastinparina juuri tällaisten palveluiden käyttöliittymäsovelluksena, jossa taustajärjestelmä (backend) on erotettu käyttöliittymästä (frontend).

Lue artikkeli: Miten hyödyntää mikropalveluarkkitehtuuria keskikokoisissa verkkopalveluissa?

Separate boxes presenting how microservices architecture is a solution based on multiple elements

Wunderin JS-killan vetäjä David Corbacho jakaa englanninkielisellä videolla parhaita käytäntöjämme Reactin dokumentaatioon. Video luotiin alunperin React Finlandin tapahtumaa varten.

Haluaisitko kuulla lisää Reactista ja kuinka tämä teknologia voisi hyödyttää sinun verkkopalveluitasi? Tiedät, keille soittaa.

Lisätietoa

Peter Silvennoinen

CCO

+358 40 173 7666

peter.silvennoinen@wunder.io