State management in Single-Page Applications

Abstract

Web frontend applications, or Single-Page Applications, coordinate work between users and remote servers. Its task is difficult, because all the requests to the servers are slow and unreliable. At the same time, the user interface is required to respond immediately, even to actions that require a remote request. This inevitably leads to domain logic and state residing on the frontend. The industry is currently challenging the MVC pattern for structuring frontend code and its state, with with more functional approaches. Redux is currently the movement's forerunner. However, as Redux was created only 2 years ago, there is little academic research done to address the current situation.

This thesis evaluates three major patterns for state management in Single-Page Applications. The evaluated patterns are UI component control, Models (MVC), and Redux. To further evaluate the topic of state management as a whole, this thesis evaluates client-side persistence options and their contribution in achieving demanding requirements for user interfaces. This work is mainly focused on the requirements of Smartly.io's web application.

This study finds that state controlled in UI components should include only their own local state. Domain logic and state should be kept separated from the presentational components - both Redux and domain models enforce the separation well. Models have the benefit of keeping state and logic close together. However, interconnected models can lead to tangled flow of changes. Redux's unidirectional data flow and its simplicity has enabled many improvements on developer experience and can make seemingly complex use cases trivial.

Results suggest that client-side storage mechanisms can provide valuable responsiveness to the application. Redux architecture proves to be useful also for the use cases of storing application state.

Selaimissa toimivat web-applikaatiot koordinoivat työtä käyttäjien ja etäpalvelinten välillä. Niiden tehtävä on haastava, koska jokainen pyyntö palvelimille on hidas ja epäluotettava. Samaan aikaan käyttöliittymän odotetaan vastaavan välittömästi käyttäjän toimintaan, vaikka sen toteuttaminen vaatisi pyynnön etäpalvelimelle. Tämä johtaa väistämättä siihen, että käyttöliittymän rakentamiseen tarvitaan myös liiketoiminta-logiikkaa. Ohjelmistoteollisuus on tällä hetkellä haastamassa alalla pitkän vallinnutta MVC-mallia funktionaalisemmilla ratkaisuilla. Redux-arkkitehtuuri on tämän murroksen edelläkävijä. Tämän hetken tilanteesta on hyvin vähän akateemista tutkimusta, koska Redux luotiin vasta kaksi vuotta sitten.

Tämä työ arvioi kolmea tärkeää tilanhallintamenetelmää web-applikaatioissa. Arvioidut menetelmät ovat tilan kontrollointi käyttöliittymäkomponenteissa, malli-pohjaisissa ratkaisuissa ja Redux-varastossa. Lisäksi työssä tutkitaan mekanismeja miten käyttäjien selaimiin tallennettaan tietoa sekä tallennuksen vaikutusta vaativien käyttöliittymävaatimusten saavuttamiseksi. Työ keskittyy pääosin Smartly.io:n web-käyttöliittymän vaatimuksiin.

Työssä todetaan että käyttöliittymäkomponenteissa pitäisi säilyttää ainoastaan niiden omaa lokaalia tilaa. Liiketoimintalogiikka ja -tila pitäisi pitää erillään käyttöliittymäkomponenteista - sekä Redux että malli-pohjaiset (MVC) ratkaisut ohjaavat tähän erotteluun. Malli-pohjaisen ratkaisun hyöty on siinä, että liiketoimintamallin tila ja logiikka ovat lähellä toisiaan. Toisiinsa kytkeytyneet mallit voivat kuitenkin johtaa sekavaan muutosten virtaukseen. Redux-arkkitehtuurin yksisuuntainen tietojen virtaus ja sen yksinkertaisuus on mahdollistanut monia parannuksia sovelluskehittäjien kokemukseen ja voi tehdä näennäisesti haastavien käyttötapausten toteuttamisesta triviaaleja.

Tulokset osoittavat, että tilan tallentaminen voi tuoda arvokasta reagointikykyä käyttöliittymään. Redux-arkkitehtuuri osoittautuu olevan hyödyllinen myös tilansäilönnän käyttötapauksiin.