Tilanhallinta MobX State Tree -kirjastolla React-sovelluksessa

Abstract

Opinnäytetyön toimeksiantaja oli Vincit Oy. Tavoitteena oli kasvattaa Vincitin työntekijöiden tietotaitoa MobX State Tree -kirjastosta. Kirjasto on varteenotettava ja opinnäytetyön kirjoituksen aikaan suhteellisen uusi tilanhallinnan vaihtoehto verkkosovelluksille. Työssä perehdyttiin MobX State Tree -kirjastoon teorian ja käytännön kokemuksen kautta. Näiden pohjalta luotiin tiivistävä esitys MobX State Tree:stä.

Opinnäytetyön tuloksena syntyi MobX State Tree:stä kertovan tiivistävän esityksen lisäksi pieni esimerkkiprojekti, jota hyödynnettiin esityksessä. Esitys pidettiin Vincitillä aiheesta kiinnostuneille ja siitä saatiin positiivista palautetta. Esimerkkiprojekti jaettiin kaikille kiinnostuneille, jotta he pääsivät itse nopeasti testaamaan MobX State Tree:n ominaisuuksia.

MobX State Tree:n avulla tilanhallinnasta saadaan reaktiivista, tyypitettyä ja helposti luettavaa. Se ei sovellu projekteihin, joissa käsitellään paljon muokattavaa tietoa. Se ei myöskään tuo lisäarvoa hyvin yksinkertaisiin projekteihin. MobX State Tree:tä voi käyttää missä tahansa JavaScript- tai TypeScript-projektissa. Se ei siis ole sidottu vain React-projekteihin. Jatkokehityksenä opinnäytetyölle olisi perehtyä syvemmin Redux-tilanhallinnan kirjastoon ja MobX State Tree -kirjaston eroihin. Kirjastoja voitaisiin tutkia ja vertailla keskenään sekä tuoda esiin niiden hyviä ja kehittämistä vaativia ominaisuuksia.

The objective of this thesis was to educate Vincit Oy’s employees about a state management library MobX State Tree. The purpose was to first get familiar with MobX State Tree through various sources and by building a customer application with it. With the gathered knowledge it was possible to create a summarizing presentation of MobX State Tree’s features and how to use it in a React project.

The presentation was held in Vincit’s office and it received positive feedback. As a result, Vincit’s employees got acquainted with the basics of MobX State Tree and got a chance to try it for themselves with the provided example project.

With MobX State Tree state management is reactive, typed and easy to read. The library does have its limitations and therefore is not suitable for projects with massive amounts of modifiable data. MobX State Tree can be used in any JavaScript or TypeScript project. The next step would be to dive deeper into the differences between Redux state management library and MobX State Tree. The goal would be to bring forth why either is a good or a bad solution for a project.