Kohti uutta Angularia: päivitettyjen käyttöliittymäkirjastojen tyylittely
Angular-päivityksen myötä Sisun käyttöliittymäkomponenttien tyylit luotiin alusta asti uusiksi.
Sisun meneillään oleva Angular-päivitys vaikuttaa Sisun kehitykseen yhä monella tapaa. Kuten aiemmassa blogikirjoituksessa opimme, Angular-päivityksen onnistuminen tarkoitti komponentti- ja käyttöliittymäkirjaston päivittämistä sekä niiden myötä useimpien käyttöliittymäkomponenttien tyylien uudelleenkirjoitusta. Päivitykset toivat mukanaan valtavan työmäärän tekniselle puolelle, mutta samalla myös tyylipuolelle.
Bootstrap 4 -käyttöliittymäohjelmistokehyksen käyttöönotto
Päivitys alkoi Bootstrap-käyttöliittymäohjelmistokehyksen vaihtamisella, joka alkuun tarkoitti molempien versioiden, Bootstrap 3:n ja Bootstrap 4:n rinnakkaiseloa. Aiemmin käytössä ollut Bootstrap 3 hyödyntää CSS:n esiprosessoinnissa Lessiä ja Sassia, joista Sisun käyttöön oli aikojen saatossa valikoitunut ainoastaan Less. Bootstrap 4 sen sijaan käyttää esiprosessoinnissa pelkästään Sassia, joten tarvitsimme muutoksia saadaksemme uuden version toimimaan Sisussa.
Kaikkien tyylirivien kääntäminen Lessistä Sassiksi olisi ollut liian suuri työ koodirivejä ollessa kymmeniä tuhansia, mutta onneksemme Angular tukee automaattisesti molempia esiprosessoinnin muotoja. Sille tarvitsee vain listata käytössä olevat Less- ja Sass-tyylitiedostot, ja Angular osaa kääntää ja yhdistää ne yhdeksi CSS-tiedostoksi.
Aluksi molemmat käyttöliittymäohjelmistokehyksen versiot elivät rinnakkain Bootstrap 4 -konfiguraatiossa, jotta sovelluskehittäjät pystyivät aloittamaan komponenttikirjaston päivittämisen ilman, että Sisun ulkoasu olisi täysin rikki uuden version seurauksena. Kahden version samanaikaista käyttöä ei kuitenkaan ollut tarkoitus jatkaa loputtomiin, vaan Bootstrap 3 -version irrottaminen aloitettiin heti kun Bootstrap 4 -konfiguraatio oli todettu toimivaksi. Työ oli luultua helpompaa ja vaati vain Bootstrap 3 -version importin ja muuttujariippuvuuksien poistamisen.
Bootstrap 4:n tuomia haasteita
Bootstrap 3:n poistaminen rikkoi osan Sisussa käytössä olevien komponenttien tyyleistä, koska niissä oli tukeuduttu osittain Bootstrap 3:n vakiotyyleihin sen sijaan, että jokainen koodirivi olisi ylikirjoitettu. Lisäksi jotkin Bootstrapin tarjoamat ominaisuudet olivat kokeneet uudistuksia versioiden välillä, joten muutamia vanhan version tyylimääreitä otettiin pysyvästi osaksi Sisun koodia.
Yksi tällainen oli Bootstrapin grid -järjestelmä, joka on tärkeä osa sivuston responsiivisuutta ja vaikuttaa sivun ulkoasun käyttäytymiseen eri ruutuko'oilla. Grid-järjestelmä muuttui Bootstrap-versioiden välissä nelitasoisesta viisitasoiseksi: käytännössä tämä tarkoitti sitä, että responsiivisia muutoksia käynnistävien ruutukokojen määrä kasvoi.
Sisussa oli aiemminkin ollut käytössä Bootstrap 3:n pohjalta kustomoitu viisitasoinen grid-järjestelmä, joten muutos ei sinänsä tuonut mitään uutta. Sen sijaan Bootstrap 4:n ruutukoot erosivat Sisussa käytössä olleista, minkä vuoksi jokaisen yksittäisen näkymän käyttäytyminen eri ruutuko’oilla olisi pitänyt suunnitella uusiksi. Aikataulun vuoksi satojen eri näkymien läpikäymiseen ei ollut aikaa, joten oli turvallisinta säilyttää vanha kustomoitu grid-järjestelmä ruutukokoineen ja käyttää siinä Bootstrap 4:n uusia muuttujanimiä.
NG Bootstrap -komponenttien tyylittely
Vaihtuneiden komponenttien tyylien päivitys oli hieman Bootstrapin tyylittelyä suoraviivaisempaa. Harrin ja muutaman muun kehittäjän suorittaman komponenttien käännöstyön jälkeen pääsin aloittamaan tyylien luomista täysin uusille NG Bootstrapin komponenteille. Komponentit olivat toiminnoiltaan samanlaisia kuin aiemmin käytössä olleet UI Bootstrapin komponentit, mutta erilaisen HTML-rakenteen takia vanhoja tyylimääreitä ei voinut automaattisesti hyödyntää.
Näin ollen helpointa oli luoda tyylit alusta asti uusiksi, jotta ne toimisivat kaikissa tilanteissa oikein, eikä vanhoja tyylimääreitä jäisi kummittelemaan. Tyylien luominen tapahtui komponentti kerrallaan, ja paljon käytettyjen komponenttien kohdalla jopa sovellus kerrallaan. Tyylien teon yhteydessä oli etsittävä jokainen paikka, jossa komponenttia on käytetty, jotta kaikki mahdolliset tyylien käyttö- ja rajatapaukset saatiin kiinni.
Päivityksen hyödyt käyttöliittymän kannalta
Päivitys toi mukanaan paljon hyvää ja tarjosi sopivan tilaisuuden kehittää myös Sisun jo olemassa olevia tyylejä ja toimintatapoja. Vaikka Bootstrap 3 tuki sisäänrakennettuja Less-muuttujia, ei niitä kuitenkaan ollut otettu Sisussa täysmittaisesti käyttöön. Uuden Bootstrap 4 -version myötä tyylit oli järkevää rakentaa suoraan komponenttikohtaisten Sass-muuttujien avulla, mikä mahdollistaa tyylien helpomman ylläpidon jatkossa.
Koska kyseessä oli valtavan laaja urakka, tuli Sisun tyylejä tutkittua perinpohjaisesti, jolloin löytyi pieniä eroavaisuuksia saman tyyppisten komponenttien, esimerkiksi pudotusvalikkoratkaisujen, välillä. Päivityksen yhteydessä oli mahdollisuus tarttua epäkohtiin ja yhtenäistää tyylejä entisestään. Tyylien yhtenäistäminen ja turhiksi jääneiden tyylimääreiden poistaminen tehosti koodia ja teki sen ylläpidosta yksinkertaisempaa. Muutokset olivat paikoin niin suuria, että joidenkin komponenttityylien koodirivimäärä saattoi jopa puolittua.
Kaikki parannukset eivät kuitenkaan olleet vain ulkonäöllisiä, vaan komponenttien vaihdon yhteydessä kiinnitettiin myös erityistä huomiota niiden käytettävyyteen. Uudet komponentit olivat käytettävyydeltään edellisiä kehittyneempiä, ja käyttöönoton yhteydessä voitiin varmistaa, että komponentit toimivat Sisussa parhaalla mahdollisella tavalla. Uusien komponenttien käyttöönotto paransi osittain käytettävyyttä ja saavutettavuutta esimerkiksi kontrastien ja näppäimistönavigoinnin osalta.
Tulevaisuus näyttää mitä muita hyötyjä päivitetyistä komponentti- ja käyttöliittymäkirjastoista voikaan olla.