React-sovelluksen front end -arkkitehtuuri : case Wunder Finland Oy
Koski, Jani (2019)
Koski, Jani
2019
All rights reserved. This publication is copyrighted. You may download, display and print it for Your own personal use. Commercial use is prohibited.
Julkaisun pysyvä osoite on
https://urn.fi/URN:NBN:fi:amk-2019110520666
https://urn.fi/URN:NBN:fi:amk-2019110520666
Tiivistelmä
Tämän opinnäytetyön tavoitteena oli toteuttaa toimeksiantoyritykselle ohjelmistoprojektien Git-versionhallinnan dataa visualisoiva verkkosovellus hyödyntäen React-ohjelmistokirjastoa. Tällä parannettaisiin ymmärrystä siitä, millaista teknistä työtä yrityksessä parhaillaan tehdään. Samalla oli tarkoitus pohtia, kuinka React sekä muut olennaiset työssä käytettävät teknologiat soveltuvat toimeksiannon mukaisen sovelluksen toteutukseen. Koska työ painottui pääosin sovelluksen näkyvään osaan eli front endiin, oli työn tarkoituksena myös tutustua verkkosovellusten käyttöliittymien toimintaan yleisesti sekä tutkia, kuinka niiden suorituskykyä voidaan optimoida.
Opinnäytetyön tutkimusmenetelmä oli konstruktiivinen, sillä johtopäätökset saatiin pääasiassa React-sovelluksen kehitystyöstä. Teoriaosuudessa perehdyttiin verkkosovellusten käyttöliittymien toimintaan yleisesti, suorituskyvyn optimointiin sekä työssä käytettävien teknologioiden ominaispiirteisiin.
Sovellukselle luotiin täysin toimiva pohja. Saatavilla olevan datan rakenne määriteltiin luomalla kevyt GraphQL-rajapinta, jota hyödynnettiin React-käyttöliittymässä. Datan visualisoinnissa hyödynnettiin Reactille kehitettyä Victory-kirjastoa, jonka kaaviokomponentit sopivat hyvin projektin tarpeisiin niiden helppokäyttöisyytensä vuoksi. Käyttöliittymä jäi kuitenkin melko kevyeksi, sillä saatavilla olevan datan muuntaminen visualisoitavaan muotoon oli aikaa vievää. Sovelluksen ulkoasu viimeisteltiin CSS:llä.
Lähdekoodi ladattiin yrityksen GitHub-ohjelmavarastoon jatkokehitysmahdollisuuksia varten. The goal of this thesis was to implement a React-based web application which visualizes Git version control data of Wunder Ltd software projects, and therefore gives a better awareness of updates around the company in terms of technical work. The main focus was on delving into the main features of the React software library along with a few other relevant tools that would be used for building the application, while considering how suitable they would be for the assignment, namely the visualization of version control data. Because the assignment’s emphasis was on the client side of the application, generally known as front end, a slight emphasis was also given on investigating front end performance.
The research method for this thesis was constructive as developing the React application provided most of the conclusions. The theoretical part of the thesis covers how the client side of the web works, how its performance can be optimized, and the main technologies that were used for building the application.
As a result, a well functional base for the application was developed. A small GraphQL API was first implemented which defined the structure of the available data, and that data was then queried from the React front end. Victory.js, a data visualization library for React was added to handle the data visualization part of the application, as it provided easy-to-use chart components. However, turning the data, into effective visualizations was time-consuming and, therefore, the user interface was left to be quite small in size. The look of the application was finalized with CSS.
The source code was uploaded to the company’s GitHub hosting storage where it is available and can be developed furthermore.
Opinnäytetyön tutkimusmenetelmä oli konstruktiivinen, sillä johtopäätökset saatiin pääasiassa React-sovelluksen kehitystyöstä. Teoriaosuudessa perehdyttiin verkkosovellusten käyttöliittymien toimintaan yleisesti, suorituskyvyn optimointiin sekä työssä käytettävien teknologioiden ominaispiirteisiin.
Sovellukselle luotiin täysin toimiva pohja. Saatavilla olevan datan rakenne määriteltiin luomalla kevyt GraphQL-rajapinta, jota hyödynnettiin React-käyttöliittymässä. Datan visualisoinnissa hyödynnettiin Reactille kehitettyä Victory-kirjastoa, jonka kaaviokomponentit sopivat hyvin projektin tarpeisiin niiden helppokäyttöisyytensä vuoksi. Käyttöliittymä jäi kuitenkin melko kevyeksi, sillä saatavilla olevan datan muuntaminen visualisoitavaan muotoon oli aikaa vievää. Sovelluksen ulkoasu viimeisteltiin CSS:llä.
Lähdekoodi ladattiin yrityksen GitHub-ohjelmavarastoon jatkokehitysmahdollisuuksia varten.
The research method for this thesis was constructive as developing the React application provided most of the conclusions. The theoretical part of the thesis covers how the client side of the web works, how its performance can be optimized, and the main technologies that were used for building the application.
As a result, a well functional base for the application was developed. A small GraphQL API was first implemented which defined the structure of the available data, and that data was then queried from the React front end. Victory.js, a data visualization library for React was added to handle the data visualization part of the application, as it provided easy-to-use chart components. However, turning the data, into effective visualizations was time-consuming and, therefore, the user interface was left to be quite small in size. The look of the application was finalized with CSS.
The source code was uploaded to the company’s GitHub hosting storage where it is available and can be developed furthermore.