WIXLIB

TILAN HALLINTAREACT.JS-VERKKOSOVELLUKSESSAJonne TanninenOpinnäytetyöJoulukuu 2017TietojenkäsittelyWeb-palvelut

TIIVISTELMÄTampereen NNINEN, JONNE:Tilan hallinta React.js-verkkosovelluksessaOpinnäytetyö 33 sivua, joista liitteitä 7 sivuaJoulukuu 2017Tä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.jspohjaisen verkkosovelluksen suunnitteluvaiheessa. Lisäksi tutkittiin yleisiä ja poikkeuksellisen haastavia tilanteita tilan hallinnassa ja kartoitettiin parhaita toimintatapoja näidenongelmien 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 pohjaltakirjoitettu 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 vaihtoehtojariippuen kehittäjien mieltymyksistä, kokemuksesta ja sovelluksen vaatimuksista. Ihanteelliseksi komponenttirakenteeksi todettiin rakenne, jossa ylimmän tason komponenttion tilallinen ja muut komponentit pyritään pitämään tilattomana. Kehittäminen tämänihanteellisen 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 noudattaminenhavaittiin erittäin merkittäväksi sovelluksen jatkokehityksen helppoudelle. Jos työtä olisijatkettu, olisi ollut hyödyllistä haastatella muita kehittäjiä ja kehitystiimejä. Näin olisisaatu lisää tapausesimerkkejä ja olisi voitu arvioida niiden yleisyyttä ja toistuvuutta.Asiasanat: tila, React.js, verkkosovellus, MobX

ABSTRACTTampereen ammattikorkeakouluTampere University of Applied SciencesDegree Programme in Business Information SystemsWeb ServicesTANNINEN, JONNE:State Management in React.js Web ApplicationBachelor's thesis 33 pages, appendices 7 pagesDecember 2017The purpose of this thesis was to research how state management will affect the designphase and architecture of a web-application, what type of challenges state managementcan cause during the development and what type of solutions can be implemented.Challenges in this context mean situations with state management that are common orparticularly challenging. Solutions are examples of how challenges can be solved orbest 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. Inthis thesis multiple real life customer projects are used as an example. Code examplesare also provided, in simplified form to improve readability.State management is a significant part of the development of a web application. In thethesis, the author’s first-hand experience was compared to industry publications. Twonoteworthy state management libraries were found. Different solutions and best practiceswere 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.Key words: state, React.js, web application, MobX

4SISÄLLYS1 JOHDANTO . 72 VERKKOSOVELLUS . 82.1 Yhden sivun arkkitehtuuri . 82.2 Verkkosovelluksen tekniikat. 82.3 Palvelinrajapinta . 92.4 Tila . 103 SOVELLUKSEN SUUNNITTELU JA TOTEUTUS . 113.1 Työkalut . 113.1.1 Yarn . 113.1.2 Webpack . 123.1.3 React.js . 123.1.4 MobX . 123.2 Näkymä, rakenne ja komponentit . 133.3 Tilan hallinta . 163.3.1 Vaihtoehtoiset menetelmät . 163.3.2 React.js ja MobX . 184 TAPAUSESIMERKIT . 204.1 Ominaisuudet vai tila - parhaat toimintatavat . 204.2 MobX-varasto vai komponentin tila . 214.3 Reitti tilana . 214.4 Modaali-ikkunat . 224.4.1 Paikallinen modaali . 234.4.2 Globaali modaali-ikkuna . 235 POHDINTA . 24LÄHTEET . 26LIITTEET . 27

5ERITYISSANASTOAJAX (Asynchronous JavaScript and XML)Tarkoittaa asiakasohjelman taustalla tehtäviä erillisiä HTTPkutsuja palvelinrajapintaan.AsiakasohjelmaSovellus, esimerkiksi verkkoselain, jonka toiminta perustuusen lähettämiin kutsuihin toiselle sovellukselle.Avoin lähdekoodiOhjelmistojen kehitysmenetelmä, johon kuuluu mahdollisuustutustua lähdekoodiin ja muokata sitä, sekä vapaus käyttää ohjelmaa haluamaansa tarkoitukseen.DOM (Document Object Model)Esimerkiksi HTML- tai XML-dokumenttia puumaisena rakenteena käsittelevä alustasta ja kielestä riippumaton rajapinta. Mallissa jokainen solmu on objekti, joka esittää osaadokumentista.ES (ECMAScript)Ecma Internationalin rekisteröity tavaramerkki standardoidulle JavaScriptille. Käytetään yleensä version kanssa, esimerkiksi ES6, ES2015 tai ES.Next.Funktionaalinen ohjelmointiOhjelmointimalli, joka perustuu matemaattisten funktioidenkäyttöön. Funktionaalisessa ohjelmoinnissa funktiolla ei olesivuvaikutuksia eli sen palauttama arvo on aina sama samoillaparametreilla.JSXReact.js:n käyttämä ohjelmointikieli, joka mahdollistaa JavaScriptin kirjoittamisen XML-syntaksilla.KirjastoKokoelma, joka tarjoaa esimerkiksi valmiita funktioita tailuokkia sovelluksen käyttöön.KomponenttiToisiinsa liittyviä funktioita tai dataa sisältävä resurssi.MVC-arkkitehtuuri (Model View Control)Sovellusarkkitehtuuri, jota käytetään verkkosovellusten toteuttamiseen.NPM-rekisteri (Node Package Manager)Maailman suurin runsaasti avoimen lähdekoodin kirjastoja sisältävä ohjelmistorekisteri.

6NäkymäSovellusarkkitehtuurin osa, joka määrittää käyttöliittymän ulkoasun ja kuinka tieto näytetään käyttäjälle.Ohjelmistokehys (framework)Käyttäjän kirjoittamalla koodilla muutettavat perustoiminnottarjoava abstraktio. Tarjoaa standardin sille, kuinka sovelluskehitetään ja otetaan käyttöön.RenderointiKuvan luominen mallista ohjelmiston avulla.ReititysAlgoritminen reitin valitseminen.ReititinKirjasto, joka hallitsee sovelluksen reititystä.Sivuvaikutus (side effects) Tilan muutoksen yhteydessä tapahtuvat muut toiminnot.Tila (state)Sovelluksen tila. Sisältää tietoa siitä, miltä sovelluksen tuleenäyttää tai miten sen tulee toimia kullakin hetkellä.Täyteteksti (boiler plate) Tehtävien suorittamiseen vaadittava muuttumaton tai vähäisesti muuttuva koodi.

71JOHDANTOTarve tälle opinnäytetyölle on lähtöisin tarpeesta kartoittaa parhaita toimintatapojaReact.js-verkkosovellusten tilan (state) hallinnassa. JavasScript-pohjaiset dynaamisetverkkosovellukset ovat suhteellisen uusi käsite, joten aiheesta ei ole kertynyt alalla runsaasti kokemusta ja aineistoa. Tilan hallinta verkkosovelluksessa koostuu loogisista rakenteista ja rakenteiden pohjalta kirjoitetusta koodista sekä käytetyistä työkaluista, kutenkirjastoista.Opinnäytetyön tavoite 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. Luettuaan työn lukijalla onkonkreettinen tapa jakaa React.js-verkkosovellus komponentteihin, käsitys siitä milloinkannattaa käyttää komponentin sisäistä tilaa ja esimerkki siitä, miten reittiä voi käyttäätilana. Lisäksi lukijalle tarjotaan kaksi erilaista tapaa hallita modaali-ikkunoita sovelluksessa.Opinnäytetyö käsittelee nimenomaisesti React.js-verkkosovelluksen tilan hallintaa. Toimintatavat soveltuvat mahdollisesti osittain tai täysin myös muunlaisiin verkkosovelluksiin. React.js-kirjastoa käsitellään työssä siltä osin kuin se on olennaista tilan hallinnalleja esimerkkien ymmärtämiseksi. Aihe rajattiin näin, jotta pystyttiin keskittymään tilanhallintaan nimenomaisesti React.js-verkkosovelluksessa ilman, että jouduttiin käsittelemään liikaa erilaisten verkkosovellusten arkkitehtuureja. Muihin tekniikoihin perustuviaverkkosovelluksia käsiteltiin kevyesti vertailun vuoksi.Eri ratkaisuja on havainnollistettu esimerkein, jotka kehitettiin React.js-kirjaston avullaja käyttäen JavaScript-ohjelmointikieltä. Siksi lukijalta edellytetään ohjelmoinnin perusteiden, JavaScript-ohjelmointikielen ES6-syntaksin sekä React.js-kirjaston ymmärtämistä.

82VERKKOSOVELLUSTässä luvussa esitellään, mikä verkkosovellus on ja millaisista osista se koostuu. Lisäksiesitellään verkkosovelluksen tila, sekä yleisimmät tilan hallintaan käytettävät kirjastot.2.1Yhden sivun arkkitehtuuriVerkkosovelluksella ja yhden sivun arkkitehtuurilla tarkoitetaan yleisesti verkkoon tarkoitettua sovellusta. Näitä sovelluksia käytetään verkkoselaimen kautta kuten tavallisiaverkkosivuja, mutta niiden käyttö on dynaamisempaa ja ne vastaavat enemmän perinteisen natiivin työpöytä- tai mobiilisovelluksen käyttämistä.Suurin ero perinteisen verkkosivun ja verkkosovelluksen välillä on sivujen vaihtamisenja lataamisen vähäinen määrä verkkosovelluksessa. Verkkosovellus hyödyntää runsaastiAJAX-kutsuja. Avattaessa verkkosovellus ensimmäistä kertaa, ladataan yleensä HTMLrunko ja -elementti, jonka sisälle sovellus renderoidaan, sekä sovelluksen vaatimat JavaScript-tiedostot.Renderointi tarkoittaa sovelluksen näyttämistä käyttäjälle selaimessa annetun mallin perusteella. Tämän jälkeen sovelluksen logiikka toimii selaimessa ja sovelluksen vaatimadata haetaan palvelimelta AJAX-kutsujen avulla. Näin ollen suurin osa sivujen renderoinnista tapahtuu asiakaspuolella (client) palvelimen sijaan. (Code School n.d.)2.2Verkkosovelluksen tekniikatKoska verkkosovelluksen logiikka on runsaampaa kuin perinteisen verkkosivuston, tarvitaan enemmän JavaScript-koodia logiikan käsittelyyn. Verkkosovellusten toteutustavarten on olemassa useita sovelluskehyksiä ja kirjastoja. Tällä hetkellä suosituimpien joukossa ovat Angular.js ja React.js. Ensimmäinen versio Googlen kehittämästä Angularistajulkaistiin vuonna 2009, jolloin se oli aikaansa edellä. Angularin avulla saatiin ratkaistuamonia silloisia ongelmia, jotka on nyt ratkaistu jo JavaScript-ohjelmointikielen tasollaES6:n avulla (Code School n.d.).