Migrating a large JavaScript web UI to TypeScript to improve developer experience
Heiskanen, Maija (2022)
Diplomityö
Heiskanen, Maija
2022
School of Engineering Science, Tietotekniikka
Julkaisun pysyvä osoite on
https://urn.fi/URN:NBN:fi-fe2022102763371
https://urn.fi/URN:NBN:fi-fe2022102763371
Tiivistelmä
Popularity of TypeScript has been rising during the past six years. TypeScript is a programming language that extends JavaScript by adding static typing. Statically typed and dynamically typed programming languages have been compared in research and statically typed programming languages have many advantages over dynamically typed programming languages. Statically typed code bases have better documentation, tooling, and maintainability, and less bugs and greater development speed in large projects. These are also factors that improve Developer Experience. According to research, happy developers are more productive and produce higher quality than unhappy developers. A case company wanted to migrate the JavaScript code of the user interfaces of their SaaS product to TypeScript to improve Developer Experience. The web UI uses Inferno, and the mobile application uses React Native. TypeScript migration can be initialized by installing required type packages, by configuring TypeScript settings, by integrating TypeScript compiler within the build process, by configuring linter for TypeScript and by configuring development tools and environments. In addition, a generator can be used to create API types and automation tools can be searched to speed up the migration. The migration improved Developer Experience and the structure of the code, helped to keep the developers and the product up to date, and possibly decreased the number of bugs and optimized the code. The migration was easier to initialize for React Native than for Inferno, which has a smaller ecosystem. The migration improved Developer Experience by embedding documentation in the code, by improving the auto-complete feature of the IDE and forcing the code to follow good practices and have a consistent structure. TypeScriptin suosio on kasvanut viimeisen kuuden vuoden aikana. TypeScript on JavaScriptiä laajentava kieli, joka lisää JavaScriptiin staattisen tyypityksen. Tutkimuksissa on verrattu staattisesti tyypitettyjä ja dynaamisesti tyypitettyjä ohjelmointikieliä ja staattisesti tyypitetyissä on monia etuja verrattuna dynaamisesti tyypitettyihin. Staattisesti tyypitetyissä koodikannoissa on parempi dokumentaatio, työkalut ja ylläpidettävyys, vähemmän bugeja sekä suurempi kehitysnopeus isoissa projekteissa. Nämä ovat myös tekijöitä, jotka parantavat kehittäjäkokemusta. Tutkimusten mukaan onnelliset ohjelmistokehittäjät ovat tuottavampia ja tuottavat parempaa laatua kuin tyytymättömät ohjelmistokehittäjät. Case-yritys halusi vaihtaa SaaS-tuotteensa käyttöliittymien JavaScript-koodin TypeScript-koodiksi parantaakseen kehittäjäkokemusta. Web-käyttöliittymä käyttää Infernoa ja mobiilisovellus React Nativea. TypeScript-migraatio voidaan alustaa asentamalla tarvittavat tyyppipaketit, konfiguroimalla TypeScript-asetukset, integroimalla TypeScript-kääntäjän osaksi ohjelman rakennusvaihetta, konfiguroimalla lintterin TypeScriptille ja konfiguroimalla kehitystyökalut ja ympäristöt. Lisäksi voidaan luoda generaattori rajapintatyyppien luomiseksi, ja etsiä automaatiotyökaluja migraation nopeuttamiseksi. Migraatio paransi kehittäjäkokemusta ja koodin rakennetta, auttoi pitämään kehittäjät ja tuotteen ajan tasalla, ja mahdollisesti vähensi bugeja ja optimoi koodia. Migraatio oli helpompi toteuttaa React Nativelle, kuin Infernolle, jolla on pienempi ekosysteemi. Migraatio paransi kehittäjäkokemusta sisällyttämällä dokumentaatiota koodiin, parantamalla IDE:n automaattista tekstinsyöttöä, sekä pakottamalla koodin noudattamaan hyviä käytänteitä ja yhtenäisiä rakenteita.