Esiselvitys JSF-sovelluksen uudistamisesta yhden sivun sovelluksen teknologioilla
Aalto, Sami (2021)
2021
Johtamisen ja tietotekniikan DI-ohjelma - Master's Programme in Management and Information Technology
Informaatioteknologian ja viestinnän tiedekunta - Faculty of Information Technology and Communication Sciences
This publication is copyrighted. You may download, display and print it for Your own personal use. Commercial use is prohibited.
Hyväksymispäivämäärä
2021-03-30
Julkaisun pysyvä osoite on
https://urn.fi/URN:NBN:fi:tuni-202103082447
https://urn.fi/URN:NBN:fi:tuni-202103082447
Tiivistelmä
Tässä työssä tehdään esiselvitystä sille, miten JavaServer Faces (JSF) -pohjaisen järjestelmän käyttöliittymän saa päivitettyä käyttämään yhden sivun sovelluksen teknologioita. Migraatiokeinona tutkitaan erityisesti vaiheistettua migraatiota, jossa vanha ja uusi teknologia muodostavat migraation aikana hybridijärjestelmän. Hybridijärjestelmässä osa sivuista käyttää vanhaa ja osa uutta teknologiaa.
Esiselvityksen tavoitteena on tutkia, miten JSF-toteutus voidaan siirtää yhden sivun sovelluksen teknologioille. Integraatiossa tutkitaan sekä eri teknologian sivujen välistä integraatiota että kommunikaatiota Java EE -palvelimen kanssa.
Esiselvityksessä migraatiokeinoja tutkitaan käytännönläheisesti kahden prototyypin avulla. Prototyypit toteutetaan eri teknologioilla ja eri integraatiolähestymisillä. Ensimmäinen prototyyppi toteutetaan Angularilla siten, että Angular-alijärjestelmä on itsenäinen yhden sivun sovellus. Toinen prototyyppi toteutetaan Reactilla siten, että jokaisella sivulla on oma React-sovellus, joka alustetaan JSF-sivun sisällä.
Prototyypeissä toteutetaan pohja migraation tekemiselle ja siirretään yhden näkymän toiminnallisuus vanhasta järjestelmästä. Lisäksi tarkastellaan yleisellä tasolla, miten JSF-toiminnallisuuden voi siirtää uusille teknologioille ja mitä osia tästä voidaan automatisoida.
Prototyyppien teon aikana löydetään keinoja JSF-logiikan siirtämiseksi ja kehitetään automatisointityökaluja, jotka tekevät osan näkymäkoodin koodimuunnoksista automaattisesti. Kehitellyt työkalut koetaan hyväksi pohjaksi migraatioiden tekemiselle.
Prototyyppien molemmat teknologiat ja integrointimenetelmät koetaan mahdollisiksi migraatioratkaisuiksi. Angular on ominaisuuksiltaan ja rakenteeltaan hieman lähempänä JSF-teknologiaa. Angular-prototyypin lähestymisen koetaan soveltuvan hieman paremmin laajaan migraatioon, jossa koko järjestelmä halutaan vaihtaa yhden sivun sovellukseksi. Se kuitenkin vaatii enemmän työtä varsinkin migraation alkuaikoina. React puolestaan koetaan soveltuvan paremmin pienemmän tason migraatioon, jossa uutta teknologiaa halutaan vain järjestelmän tiettyihin osiin. Vaikka React ei suoraan tarjoa kaikkia identtisiä ominaisuuksia kuin JSF, ne pystyy toteuttamaan itse tai apukirjastojen avulla. In this thesis migration methods are investigated for updating a JavaServer Faces (JSF) based system with Single-page application (SPA) technologies. One particular migration method under investigation is phased interoperability migration where old and new technologies form a hybrid system. During migration some of the pages in the system use old technologies and some use the new ones.
The goal of the study is to investigate how JSF application can be migrated to SPA technologies and how the technologies can be integrated with each other. Both the integration between pages of different technologies and the integration betwen single-page application pages and the Java EE backend are investigated.
Migration methods are investigated on practical level with two prototypes. Prototypes use different technologies and different integration approaches. First prototype is implemented with Angular and uses Angular as mostly independent single-page application. The second prototype uses React and instead for each page has individual React applications which are initialised inside of JSF pages.
In the prototypes the migration foundations are implemented and a single page from the inspected system is migrated to the new technology. In addition, it is analysed on more general level how JSF functionality can be migrated into the new technologies and which parts of it can be automatised.
During the study both prototypes are implemented successfully. Methods for JSF migration are found and helpful automatisation tools are implemented for automatising some of the code transformations. These tools are helpful in reducing manual work during the migration.
At the end of the study both technologies and integration methods are deemed to be possible solutions for the migration. In terms of functionality, Angular is slightly closer to JSF and seems to be slightly better suited for a large-scale migration, which attempts to update the entire system. It however requires more work in the early stages of migration. React on the other hand seems to be better suited for a smaller scale migration, where only parts of the application are updated. Even though React does not directly provide all the same features as JSF, they can be easily implemented.
Esiselvityksen tavoitteena on tutkia, miten JSF-toteutus voidaan siirtää yhden sivun sovelluksen teknologioille. Integraatiossa tutkitaan sekä eri teknologian sivujen välistä integraatiota että kommunikaatiota Java EE -palvelimen kanssa.
Esiselvityksessä migraatiokeinoja tutkitaan käytännönläheisesti kahden prototyypin avulla. Prototyypit toteutetaan eri teknologioilla ja eri integraatiolähestymisillä. Ensimmäinen prototyyppi toteutetaan Angularilla siten, että Angular-alijärjestelmä on itsenäinen yhden sivun sovellus. Toinen prototyyppi toteutetaan Reactilla siten, että jokaisella sivulla on oma React-sovellus, joka alustetaan JSF-sivun sisällä.
Prototyypeissä toteutetaan pohja migraation tekemiselle ja siirretään yhden näkymän toiminnallisuus vanhasta järjestelmästä. Lisäksi tarkastellaan yleisellä tasolla, miten JSF-toiminnallisuuden voi siirtää uusille teknologioille ja mitä osia tästä voidaan automatisoida.
Prototyyppien teon aikana löydetään keinoja JSF-logiikan siirtämiseksi ja kehitetään automatisointityökaluja, jotka tekevät osan näkymäkoodin koodimuunnoksista automaattisesti. Kehitellyt työkalut koetaan hyväksi pohjaksi migraatioiden tekemiselle.
Prototyyppien molemmat teknologiat ja integrointimenetelmät koetaan mahdollisiksi migraatioratkaisuiksi. Angular on ominaisuuksiltaan ja rakenteeltaan hieman lähempänä JSF-teknologiaa. Angular-prototyypin lähestymisen koetaan soveltuvan hieman paremmin laajaan migraatioon, jossa koko järjestelmä halutaan vaihtaa yhden sivun sovellukseksi. Se kuitenkin vaatii enemmän työtä varsinkin migraation alkuaikoina. React puolestaan koetaan soveltuvan paremmin pienemmän tason migraatioon, jossa uutta teknologiaa halutaan vain järjestelmän tiettyihin osiin. Vaikka React ei suoraan tarjoa kaikkia identtisiä ominaisuuksia kuin JSF, ne pystyy toteuttamaan itse tai apukirjastojen avulla.
The goal of the study is to investigate how JSF application can be migrated to SPA technologies and how the technologies can be integrated with each other. Both the integration between pages of different technologies and the integration betwen single-page application pages and the Java EE backend are investigated.
Migration methods are investigated on practical level with two prototypes. Prototypes use different technologies and different integration approaches. First prototype is implemented with Angular and uses Angular as mostly independent single-page application. The second prototype uses React and instead for each page has individual React applications which are initialised inside of JSF pages.
In the prototypes the migration foundations are implemented and a single page from the inspected system is migrated to the new technology. In addition, it is analysed on more general level how JSF functionality can be migrated into the new technologies and which parts of it can be automatised.
During the study both prototypes are implemented successfully. Methods for JSF migration are found and helpful automatisation tools are implemented for automatising some of the code transformations. These tools are helpful in reducing manual work during the migration.
At the end of the study both technologies and integration methods are deemed to be possible solutions for the migration. In terms of functionality, Angular is slightly closer to JSF and seems to be slightly better suited for a large-scale migration, which attempts to update the entire system. It however requires more work in the early stages of migration. React on the other hand seems to be better suited for a smaller scale migration, where only parts of the application are updated. Even though React does not directly provide all the same features as JSF, they can be easily implemented.