Haku

Web-sovelluksen työkalut, kirjastot ja menetelmät React.js-projektissa

QR-koodi

Web-sovelluksen työkalut, kirjastot ja menetelmät React.js-projektissa

Insinöörityö muodostui työnantajan tarpeesta kehittää web-sovellukselle uusi käyttöliittymä. Opinnäytetyö käsittelee geneerisellä tasolla web-sovelluksen kehitys- ja ohjelmointiympäristöä. Työn lähtökohtana oli React-pohjaisen web-sovelluksen toteutus, jolle tarvittiin kehitys- ja ohjelmointiympäristö. Kehitysprojektille ei ollut määritelty rajoitteita, vaan sain itse valita ja tarkastella sopivia teknologioita.

Työn tavoitteena oli luoda ympäristöstä riippumaton ja useissa tuotteissa uudelleen käytettävä projektipohja. Ympäristöstä haluttiin tehdä mahdollisimman yksinkertainen ottaa käyttöön missä tahansa kehitysvaiheessa. Tavoitteeksi asetettiin ns. oneliner-komento, eli koko ympäristö tulisi asentaa ja alustaa yhdellä komennolla. Projektille etsittiin myös kehitystyötä nopeuttavia avoimen lähdekoodin kirjastoja. Kirjastoja tarvittiin niin käyttöliittymän toteutukseen, kuten myös sovelluksen tilan ja lomakkeiden logiikan hallintaan sekä projektin automatisointiin. Lisäksi selvitin myös muutamia Reactille ominaisia suunnittelumalleja.

Projekti perustettiin alustariippumattoman Node.js- JavaScript-tulkin päälle, ja se noudattaa npm-paketin mallia. Npm mahdollistaa koko projektin ”oneliner”-asennuksen. Avoimen lähdekoodin kirjastoista päädyin muun muassa käyttöliittymän osalta Material-ui-kirjastoon, joka sisältää useita valmiita käyttöliittymä komponentteja ja työkaluja oman ulkoasun luomiseen. Lomakkeiden hallintaan valitsin Formik-kirjaston, jossa on sisäänrakennettuna kaikki tarpeellinen lomakkeiden käsittelyyn. Sovelluksen tilanhallintaan valikoitui Reduxin päälle rakennettu easy-peasy-kirjasto. Insinöörityön aiheena käytetty projekti saavutti sille toivotut tavoitteet.

Tallennettuna: