React-sovelluksen optimointi

Abstract

Opinnäytetyön tarkoituksena oli tutkia erilaisia tapoja optimoida React-sovellusta ja soveltaa opittua eSend Oy:n olemassa oleviin sovelluksiin. Sovelluksissa pyritään ensisijaisesti optimoimaan suorituskykyä, jotta asiakaskokemus olisi mahdollisimman hyvä.

eSendin sovellukset on tehty ennen React hookien saapumista ja sisältävät paljon legacy-koodia, joten työn tavoitteena olisi päivittää sovelluksia nykyaikaan. Ensisijaisesti päivitettyjen sovellusten tulisi olla suorituskyvyltään tehokkaampia. Optimointiin valikoitui pääsääntöisesti hookit ja Redux. Hookit ovat Reactin uusia ominaisuuksia ja Redux kirjasto, jotka on tuotu juuri optimoimisen helpottamista varten.

Itse sovelluksen optimoimisen tuloksena voitiin huomata, että koodin rivien määrä ei niinkään vähentynyt merkittävästi, mutta loppukäyttäjän kokemus parani huomattavasti. Myös sovelluksen suorituskyvyssä oli havaittavissa kehitystä. Sovelluksen optimointia varten tehtyjä muutoksia otettiin suurissa määrin käyttöön heti ja osaa jatkokehitetään tulevaisuudessa.

The purpose of the bachelor’s thesis was to search different ways to optimise a React application and use the findings to improve existing applications of eSend Oy. Regarding the applications the primary objective was to optimize performance to ensure as good customer experience as possible.

The Applications of eSend have been made before the release of React hooks and contain lots of so-called legacy code, so the object of the work was to update the applications to this day. Primarily the updated applications should be more efficient regarding performance. The reason for using React hooks and Redux is that they are new features and created for optimising React applications.

As the result of the optimizing work, it was possible to notice that the amount of code did not significantly decrease but the end users experience improved noticeably. Also, it was possible to notice progress regarding performance of the application. Plenty of changes made for the application were brought to use right away, while other changes still need some further development.