Tyylittely Reactissa on hankalaa
React.js julkaistiin vuonna 2013 ja sitä seuraavan neljän vuoden aikana se vaikutti paljon tapaan rakentaa webbisovelluksia. Palvelinpään sovelluksista peritty ja kopioitu MVC-malli ei istunutkaan kovin hyvin selainpään sovelluskehitysmalliin.
React.js julkaistiin vuonna 2013 ja sitä seuraavan neljän vuoden aikana se vaikutti paljon tapaan rakentaa webbisovelluksia. Palvelinpään sovelluksista peritty ja kopioitu MVC-malli ei istunutkaan kovin hyvin selainpään sovelluskehitysmalliin. Koodin jäsentely johti html:n, tyylien ja javascriptin jaotteluun ja joissakin tapauksissa tämä aiheutti enemmän ongelmia kuin mitä sillä yritettiin ratkaista. React nosti komponenttipohjaisen ajatusmallin yleiseksi tavaksi kehittää webbifronttia. Javascript, CSS ja HTML (tai JSX) pilkottiin selkeiksi ja rajatuiksi kokonaisuuksiksi ja siirrettiin toistensa läheisyyteen. Hyppiminen hakemistoista toiseen ja suurten tiedostojen selaaminen oikean paikan löytämiseen ja muuttamiseen väheni selkeästi. Toi React muutakin, kuin tämän ajatusmallin. Lähes jokainen Reactia käsittelevä artikkeli nostaa esille VDOMin ja sen luoman nopeusedun DOMiin verrattuna. Tämä on toki tärkeä ominaisuus, mutta mielestäni vain yksi asia, joka siirsi ajatusmallia komponenttipohjaiseksi.
Ensimmäisen kerran kun näin Reactin ja JSX-merkkauksen, olin hieman ihmeissäni. Eihän kukaan nyt oikeasti voi tällä tavalla mennä JavaScriptin sisälle kirjoittamaan HTML:n tyyppistä tavaraa. Nyt lähes pari vuotta Reactia käyttäneenä olen oppinut pitämään Reactista. Komponenttien kirjoittaminen on melkein nautinnollista. Yksi asia on kuitenkin ollut kivenä kengässä.
Tyylit.
Minä pidän tyyleistä. CSS. Cascading Style Sheet. Näytä minulle kuva ja minä näytän miten se rakennetaan tyyleillä. Eri päätelaitteille, eri kokoisille selainikkunoille. Ja tyylien periytyminen, parhaimmillaan todella nautinnollista. Mutta kaikki eivät jaa minun paloa tyylejä kohtaan. Tämä näkyy erityisesti projekteissa, joissa on mukana useita kehittäjiä. Koodin laatu vaihtelee. Joskus minun elegantti tyylitoteutus särkyy, koska joku on hyväksynyt PR:n, jonka seurauksena toteutus perii odottamattomia ominaisuuksia.
Reactin ympärille on kasautunut joukko erilaisia kirjastoja, jotka pyrkivät auttamaan tyylittelyssä. CSS-in-JS on yleinen kategoria, johon nämä asettuvat. Ja minun mielestä suurin etu, jota nämä kirjastot tarjoavat on tyylien rajaus. Ominaisuus, joka poistettiin CSS:n speksistä. Tyylien rajaus (scope) mahdollistaa tyylien kirjoittamisen siten, että ne eivät vuoda komponentin ulkopuolelle yleiseen tyyliavaruuteen. Siltikin kirjoitan edelleen tyylini BEM-syntaksilla perinteisiin CSS-tiedostoihin ilman CSS-in-JS -kirjastoja, koska kaikki kokeilemani kirjastot rajaavat mielestäni tärkeitä CSS:n ominaisuuksia pois tarjotessaan React-tukea. Osasta puuttuu Media Query -tuki, toisista pseudo elementit. Kohtalaisen moni pakottaa kirjoittamaan CSS:ää epäloogisen tuntoisella JSON-notaatiolla. Vaikka vendor prefixaus ei sinänsä ole CSS:n ominaisuus niin osalla CSS-in-JS -kirjastoilla se ei ole ollenkaan mahdollista.
Tovi takaperin törmäsin jälleen uuteen tyyliapukirjastoon. Styled Components. Taas joku React-kikkare oli ensimmäinen ajatus. Vaikka aikaisemmat kokemukset olivat huonoja päätin silti tutustua tähän vempeleeseen. Ja hieman yllätyin, kun tämä kirjasto tuntui kiertävän minua muissa kirjastoissa vaivanneet ongelmat. Media Query -tuki löytyy, pseudo elementit pelaavat, vendor prefixing on mukana ja tyylejä kirjoitetaan kuten tyylejä kirjoitetaan. Lisäksi kirjasto tarjosi nipun muita ominaisuuksia, kuten tyylien rajauksen, keyframe-animaatioiden rajauksen(!) ja tuen React Nativelle. Ja koska tämäkin tyylitoteutus elää JavaScriptin sisällä, on siihen mahdollista rakentaa ehtolauseita sisälle.
Styled Components ei kuitenkaan ole pelkästään kukkasia ja linnunlauluja. Jotta toteutus toimisi oikein, käytetään siinä niinsanottua wrapper-elementtiä. Usealla pienellä sisättäisellä tyylikomponentilla rakennettu toteutus saattaa kasvattaa selaimen DOM-puun todella syväksi ja tämä voi tuoda todellisia suorituskykyongelmia. Toisaalta tällaisessa tapauksessa itse sovelluksen rakenne saattaa olla joka tapauksessa väärä. Lisäksi kaipaan CSS:n kirjoittamista eri tiedostoon, joka ei tässä tapauksessa ole mahdollista. Tai teknisesti on, mutta silloinkin puhutaan JavaScript-modulista, jonne tyylit kirjoitetaan. Eli ei puhdasta CSS-tiedostoa. Sinänsä tapa, miten tyylit kirjoitetaan JavaScriptin tagged template literals -notaation sisälle on hieno.
Tänä lyhyenä aikana, jona olen demoprojektissa testannut Styled Components -kirjastoa en ole ongelmiin törmännyt. Muutenkin olen yllättynyt, miten hyvin kirjasto tuntuu ratkaisevan minun tapauksessa tyylien kirjoittamisen haasteen React-ympäristössä. Tämä ei varmastikaan sovi kaikille tai joka toteutukseen. Kuitenkin henkilökohtaiset mieltymykseni huomioiden olen sitä mieltä että tämä kirjasto on tällä hetkellä yksi parhaista tyylittelyä helpottavista kirjastoista, joita React-maailmassa on tarjolla.
Tommi Pääkkö, Software Engineer
21.03.2017 | Artikkelit
C++ harrastelijasta asiantuntijaksi – Tatun uratarina Symbiolla
Symbio muuttaa: Osa 2 – Helsinki
