Web framework modernizations : A pilot experiment transpiling AngularJS to Angular
Lunnikivi, Vivian (2025)
2025
Tietotekniikan DI-ohjelma - Master's Programme in Information Technology
Informaatioteknologian ja viestinnän tiedekunta - Faculty of Information Technology and Communication Sciences
Hyväksymispäivämäärä
2025-12-04
Julkaisun pysyvä osoite on
https://urn.fi/URN:NBN:fi:tuni-2025112711016
https://urn.fi/URN:NBN:fi:tuni-2025112711016
Tiivistelmä
Early web sites were implemented manually from scratch as static HTML documents offering little, if any, interactivity. Web 2.0 popularized dynamic, on-demand content displayed on user interactions, and introduced web technologies that support creating and displaying the new, more versatile content. One popular technique to implement modern, interactive web applications are so called single-page applications (SPA). To support creation of SPAs, several web frontend frameworks have been developed, many of these written in JavaScript. These frameworks pro vide ready-made implementations and tooling for common features and techniques seen in SPAs and during their development. The purpose of web frameworks is to facilitate web development and improve the quality of developed applications, when developers are not forced to solve every detail of the development process themselves, but can tap into the expertise of the framework developers.
The downside of web frameworks, as is for other technologies, is that they deprecate. Security updates or changes in the philosophy of how a framework is architectured occasionally lead to newer versions of the framework being incompatible with the previous versions of the technology. Alternatively, the maintenance of a framework may seize altogether. Applications written with deprecated framework versions need to be updated to newer versions or migrated to an alternative technology altogether. These types of modernization problems are often called application migrations.
Migrating an application is often a cumbersome undertaking, especially in the case of larger code bases. Therefore, several approaches and tools have been developed to assist in different kinds of migration problems. A summary of approaches addressing web framework migrations is presented in this thesis. Special attention is given to migration of AngularJS applications, and a pilot experiment is conducted to explore the particular migration problem from AngularJS to Angular.
AngularJS is a web frontend framework originally released in 2010, used to build SPAs. In 2016, the developers of AngularJS released a complete rewrite of the framework in TypeScript, calling it Angular. The original AngularJS framework had an end-of-life in 2021, forcing any applications written in AngularJS to be upgraded, for example, to Angular. The approach the Angular team recommends for the migration is to utilize the Angular ngUpgrade module, which enables running both versions of the framework in parallel in the same application. This allows for upgrading the code base one part of the application at a time. The downside of this approach is that it does not decrease the amount of required manual work in the conversion.
An alternative approach to the migration is to perform the migration in one go, making use of helper tools that automate parts of the conversion. One such tool, angularjs-to-angular, has been developed for aiding the migration from AngularJS to Angular. In this thesis, the angularjs to-angular tool is tested by performing a pilot experiment in which a simple test application built on a handful of the core functionalities of AngularJS, is upgraded to an Angular 6 application, utilizing the tool during the modernization.
To validate the resulting application and the migration approach used to produce it, a reference modernization is performed on the same application. The reference application is formed by following the approach laid out by the Angular migration guide, where Angular is brought alongside the AngularJS application in the original application and the application is converted piece by piece.
As a result of the experiment, both approaches produce a starting and mostly functional, pure Angular 6 application, verified by a set of manual functional tests. The applications implementations differ mostly in terms of tooling used to implement them, but some structural differences also emerge. Both approaches require preparation steps to be performed on the test application before the upgrade, but most of the steps were either identical or very similar. Most of the differences in the approaches relate to performing the actual upgrade. In one hand, the reference approach requires some additional work in terms of setting up the intercommunication between application parts implemented in different versions of the framework, but as an upside, the applica tion remains functional throughout the conversion process. On the other hand, the script-assisted modernization approach only utilizes one framework version at the time, but there is a moment during the upgrade when most parts of the application need to be converted at once, which might prove difficult for larger applications. Varhaiset verkkosovellukset toteutetiin käsin alusta loppuun staattisina HTML-dokumentteina, jotka tarjosivat vähän, jos ollenkaan vuorovaikutteisia komponentteja. Web 2.0:n myötä dynaaminen, käyttäjän vuorovaikutuksesta ladattava ja esitettävä sisältö yleistyi, ja samalla kehitettiin teknologioita, jotka mahdollistivat monipuolisemman sisällön esittämisen. Yksi suosittu tekniikka modernien vuorovaikutteisten sovellusten tuottamiseen ovat niin sanotut yhden sivun verkkosovellukset eli SPA:t (Single-Page Application). SPA:iden toteuttamiseen on kehitetty 2000-luvulla useita, erityisesti JavaScriptillä toteutettuja viitekehyksiä, jotka tarjoavat valmiita toteutuksia erilaisille operaatioille, joita SPA-sivuilla ja niiden kehityksen aikana on tapana käyttää. Viitekehyksien tarkoituksena on muun muassa nopeuttaa sivujen kehittämistä ja tuottaa laadukkaampia sovelluksia, kun kehittäjien ei tarvitse ratkaista jokaista sovelluskehitykseen liittyvää yksityiskohtaa alusta asti.
Viitekehysten, kuten muidenkin teknologioiden varjopuolena on niiden vanheneminen. Tietoturvapäivitykset tai muutokset viitekehysten toteutusfilosofiassa usein johtavat tilanteisiin, jossa viitekehyksistä julkaistavat uudet versiot eivät ole enää yhteensopivia edellisten versioiden kanssa. Toisinaan myös viitekehysten ylläpito voidaan lopettaa kokonaan. Vanhentuneilla viitekehysversioilla toteutetut sovellukset tulee ennen pitkää päivittää käyttämään uudempia versioita tai viedä täysin toiselle viitekehykselle, jolloin puhutaan sovellusmigraatioista.
Kokonaisten sovellusten migratointitehtävät ovat usein erityisesti suurempien sovellusten kohdalla suuritöisiä hankkeita, joten lukuisia lähestymistapoja ja työkaluja on kehitetty erilaisten migraatio-ongelmien ratkomisen avuksi. Tässä työssä tehdään katsaus lähestymistapoihin, joissa käsitellään verkkosovellusten migraatioita viitekehyksiltä toisille, ja erityisesti keskitytään AngularJS-sovellusten päivittämiseen.
AngularJS on alkujaan vuonna 2010 julkaistu verkon asiakaspuolen SPA-teknologia, josta AngularJS:n tekijät julkaisivat vuonna 2016 alusta asti TypeScriptillä uudelleenkirjoitetun version, kutsuen sitä nimellä Angular. Alkuperäinen AngularJS vanhentui vuonna 2021, jonka jälkeen viimeistään kaikki vanhalla AngularJS:llä kirjoitetut sovellukset täytyy migratoida, esimerkiksi Angularille. Angular-tiimin suosittelema tapa migraatioon on hyödyntää migraatiossa Angularin tarjoamaa ngUpgrade-moduulia, joka mahdollistaa sekä AngularJS:llä että Angularilla toteutettujen sovelluskoodiosoiden ajamisen rinnakkain samassa sovelluksessa. Tämä mahdollistaa koodipohjan uudistamisen yksi sovellusosa kerrallaan. Lähestymistavan kääntöpuolena on, ettei se vähennä migraatiossa vaadittavan käsin tehtävän muunnostyön määrää.
Toinen tapa on toteuttaa migraatio on kerralla, hyödyntäen apuna ohjelmakoodilla toteuttuja aputyökaluja. Eräs tällainen aputyökalu on nimeltään angularjs-to-angular, joka on toteutettu juurikin AngularJS-sovellusten migratoimiseen Angularille. Tässä työssä työkalua testattiin suorittamalla koe, jossa yksinkertainen AngularJS-viitekehyksen muutamia oleellisimpia ominaisuuksia hyödyntävä testisovellus päivitettiin Angularin versioon 6 hyödyntäen angularjs-to-angular-työkalua.
Varsinaisen käännöksen ja käännöksen muodostamiseen käytetyn lähestymistavan validoimiseksi samasta testiohjelmasta muodostettiin vertailukäännös myös noudattaen Angular-tiimin suosittelemaa migraatiotapaa, jossa Angular-viitekehys tuotiin alkuperäiseen sovellukseen AngularJS:n rinnalle, ja sovelluksen osat muunnettiin Angularille yksi kerrallaan.
Kokeen tuloksena molemmat lähestymistavat tuottivat käynnistyvän ja suurimmilta osin toiminnallisen, puhtaasti Angularin versiolla 6 toteutetun sovelluksen. Toiminnallisuus varmistettiin joukolla manuaalisia toiminnallisia testitapauksia. Sovelluksien toteutukset eroavat toisistaan lähinnä niiden käyttämien työkalujen osalta, mutta joitakin rakenteellisiakin eroja sovelluksiin muodostui. Kumpikin lähestymistapa vaati esivalmistelua käännettävälle sovellukselle, tosin esivalmisteluaskelissa lähestymistavoissa ei ollut juurikaan eroa. Suurimmat erot lähestymistavoissa liittyivät varsinaisen käännöksen suorittamiseen. Referenssimodernisaatio vaatii oman ylimääräisen työnsä komponenttien eri versioiden välisen vuorovaikutuksen fasilitointiin, mutta referenssimodernisaation aikana sovellus pysyy jokaisen komponentin päivittämisen välissä kääntyvänä ja toiminnallisena. Toisaalta varsinaisessa käännöksessä sovellusta ajetaan vain yhdessä viitekehyksessä kerrallaan, mutta päivityksessä muodostuu hetki, jonka aikana oleellisin osa sovelluksen osista tulee päivittää kerralla. Se voi olla hankala toteuttaa suuren sovelluksen tapauksessa.
The downside of web frameworks, as is for other technologies, is that they deprecate. Security updates or changes in the philosophy of how a framework is architectured occasionally lead to newer versions of the framework being incompatible with the previous versions of the technology. Alternatively, the maintenance of a framework may seize altogether. Applications written with deprecated framework versions need to be updated to newer versions or migrated to an alternative technology altogether. These types of modernization problems are often called application migrations.
Migrating an application is often a cumbersome undertaking, especially in the case of larger code bases. Therefore, several approaches and tools have been developed to assist in different kinds of migration problems. A summary of approaches addressing web framework migrations is presented in this thesis. Special attention is given to migration of AngularJS applications, and a pilot experiment is conducted to explore the particular migration problem from AngularJS to Angular.
AngularJS is a web frontend framework originally released in 2010, used to build SPAs. In 2016, the developers of AngularJS released a complete rewrite of the framework in TypeScript, calling it Angular. The original AngularJS framework had an end-of-life in 2021, forcing any applications written in AngularJS to be upgraded, for example, to Angular. The approach the Angular team recommends for the migration is to utilize the Angular ngUpgrade module, which enables running both versions of the framework in parallel in the same application. This allows for upgrading the code base one part of the application at a time. The downside of this approach is that it does not decrease the amount of required manual work in the conversion.
An alternative approach to the migration is to perform the migration in one go, making use of helper tools that automate parts of the conversion. One such tool, angularjs-to-angular, has been developed for aiding the migration from AngularJS to Angular. In this thesis, the angularjs to-angular tool is tested by performing a pilot experiment in which a simple test application built on a handful of the core functionalities of AngularJS, is upgraded to an Angular 6 application, utilizing the tool during the modernization.
To validate the resulting application and the migration approach used to produce it, a reference modernization is performed on the same application. The reference application is formed by following the approach laid out by the Angular migration guide, where Angular is brought alongside the AngularJS application in the original application and the application is converted piece by piece.
As a result of the experiment, both approaches produce a starting and mostly functional, pure Angular 6 application, verified by a set of manual functional tests. The applications implementations differ mostly in terms of tooling used to implement them, but some structural differences also emerge. Both approaches require preparation steps to be performed on the test application before the upgrade, but most of the steps were either identical or very similar. Most of the differences in the approaches relate to performing the actual upgrade. In one hand, the reference approach requires some additional work in terms of setting up the intercommunication between application parts implemented in different versions of the framework, but as an upside, the applica tion remains functional throughout the conversion process. On the other hand, the script-assisted modernization approach only utilizes one framework version at the time, but there is a moment during the upgrade when most parts of the application need to be converted at once, which might prove difficult for larger applications.
Viitekehysten, kuten muidenkin teknologioiden varjopuolena on niiden vanheneminen. Tietoturvapäivitykset tai muutokset viitekehysten toteutusfilosofiassa usein johtavat tilanteisiin, jossa viitekehyksistä julkaistavat uudet versiot eivät ole enää yhteensopivia edellisten versioiden kanssa. Toisinaan myös viitekehysten ylläpito voidaan lopettaa kokonaan. Vanhentuneilla viitekehysversioilla toteutetut sovellukset tulee ennen pitkää päivittää käyttämään uudempia versioita tai viedä täysin toiselle viitekehykselle, jolloin puhutaan sovellusmigraatioista.
Kokonaisten sovellusten migratointitehtävät ovat usein erityisesti suurempien sovellusten kohdalla suuritöisiä hankkeita, joten lukuisia lähestymistapoja ja työkaluja on kehitetty erilaisten migraatio-ongelmien ratkomisen avuksi. Tässä työssä tehdään katsaus lähestymistapoihin, joissa käsitellään verkkosovellusten migraatioita viitekehyksiltä toisille, ja erityisesti keskitytään AngularJS-sovellusten päivittämiseen.
AngularJS on alkujaan vuonna 2010 julkaistu verkon asiakaspuolen SPA-teknologia, josta AngularJS:n tekijät julkaisivat vuonna 2016 alusta asti TypeScriptillä uudelleenkirjoitetun version, kutsuen sitä nimellä Angular. Alkuperäinen AngularJS vanhentui vuonna 2021, jonka jälkeen viimeistään kaikki vanhalla AngularJS:llä kirjoitetut sovellukset täytyy migratoida, esimerkiksi Angularille. Angular-tiimin suosittelema tapa migraatioon on hyödyntää migraatiossa Angularin tarjoamaa ngUpgrade-moduulia, joka mahdollistaa sekä AngularJS:llä että Angularilla toteutettujen sovelluskoodiosoiden ajamisen rinnakkain samassa sovelluksessa. Tämä mahdollistaa koodipohjan uudistamisen yksi sovellusosa kerrallaan. Lähestymistavan kääntöpuolena on, ettei se vähennä migraatiossa vaadittavan käsin tehtävän muunnostyön määrää.
Toinen tapa on toteuttaa migraatio on kerralla, hyödyntäen apuna ohjelmakoodilla toteuttuja aputyökaluja. Eräs tällainen aputyökalu on nimeltään angularjs-to-angular, joka on toteutettu juurikin AngularJS-sovellusten migratoimiseen Angularille. Tässä työssä työkalua testattiin suorittamalla koe, jossa yksinkertainen AngularJS-viitekehyksen muutamia oleellisimpia ominaisuuksia hyödyntävä testisovellus päivitettiin Angularin versioon 6 hyödyntäen angularjs-to-angular-työkalua.
Varsinaisen käännöksen ja käännöksen muodostamiseen käytetyn lähestymistavan validoimiseksi samasta testiohjelmasta muodostettiin vertailukäännös myös noudattaen Angular-tiimin suosittelemaa migraatiotapaa, jossa Angular-viitekehys tuotiin alkuperäiseen sovellukseen AngularJS:n rinnalle, ja sovelluksen osat muunnettiin Angularille yksi kerrallaan.
Kokeen tuloksena molemmat lähestymistavat tuottivat käynnistyvän ja suurimmilta osin toiminnallisen, puhtaasti Angularin versiolla 6 toteutetun sovelluksen. Toiminnallisuus varmistettiin joukolla manuaalisia toiminnallisia testitapauksia. Sovelluksien toteutukset eroavat toisistaan lähinnä niiden käyttämien työkalujen osalta, mutta joitakin rakenteellisiakin eroja sovelluksiin muodostui. Kumpikin lähestymistapa vaati esivalmistelua käännettävälle sovellukselle, tosin esivalmisteluaskelissa lähestymistavoissa ei ollut juurikaan eroa. Suurimmat erot lähestymistavoissa liittyivät varsinaisen käännöksen suorittamiseen. Referenssimodernisaatio vaatii oman ylimääräisen työnsä komponenttien eri versioiden välisen vuorovaikutuksen fasilitointiin, mutta referenssimodernisaation aikana sovellus pysyy jokaisen komponentin päivittämisen välissä kääntyvänä ja toiminnallisena. Toisaalta varsinaisessa käännöksessä sovellusta ajetaan vain yhdessä viitekehyksessä kerrallaan, mutta päivityksessä muodostuu hetki, jonka aikana oleellisin osa sovelluksen osista tulee päivittää kerralla. Se voi olla hankala toteuttaa suuren sovelluksen tapauksessa.