Utilizing Code Generation in Single-Page Applications
Eskelinen, Antti (2021)
Eskelinen, Antti
2021
Tietotekniikan DI-ohjelma - Master's Programme in 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-05-18
Julkaisun pysyvä osoite on
https://urn.fi/URN:NBN:fi:tuni-202104233346
https://urn.fi/URN:NBN:fi:tuni-202104233346
Tiivistelmä
In Wapice, it has been noticed that setting up single-page applications takes a significant amount of time. In each project, the developers need to set up architecture, libraries, authentication and server communication. A generic React application template had been created in Wapice as a solution for the issue. However, as the template is static, it cannot contain features that vary between projects, such as authentication.
In this thesis, the possibility to utilize code generation for the issue mentioned above was researched. The goal was to determine if code generation could reduce repetitive and mechanical tasks in single-page application projects. Also, the parts of single-page applications that could benefit most from code generation were sought.
Code generation can be defined as programming on a higher abstraction level that is currently available. Code generation can improve quality and productivity. However, implementing code generators contain similar risks as any other type of software development.
The research was done as a design and implementation project. The requirements based on nine existing production-grade React projects and the existing React template. The developers of the projects and the template were also interviewed. Three different generators were decided to be implemented based on the interviews: A generator for generating back-end communication code, boilerplate generator and OpenID Connect authentication generator.
The OpenAPI Generator was selected for generating back-end communication code. For the other two generators, there were no ready-to-use tools available. The generators were initially designed to be implemented on top of Hygen. However, due to technical challenges, Hygen was replaced with Plop later in the implementation. Plop and Hygen are tools for developing small scale template-based generators.
Finally, the three generators were graded based on how easily they could be implemented and maintained, how much manual work could be saved using the generator and how easy it is to customize and extend the tool. The OpenAPI Generator got the best scores for the three first criteria. The boilerplate generator was considered easier to maintain and provide better productivity gains from the two Plop generators. The Plop generators were more straightforward to customize than the OpenAPI Generator.
The research found out that the parts that can be modelled on a higher abstraction level, such as back-end communication code, are suitable for code generation. Boilerplate code was found out to be a good target for smaller self-made generators. Wapicella on huomattu, että yhden sivun sovellusten pystyttämiseen kuluu huomattava määrä aikaa. Tyypillisessä projektissa kehittäjän tulee pystyttää arkkitehtuuri, kirjastot, autentikointi ja palvelinkommunikaatio. Ratkaisuna tähän ongelmaan Wapicella on tehty yleiskäyttöinen React pohjaprojekti. Koska pohjaprojekti on yleiskäyttöinen, siihen ei voi sisällyttää projektikohtaisia ominaisuuksia, kuten autentikaatiota.
Työssä tutkittiin mahdollisuutta hyödyntää koodigenerointia edellä mainittuihin ongelmiin. Tavoitteena oli ymmärtää, voisiko koodigeneroinnilla vähentää toisteista työtä yhden sivun sovelluksien toteuttamisessa. Lisäksi haluttiin selvittää, mitkä osat yhden sivun sovelluksista soveltuvat parhaiten generoitaviksi.
Koodigenerointi voidaan määritellä tarkoittamaan ohjelmointia korkeammalla abstraktiotasolla, joka on yleisesti saatavilla kyseisellä hetkellä. Koodigeneroinnilla voidaan parantaa laatua ja tehokkuutta. Toisaalta koodigeneraattorien toteuttamiseen liittyvät samat riskit kuin minkä tahansa ohjelmiston kehittämiseen.
Tutkimus tehtiin suunnittelu- ja toteutusprojektina. Vaatimukset määriteltiin yhdeksän tuotantotasoisen React-projektin ja olemassa olevan React projektipohjan perusteella. Lisäksi projektien ja projektipohjan kehittäjiä haastateltiin. Haastattelujen perusteella päätettiin toteuttaa kolme erilaista generaattoria: Generaattori palvelinkommunikointikoodin generoimiselle, boilerplate-generaattori ja generaattori OpenID Connect autentikoinnin generoimiselle.
Palvelinkommunikaatiokoodin generoimiseen valittiin työkaluksi OpenAPI generaattori. Kahdelle muulle generaattorille ei löytynyt valmiita työkaluja, joten alunperin ne päätettiin toteuttaa itse hyödyntäen Hygen-nimistä työkalua. Kohdattujen teknisten ongelmien vuoksi Hygen jouduttiin vaihtamaan Plop-työkaluun toteutuksen aikana. Plop ja Hygen ovat työkaluja, joilla voidaan toteuttaa pieniä mallipohjaisia generaattoreita.
Toteutetut kolme generaattoria arvioitiin lopuksi. Arviointikriteereinä olivat toteuttamisen helppous, ylläpidettävyys, vähentyneen manuaalisen työn määrä ja muokattavuus. OpenAPI Generator sai täydet pisteet kolmen ensimmäisen kriteerin osalta. Boilerplate-generaattorin arvioitiin olevan kahdesta Plop-generaattorista helpommin ylläpidettävä ja tuottavan enemmän hyötyä. Plop-generaattorit olivat helpommin muokattavissa kuin OpenAPI Generator.
Tutkimuksen perusteella generoitaviksi soveltuvat hyvin osat, joita voidaan mallintaa korkeammalla abstraktiotasolla. Esimerkiksi palvelinkommunikointi voidaan mallintaa OpenAPI määrittelyn avulla. Boilerplate-koodin huomattiin soveltuvan hyvin generoitavaksi pienillä itse toteutetuilla generaattoreilla.
In this thesis, the possibility to utilize code generation for the issue mentioned above was researched. The goal was to determine if code generation could reduce repetitive and mechanical tasks in single-page application projects. Also, the parts of single-page applications that could benefit most from code generation were sought.
Code generation can be defined as programming on a higher abstraction level that is currently available. Code generation can improve quality and productivity. However, implementing code generators contain similar risks as any other type of software development.
The research was done as a design and implementation project. The requirements based on nine existing production-grade React projects and the existing React template. The developers of the projects and the template were also interviewed. Three different generators were decided to be implemented based on the interviews: A generator for generating back-end communication code, boilerplate generator and OpenID Connect authentication generator.
The OpenAPI Generator was selected for generating back-end communication code. For the other two generators, there were no ready-to-use tools available. The generators were initially designed to be implemented on top of Hygen. However, due to technical challenges, Hygen was replaced with Plop later in the implementation. Plop and Hygen are tools for developing small scale template-based generators.
Finally, the three generators were graded based on how easily they could be implemented and maintained, how much manual work could be saved using the generator and how easy it is to customize and extend the tool. The OpenAPI Generator got the best scores for the three first criteria. The boilerplate generator was considered easier to maintain and provide better productivity gains from the two Plop generators. The Plop generators were more straightforward to customize than the OpenAPI Generator.
The research found out that the parts that can be modelled on a higher abstraction level, such as back-end communication code, are suitable for code generation. Boilerplate code was found out to be a good target for smaller self-made generators.
Työssä tutkittiin mahdollisuutta hyödyntää koodigenerointia edellä mainittuihin ongelmiin. Tavoitteena oli ymmärtää, voisiko koodigeneroinnilla vähentää toisteista työtä yhden sivun sovelluksien toteuttamisessa. Lisäksi haluttiin selvittää, mitkä osat yhden sivun sovelluksista soveltuvat parhaiten generoitaviksi.
Koodigenerointi voidaan määritellä tarkoittamaan ohjelmointia korkeammalla abstraktiotasolla, joka on yleisesti saatavilla kyseisellä hetkellä. Koodigeneroinnilla voidaan parantaa laatua ja tehokkuutta. Toisaalta koodigeneraattorien toteuttamiseen liittyvät samat riskit kuin minkä tahansa ohjelmiston kehittämiseen.
Tutkimus tehtiin suunnittelu- ja toteutusprojektina. Vaatimukset määriteltiin yhdeksän tuotantotasoisen React-projektin ja olemassa olevan React projektipohjan perusteella. Lisäksi projektien ja projektipohjan kehittäjiä haastateltiin. Haastattelujen perusteella päätettiin toteuttaa kolme erilaista generaattoria: Generaattori palvelinkommunikointikoodin generoimiselle, boilerplate-generaattori ja generaattori OpenID Connect autentikoinnin generoimiselle.
Palvelinkommunikaatiokoodin generoimiseen valittiin työkaluksi OpenAPI generaattori. Kahdelle muulle generaattorille ei löytynyt valmiita työkaluja, joten alunperin ne päätettiin toteuttaa itse hyödyntäen Hygen-nimistä työkalua. Kohdattujen teknisten ongelmien vuoksi Hygen jouduttiin vaihtamaan Plop-työkaluun toteutuksen aikana. Plop ja Hygen ovat työkaluja, joilla voidaan toteuttaa pieniä mallipohjaisia generaattoreita.
Toteutetut kolme generaattoria arvioitiin lopuksi. Arviointikriteereinä olivat toteuttamisen helppous, ylläpidettävyys, vähentyneen manuaalisen työn määrä ja muokattavuus. OpenAPI Generator sai täydet pisteet kolmen ensimmäisen kriteerin osalta. Boilerplate-generaattorin arvioitiin olevan kahdesta Plop-generaattorista helpommin ylläpidettävä ja tuottavan enemmän hyötyä. Plop-generaattorit olivat helpommin muokattavissa kuin OpenAPI Generator.
Tutkimuksen perusteella generoitaviksi soveltuvat hyvin osat, joita voidaan mallintaa korkeammalla abstraktiotasolla. Esimerkiksi palvelinkommunikointi voidaan mallintaa OpenAPI määrittelyn avulla. Boilerplate-koodin huomattiin soveltuvan hyvin generoitavaksi pienillä itse toteutetuilla generaattoreilla.