Kohti uutta Angularia: käyttöliittymäpäivityksen aloitus
Sisussa Angular-ohjelmistokehyksen käyttöönotto on edennyt seuraavaan vaiheeseen. Nyt vuorossa on komponentti- ja käyttöliittymäkirjastojen päivitys.
Ensiaskeleiden jälkeen seuraava vaihe Sisun päivityksessä vanhemmasta AngularJS-ohjelmistokehyksestä uudempaan Angulariin on ollut komponentti- ja käyttöliittymäkirjastojen päivitys. Sisun käyttöliittymät käyttävät ulkopuolisia ”rakennuspalikoita” kahdella tasolla:
- Pohjalla on hyvin yleinen Bootstrap-käyttöliittymäohjelmistokehys, joka tarjoaa paljon valmiita komponentteja ja tyylimäärityksiä sekä keinoja niiden muokkaamiseen.
- Tämän päällä on vielä sovellusohjelmistokehykseen (AngularJS tai Angular) sopiva kirjasto, joka käyttää sisäisesti Bootstrapia ja tarjoaa kehittäjille helpomman tavan liittää käyttöliittymä osaksi muuta ohjelmistokehitystä. AngularJS:ssä tämän kirjaston nimi on UI Bootstrap ja Angularissa puolestaan NG Bootstrap.
Jotta Sisussa pystytään kokonaan vaihtamaan AngularJS:stä uudempaan Angulariin, täytyy meidän siis ensin vaihtaa UI Bootstrap -kirjasto NG Bootstrapiin. Jottei vaihto olisi liian yksinkertaista, UI Bootstrap käyttää Bootstrap-kehyksen 3-versiota ja NG Bootstrap puolestaan 4-versiota, eivätkä nämä versiot ole keskenään yhteensopivia. Siispä meidän on samalla vaihdettava myös Bootstrap uudempaan versioon.
Tämä komponentti- ja käyttöliittymäkirjastojen päivitys on osoittautunut Angular-päivityksen isotöisimmäksi osuudeksi, joka on vaatinut entistä tiiviimpää yhteistyötä kehittäjien välillä. Työtä ovat pääasiassa tehneet Funidatan sovelluskehittäjä Harri ja käyttöliittymäkehittäjä Tiia. Käytännössä työ on sisältänyt kaikkien yleisimpien komponenttien kuten esimerkiksi pudotusvalikkojen ja modaalien kääntämisen uudelle Angular-ohjelmistokehykselle ja tyylien uudelleenluomisen.
Urakka aloitettiin heti kun mahdollista, koska muutettavaa tiedettiin olevan paljon suhteessa käytettävissä olevaan aikaan. Koska halusimme pitää sovelluksemme jatkuvasti toimivina ja julkaisukelpoisina, päätimme hyödyntää Angularin tukea eri konfiguraatioille. Määrittelimme erillisen Bootstrap 4 -konfiguraation, jossa lopulta kaikki Bootstrap 3:a tai UI Bootstrapia käyttävät tiedostot korvataan Bootstrap 4:ää tai NG Bootstrapia käyttävillä. Näin normaalikonfiguraatiolla julkaistavaan sovellukseen ei tule mitään ylimääräistä, eikä muunnostyötä tarvitse saada valmiiksi ennen uuden version julkaisua. Päivitys on tapahtunut ikään kuin salaa taustalla ja on koskettanut pääasiassa vain muutamaa kehittäjää.
Aluksi Harri teki konseptitodistuksen (proof-of-concept), jossa etsimme jokaiselle Sisun käyttämälle UI Bootstrap -komponentille käyttöliittymästä yhden paikan, jonka vaihdoimme käyttämään NG Bootstrapia. Näin saimme paremman käsityksen siitä, mitä vaihtaminen vaatii – etenkin kun sovelluksemme ovat vielä pitkään AngularJS/Angular-hybridejä. Tämän jälkeen työ on jatkunut rinnakkain: Harri ja muutama muu sovelluspuolen kehittäjämme ovat vaihtaneet UI Bootstrap -komponentteja NG Bootstrapin vastaaviksi, ja Tiia on tehnyt tarvittavat muutokset siirtymiseksi nykyisestä Bootstrap-versiosta uudempaan.
Lue lisää komponenttien kääntämisestä ja niille tyylien luomisesta.