Rinnakkaisten näkymien hallinta React-sovelluksessa

Abstract

Opinnäytetyö käsittelee verkkosovelluksen taustajärjestelmää, joka hallitsee sovelluksen näkymien tilaa ja reititystä. Opinnäytetyön toimeksiantaja on Vinka Oy, henkilölogistiikan ratkaisuihin erikoistunut ohjelmistoyritys. Opinnäytetyön taustalla on Tuomi Logistiikka Oy:n tilaama projekti, jonka tarkoituksena on tuottaa verkkosovellus, jolla hallitaan joukkoliikennepalvelun aikatauluja.

Tavanomaisesti verkkosovellukset reititetään näyttämään yhtä pääasiallista näkymää kerrallaan. Tämä opinnäytetyö käsittelee React-kirjastolla toteutettua näkymienhallintajärjestelmää, joka mahdollistaa useamman rinnakkaisen näkymän näyttämisen samanaikaisesti verkkosovelluksessa. Opinnäytetyön tavoitteena on selvittää, miten haluttu järjestelmä voidaan toteuttaa React-kirjaston ja URL-standardin ominaisuuksien ja rajoitteiden puitteissa.

Opinnäytetyössä päädytään käyttämään Reactin Context-rajapintaa näkymien tilan hallintaan. Context-rajapinta mahdollistaa näkymien luonnin useasta eri sovelluksen komponentista, vaikka näkymien tila on keskitetty yhteen komponenttiin. URL-standardin kyselyparametreja käytetään sovelluksen reititykseen URL-polkujen sijaan, jolloin kaikki sovelluksen näkymät voivat ilmetä rinnakkain URL:ista.

The thesis explores the design and development of a view management and routing system for a web application developed with the React framework. Traditionally web applications are routed to display one main view at a time, but the view management system developed in this thesis must be capable of routing and managing the state of multiple parallel views. The thesis studies the React and the URL standard, in order to find out how the system can be implemented.

The client of the thesis is Vinka Oy, a software company specializing in solutions for passenger logistics. The project behind the thesis was developing an application for managing timetables of a public transport service operated by Tuomi Logistiikka Oy.

The thesis uses the React Context API to manage the state of the views in a centralized manner, so that views may be created from any component of the application with ease. The implemented view management system routes the views from the URL by using query parameters. This allows the application to represent the views as multiple parallel values, which would not be possible using the URL path.