Nopeampaa web-kehitystä Reactilla
React.js on ollut kuuma puheenaihe webbipiireissä jo jonkin aikaa. Alunperin Facebookin vuonna 2013 julkaisema JavaScript-kirjasto on saanut ympärilleen aktiivisen yhteisön, joka pyrkii tuomaan Reactin ympärille sitä tukevia ja täydentäviä uusia kirjastoja.
React.js on ollut kuuma puheenaihe webbipiireissä jo jonkin aikaa. Alunperin Facebookin vuonna 2013 julkaisema JavaScript-kirjasto on saanut ympärilleen aktiivisen yhteisön, joka pyrkii tuomaan Reactin ympärille sitä tukevia ja täydentäviä uusia kirjastoja. Reactin suosiota korostaa myös useat aiheesta kertovat Youtube-videot sekä eri konferenssit. Facebookin lisäksi kirjastoon ovat investoineet mm. Netflix, Pinterest ja AirBnB.
Reactin työtavassa komponenttipohjainen ajattelu on hyvin vahvasti läsnä. Ideana on pilkkoa yksittäinen webbisovellus tai sen ominaisuus niin pieniin osiin kuin se on järkevää. Tämä pieni komponentti on helposti testattavissa, uudelleenkäytettävissä ja tarvittaessa uudelleenkirjoitettavissa. Kun näitä uudelleenkäytettäviä komponentteja saadaan kasaan riittävästi, voidaan uusia ominaisuuksia prototypoida ja testata hyvinkin nopeasti.
Hyvien uudelleenkäytettävien komponenttien rakentaminen ei ole yksinkertaista. Niinpä olen koostanut tähän pienen ohjeistuksen, jolla olen saanut omaan komponentinkasaukseen hieman suuntaviivoja.
Tyhmät ja fiksut komponentit
Tyhmät komponentit ovat nimensä mukaisesti tyhmiä tai yksinkertaisia. Tämä tarkoittaa sitä, että kyseiset komponentit eivät sisällä logiikkaa ja keskittyvät ainoastaan jonkin tietyn elementin visuaaliseen ilmentämiseen ja ulkoasuun. Hyvin vahvana ajatuksena tässä on komponentin tilattomuus, eli komponentti itsessään ei ota kantaa omaan tai sovelluksen tilaan. Esimerkki tyhmästä komponentista voisi olla lomakkeen radiobutton.
Fiksut komponentit sisältävät logiikkaa ja sovelluksen esittämiseen liittyvää toimintaa ja tilatietoa. Nämä komponentit eivät ota kantaa ulkoasuun vaan ennemminkin koostavat muita komponentteja toimiviksi kokonaisuuksiksi. Nämä muut komponentit voivat olla joko tyhmiä tai fiksuja.
Riittävän suppea ja yhtenäinen rajapinta
Komponenteilla on hyvä olla jonkinlainen rajapinta. Reactin tapauksessa puhutaan propertyistä. Tämän rajapinnan tulee olla niin suppea kuin se kyseisessä komponentissa voi olla, mutta ei yhtään suppeampi. Lisäksi jos käytössä on jo paljon komponentteja, on hyvin tärkeää, että rajapinnan nimeämiskäytäntö ja sen vastaanottamat arvot ovat yhtenäisiä. Tietyn niminen property ei saisi yhdessä komponentissa ottaa vastaan tekstiä ja toisessa objektia.
Tarkasti rajattu toiminnallisuus
Hyvin oleellisena osana kahteen edelliseen ohjeistukseen liittyy tarkasti rajattu toiminnallisuus. Uudelleenkäytettävän komponentin tulisi toimia yksiselitteisesti ja ennakoitavasti. Siksi on järkevämpää eriyttää jokin komponentti uudeksi komponentiksi, jos esimerkiksi toiminta tai ulkoasu muuttuu merkittävästi vaikkapa propertyssä annetun arvon seurauksena. Vaikka tämä kasvattaa ylläpidettävää koodipohjaa, on sitä helpompi ymmärtää ja korjata vikatilanteissa.
React.js ja sen ympärillä pyörivä yhteisö kehittyvät ja etenevät kohtalaisen nopeasti. Tässä esittämäni ohjeistus on toiminut minulla hyvänä suunnannäyttäjänä, mutta se ei ole ainoa tapa tehdä React-komponentteja. Sitä mukaa, kun React-yhteisö löytää uusia ja parempia tapoja käyttää Reactia, pyrin ottamaan näitä omaan kehitystapaani mukaan.
Tommi Pääkkö, Software Engineer
02.02.2016 | Artikkelit
Symbio muuttaa: Osa 2 – Helsinki
Kohti parasta mahdollista työnhakijakokemusta
