Blogi ja uutiset

Takaisin
27.11.2019

Angular-päivityksen ensiaskeleet

Sisun käyttöliittymä on rakennettu Googlen AngularJS-ohjelmistokehyksellä (framework), joka oli projektin alkaessa kuutisen vuotta sitten monen ykkösvalinta. Sittemmin frontend-kehitys on mennyt vauhdilla eteenpäin, ja Googlekin päätti kirjoittaa kehyksensä kokonaan uudelleen versiosta 2 eteenpäin, nimeten uuden versionsa pelkästään Angulariksi. AngularJS:n aktiivinen kehitys lopetettiin viime kesänä, ja vaikka siihen tehdään korjauspäivityksiä vielä kesäkuuhun 2021 asti, on Sisussakin aloitettu uuden Angularin käyttöönotto.

Vaikka AngularJS ja Angular ovat samanlaisia nimensä ja käsitteidensä puolesta, teknisesti ne eroavat toisistaan suuresti. AngularJS on käytössä monessa suuressa projektissa, ja Google tarjoaakin työkaluja ja dokumentaatiota Angulariin siirtymisen helpottamiseksi. Tästä tuesta huolimatta päivitys on iso urakka, koska erot versioiden välillä ovat niin suuria, että koodimuutokset täytyy tehdä käsin.

Tässä toistaiseksi suurimmat Angular-päivitykseen liittyvät virstanpylväät eri Sisu-versioissa:

Majava (1.0) tammikuu 2019:
Webpack-paketointi käytössä kaikissa sovelluksissa

Silakka (1.1) maaliskuu 2019:
– end-to-end-testeissä aloitetaan siirtyminen Protractorista Cypressiin (Protractor ei toiminut AngularJS/Angular-hybridisovellusten kanssa ngUpgrade-alustusta käytettäessä, josta olemme tosin myöhemmin siirtyneet downGradeModule-alustukseen edellisen suorituskykyongelmien vuoksi)

Kuha (1.2) huhtikuu 2019:
– pääkäyttäjän sovelluksen ajo AngularJS/Angular-hybridisovelluksena
– pääkäyttäjän sovelluksen paketointi Angular CLI -työkalulla
– yksi pääkäyttäjän komponentti muunnettu Angulariksi

Hauki (1.3) heinäkuu 2019:
– useampi pääkäyttäjän komponentti ja palvelu muunnettu Angulariksi
– yhteiskäyttöiset komponentit käyttöön osittaisena Angular-kirjastona

Tiikerihai (1.4) marraskuu 2019:
– loppujen sovellusten (opiskelija, hallinto, opettaja, tuutori) ajo AngularJS/Angular-hybridisovelluksena ja paketointi Angular CLI:llä
– lisää pääkäyttäjän palveluita muunnettu Angulariksi
– joitakin eri sovellusten komponentteja muunnettu Angulariksi

Sisussa vanhasta AngularJS:stä uuteen Angulariin siirtymistä pohjustettiin viime vuonna, kun aloimme paketoida koodimme Webpack-työkalulla, jota Angularkin käyttää. Itse sovelluskoodin päivittäminen aloitettiin tämän vuoden alkupuolella. AngularJS:ää ja Angularia on mahdollista ajaa rinnan samassa sovelluksessa, ja tähän hybridisovellusmalliin olemme siirtyneet myös Sisusta tämän vuoden aikana. Päivitystä on alustusvaiheessa tehnyt pääasiassa kerralla vain yksi henkilö, mutta viime kuukausina useampi kehittäjä on päässyt kokeilemaan Angularilla tekemistä.

Siirtymistä hidastaa vielä merkittävästi osa käyttämistämme käyttöliittymäkirjastoista, jotka pitää päivittää uudempiin versioihin, suurimpana Bootstrap ja siitä riippuvat Angular-kirjastot. Tämän jälkeen ei toivottavasti ole enää suurempia teknisiä esteitä loppujen käyttöliittymäkomponenttien muuntamiseksi. Tavoitteena olisi tehdä jatkossa uudet komponentit pääasiassa uudella Angularilla ja päivittää vanhaa koodia tilaisuuden tullen, kun sitä muutenkin muokataan.

Monia yllätyksiä on tullut matkan varrella vastaan, mutta sisukkaasti homma etenee!