Tilan hallinta React.js-verkkosovelluksessa

Abstract

Tämän opinnäytetyön aiheena oli tilan hallinta React.js-verkkosovelluksessa. Tarve opinnäytetyölle syntyi tarpeesta löytää parhaita toimintatapoja tilan hallintaan. Työssä sivutaan myös verkkosovelluksia ja tilan hallintaa yleisesti.

Opinnäytetyön tavoitteena oli tutkia, miten tilan hallinta tulisi ottaa huomioon React.js-pohjaisen verkkosovelluksen suunnitteluvaiheessa. Lisäksi tutkittiin yleisiä ja poikkeuksellisen haastavia tilanteita tilan hallinnassa ja kartoitettiin parhaita toimintatapoja näiden ongelmien välttämiseksi ja ratkaisemiseksi. Opinnäytetyön tarkoituksena oli tarjota nämä toimintatavat lukijalle tapaus- ja koodiesimerkkien avulla. Työn toteutuksessa käytettäviä tutkimustyyppejä olivat tapaustutkimus ja konstruktiivinen tutkimus.

Tilan hallintaan vaikuttavat loogiset rakenteet ja käytetyt työkalut, sekä näiden pohjalta kirjoitettu koodi. Tässä työssä etsittiin näitä rakenteita ja vertailtiin työkaluja. Todettiin, että kaksi yleisintä tilan hallintaan käytettävää kirjastoa ovat varteenotettavia vaihtoehtoja riippuen kehittäjien mieltymyksistä, kokemuksesta ja sovelluksen vaatimuksista. Ihanteelliseksi komponenttirakenteeksi todettiin rakenne, jossa ylimmän tason komponentti on tilallinen ja muut komponentit pyritään pitämään tilattomana. Kehittäminen tämän ihanteellisen rakenteen pohjalta, kunnes havaitaan sen muuttuvan vaikeaksi tai työlääksi, havaittiin parhaaksi toimintatavaksi. Lisäksi löydettiin tapausesimerkit siitä, kuinka reittiä voidaan käyttää tilana ja kuinka modaali-ikkunoiden tilaa kannattaa hallita.

Parhaita toimintatapoja löydettiin kohtalaisesti. Näiden toimintatapojen noudattaminen havaittiin erittäin merkittäväksi sovelluksen jatkokehityksen helppoudelle. Jos työtä olisi jatkettu, olisi ollut hyödyllistä haastatella muita kehittäjiä ja kehitystiimejä. Näin olisi saatu lisää tapausesimerkkejä ja olisi voitu arvioida niiden yleisyyttä ja toistuvuutta.

The purpose of this thesis was to research how state management will affect the design phase and architecture of a web-application, what type of challenges state management can cause during the development and what type of solutions can be implemented. Challenges in this context mean situations with state management that are common or particularly challenging. Solutions are examples of how challenges can be solved or best practices found during the development and research. Data for this study was obtained through publications of the industry and the author’s first-hand experience. In this thesis multiple real life customer projects are used as an example. Code examples are also provided, in simplified form to improve readability.

State management is a significant part of the development of a web application. In the thesis, the author’s first-hand experience was compared to industry publications. Two noteworthy state management libraries were found. Different solutions and best practices were gathered to solve common and complicated problems in state management.

Most state management related challenges are unique to the software. Most common challenges can be avoided by following best practices. This thesis provides the reader information about modern web applications and state management in web applications. Discussion is also provided on alternative technologies to handle state management and common challenges and solutions in state management.