React-sovelluksen teko nykyaikaisilla menetelmillä

Abstract

Opinnäytetyössä kehitettiin jälleenmyyjäportaalisivusto Seravo Oy:lle kesän 2021 aikana. Ennen portaalisivustoa Seravon tilaustiedot eivät olleet kaikki samassa tietokannassa, joten yrityksen päätös oli uudistaa tilausjärjestelmät täysin. Sivustolla jälleenmyyjä pystyy tarkastelemaan omia tilauksiaan tai tekemään uusia tilauslomakkeen kautta. Kehitystyö keskittyi sivuston käyttöliittymän toteuttamiseen React-kehityskehyksellä, työssä ei huomioitu projektiin liittyvien rajapintojen kehitystä.

Opinnäytetyön tavoitteena oli selvittää, kuinka viime vuosina yleistyneiden funktionaalisten komponenttien käyttö eroaa perinteisistä luokkakomponenteista ja millaisia etuja ja haittoja sisältyy uusilla metodeilla sovelluksen kehittämiseen. Tarkoitus oli käyttää saatua tietoa jälleenmyyjäportaalin kehittämiseen. Tutkimuksen aikana ei kerätty omaa dataa, vaan kaikki lähdemateriaali on lähtöisin alan kirjallisuudesta, dokumentaatiosta tai blogiteksteistä.

Tutkimuksen tuloksena havaittiin, että Reactin koukut kykenevät tekemään saman asian kuin luokkakomponentitkin ja vähemmällä koodilla, mutta kun käytetään TypeScriptiä, tyypitys saattaa aiheuttaa ongelmia. Osa kesän aikana käytetyistä kirjastoista on saanut uudemmat versiot, jotka lisäävät hyödyllisiä ominaisuuksia. Jatkossa voidaan päivittää koodia käyttämään kirjastojen uusimpia versioita sekä integroida Seravon muita järjestelmiä sivustoon, jotta varsinaista käyttökokemusta voidaan testata.

The purpose of this study was to look at the differences between using class components and functional components when developing a React app. The study focused on the amount of code and how easy it was to maintain in an application running on the web browser.

The study was done as a development process while working on a reseller portal for a client. Before the start of the project some background research on the methods was done, which revealed an alternative to class components. Most sources used for the study were either developer blog posts or library documentations with a few books added in for broader theory.

The results of this study indicate that functional components are a valid alternative to class components in projects that range from small to medium size. Generally speaking, functional components include less code and the code is easier to understand at a glance.

In conclusion, functional components are likely to become more common in the future, although class components will not disappear completely. More work is needed to determine whether functional components can truly replace class components in larger and more complex projects.