Sisällön erottaminen teknisestä toteutuksesta ja ulkoasusta on ollut verkkopalveluissa ja sovelluksissa selviö pitkään, mutta mitä kuluu tämän hetken komponenttikirjastojen ja tyylioppaiden saralle? Ja mitä erityisesti devaajan olisi syytä tietää aihepiiristä, vaikkei frontin kanssa itse päivittäin työskentelisikään?
“Ulkoasun suhteen ylätasolla on tietysti brändiohjeistus eli erilaiset brändidokumentit, joissa määritellään logon käytöstä, typografiasta, väreistä sun muista”, kertoo Compilen Oskari Blomberg, joka on erikoistunut fronttitekemiseen ja on ollut mukana toteuttamassa useita React-komponenttikirjastoja ja niihin liittyviä tyylioppaita.
On hyvin tyypillistä ajautua tilanteeseen, jossa luodaan niin sanottu “miljoonan euron painike”. Graafikot eri projekteissa tekevät leiskoja, jotka sisältävät esimerkiksi talon ilmeen mukaisen painikkeen. Seuraavaksi devaajat eri projekteissa toteuttavat leiskan mukaisen painikkeen, ja mahdollisesti jokaisessa projektissa hieman eri tavalla. On huomattavasti fiksumpaa tehdä uudelleenkäytettävä komponentti, joka on toteutettu kerran kunnolla. Tällöin devaajat voivat keskittyä pikselinviilauksen sijaan sovelluksen logiikkaan, kun taas suunnittelijat voivat virittää käyttäjäkokemuksen tappiin.
Tekniseltä kannalta komponenttien kannattaa olla “tyhmiä”: ne voivat välittää logiikkaa, mutta eivät itse sisällä sitä. Enimmäkseen ne ovat ulkoasuun liittyviä tilattomia komponentteja. Tämä jättää vapautta esimerkiksi lomakekentän tekniseen toteutukseen. Komponentissa voidaan esimerkiksi määritellä, miltä virheviesti näyttää, mutta syötteen validointi jää komponenttia hyödyntävän devaajan harteille.
Rahansäästöä ja saavutettavuutta
Komponenttikirjaston hyödyt ovat selvät. Ensinnäkin säästyy rahaa: kun kaiken ulkoasuun liittyvän voi miettiä komponenttitasolla valmiiksi, vältytään turhalta työltä. Toinen keskeinen hyöty on saavutettavuuden parantaminen. Tällä on entistäkin enemmän merkitystä, kun saavutettavuusdirektiivin vaatimuksia viedään käytäntöön.
“Devaajan kannalta hyöty on tietysti siinä, että voi pohtia logiikkaa eikä viilata pikseliä. Ei ole tavatonta, että samantyyppisestä toteutuksesta voi löytyä monta erilaista versiota, jos käytössä ei ole komponenttikirjastoa. Varsinkin React-maailmassa ja oikein tehtynä komponenttien muutokset ovat erittäin vaivatonta valuttaa hyödyntäviin projekteihin. Parhaimmillaan yhdellä yarn/npm-komennolla”, toteaa Oskari.
Viime aikoina kiinnostus living style guideihin eli eläviin tyylioppaisiin on lisääntynyt kohisten – julkinen tyyliopas on mm. Elisalla ja yksityisiä joukolla muita suomalaisia yrityksiä. Maailmalla julkisia tyylioppaita on enemmänkin. “Niitä voi ja kannattaa käyttää benchmarkina: miten muualla jokin on tehty, mikä voisi olla hyvä tapa?” neuvoo Oskari.
Tyyliopas pitää yleisesti ottaen sisällään komponenttien ja niiden dokumentaatioiden lisäksi ohjeistusta suunnittelijoille. “Se että on koodattu kirkuvan punainen painike, ei luonnollisesti tarkoita sitä, että kyseistä painiketta voisi käyttää tilanteessa kuin tilanteessa“, muistuttaa Oskari.
“Elävien tyylioppaiden toteuttamiseen on olemassa valmiita pakettiratkaisuja, kuten vaikkapa React Styleguidist, mutta muokattavuus omiin tarpeisiin ei välttämättä ole riittävä”, sanoo Oskari. “Valmisratkaisu on varsinkin alkuvaiheessa ok, mutta nopeasti ollaan tilanteessa, jossa koko tyylioppaan voisi rakentaa sitä varten koodatuilla komponenteilla.”
Kuka?
Oskari Blomberg, kotoisin Mikkelistä, Compilella syksystä 2017. Aiemmin pitkään Ylellä uutis- ja ajankohtaissivustojen toteuttajana. Päätyi alalle “vahingossa” – media-assistentti innostui koodauksesta ja käväisi armeijan jälkeen Tampereella IT-tradenomiopinnoissa, mutta työelämä vei mennessään ensin digitoimistoihin ja sitten Ylelle.