Kohti uutta Angularia: komponenttikirjaston päivitys
Sisussa Angular-ohjelmistokehyksen käyttöönotto on jo edennyt pitkälle. Käyttöliittymäkomponenttikirjaston päivitystä on tehty askel kerrallaan erillisen Bootstrap 4 -konfiguraation avulla.
Kuten käyttöliittymäpäivityksen aloituksesta kertoneessa kirjoituksessa mainittiin, AngularJS-ohjelmistokehyksestä Angulariin siirtymiseksi Sisussa oli tarpeen vaihtaa AngularJS-pohjaisesta UI Bootstrap -komponenttikirjastosta Angular-pohjaiseen NG Bootstrap -kirjastoon.
Päivityksen eteneminen komponentti ja sovellus kerrallaan
Päivitystyöhön osallistui muutama sovelluskehittäjiä, välillä vaihtaen muuhun kehitystyöhön tarpeiden mukaan. Kehittäjä teki yleensä yhden käyttöliittymäkomponentin muunnostyöt kerrallaan loppuun yhdessä sovelluksessa (opiskelija, opettaja, tutor, hallinto tai pääkäyttäjä). Samalla hän listasi, missä paikoissa komponentti esiintyy käyttöliittymässä, jotta testaajamme pystyivät vielä käymään ne läpi ja tarkistamaan toimivuuden.
Tässä vaiheessa uudella komponentilla ja sitä käyttävillä paikoilla oli vain vanhaan UI Bootstrap -versioon perustuvat perustyylittelyt; sen verran, että komponenttia pystyi käyttämään. Seuraavaksi meidän käyttöliittymäkehittäjä Tiia teki sille Sisuun sopivat tyylit ja kävi läpi paikat, joissa komponenttia käytettiin, ja varmisti näin tyylien toimivuuden.
Päivitystyön eriyttäminen Bootstrap 4 -konfiguraation avulla
Kaikki päivitystyö tehtiin erillisen Bootstrap 4 -konfiguraation avulla, jotta muutokset saatiin mahdollisimman nopeasti mukaan yleisesti käytössä olevaan lähdekoodiin, vaikuttamatta kuitenkaan Sisun julkaistaviin versioihin ennen kuin työ oli valmis. Käytimme etenkin Angularin mahdollisuutta korvata tiettyjä tiedostoja toisilla. Tehdyn työn määrää kuvaa se, että tällaisia tiedostoja oli parhaimmillaan yhteensä 693 kpl.
Lopulta pystyimme poistamaan erillisen konfiguraation ja tekemään siihen liittyneet muutokset normaalikonfiguraatioon. Tämä tarkoitti tiedostojen korvaamista niiden uusilla versioilla sekä tarpeettomiksi jääneiden AngularJS- ja tyylitiedostojen poistoa. Lisäksi käyttöliittymien Cypress-end-to-end-testit vaativat päivitystä, koska sivujen ja komponenttien rakenteet olivat muuttuneet.
Omien käyttöliittymäkomponenttien käyttö päivityksen sujuvoittamiseksi
Päivitystyön olisi teoriassa voinut tehdä siten, että olisimme kirjoittaneet kaikki UI Bootstrapiä käyttävät AngularJS-komponenttimme tai -palvelumme uusiksi Angularilla ja käyttäen NG Bootstrapiä. Se olisi myös vienyt meitä hyvin eteenpäin tiellämme AngularJS:stä eroon pääsemiseksi. Tällaisia paikkoja on kuitenkin Sisussa niin paljon, että se olisi vaatinut aivan liikaa työtä ja aikaa tässä vaiheessa, kun Sisuun myös kehitetään jatkuvasti uusia ominaisuuksia, joiden arvo asiakkaille on paljon suurempi kuin teknisen päivitystyön.
Niinpä teimme jokaiselle NG Bootstrapin komponentille vastaavia omia Angular-komponenttejamme, jotka ikään kuin käärivät sisäänsä tarvittavan NG Bootstrap -komponentin. Tällaista komponenttia voi käyttää AngularJS-koodissa pienin muutoksin ns. downgrade-menetelmällä, kunhan sen rajapinnan pitää tarpeeksi yksinkertaisena.
Emme kuitenkaan pystyneet täysin välttämään kutsuvien AngularJS-komponenttien uudelleenkirjoittamista uudella Angularilla. Se oli tarpeen tilanteissa, joissa NG Bootstrap -komponentille annetaan viittaus Angular-templaattiin, jollaista ei voi määritellä AngularJS-komponentissa. Tällainen tilanne tulee esimerkiksi silloin, kun Typeahead-komponentin hakutuloksissa halutaan näyttää ylimääräistä tietoa.
Oman käyttöliittymäkomponentin käytöllä on muitakin etuja: sen avulla voidaan tarjota kehittäjille mahdollisimman helppokäyttöinen projektiin mukautettu rajapinta, joka myös auttaa komponentin käytön yhdenmukaistamisessa ja dokumentoinnissa. Päivityksen yhteydessä tulikin vastaan jonkin verran vuosien saatossa syntyneitä eroavaisuuksia UI Bootstrapin komponenttien käytössä, ja niitä saimme samalla yksinkertaistettua ja yhdenmukaistettua.
Loppusuora häämöttää
Kesäkuun alussa ilmestyneessä Sisun 1.7-versiossa siirryttiin Bootstrap 4:ään ja NG Bootstrapiin kolmessa sovelluksessa: tutor, hallinto ja pääkäyttäjä. Loput sovellukset, opiskelija ja opettaja, päivittyvät seuraavassa 1.8-versiossa. Matka on ollut pitkä – päivitystyö aloitettiin jo marraskuun puolivälissä – ja itse päivitystyö pitkälti yksitoikkoista, mutta sisukkuudella siitäkin on selvitty. Tulevassa blogikirjoituksessa käyttöliittymäkehittäjämme Tiia kertoo vielä Bootstrap-käyttöliittymäohjelmistokehyksen päivityksestä ja päivitettyjen komponenttien tyylittelystä.