Komponenttikirjaston rakentaminen Storybookin avulla

Abstract

Tämä on toiminnallinen opinnäytetyö, jonka toimeksiantajana on ohjelmistokehitysyritys, joka on osa rakennus- ja kiinteistöalalla toimivaa konsernia. Opinnäytetyön tavoitteena oli rakentaa Storybookin avulla komponenttikirjasto, joka sisältää toimeksiantajayrityksen yhteisten suunnittelumallien mukaisia, uudelleenkäytettäviä komponentteja.

Toimeksiantajayrityksen varsinaisen kehitysprojektin koko ja laajuus ovat aiheuttaneet sen, että ohjelmakoodin hallinta, muokkaus ja ylläpito on materiaalin kasvaessa entistä haastavampaa. Tulevaisuudessa toimeksiantajayrityksessä on tavoite siirtyä kohti Micro Frontends-lähestymistapaa, jolloin itsenäisten tiimien olisi mahdollista työskennellä täysin erillään toisistaan. Komponenttikirjaston odotetaan mahdollistavan frontend-kehittäjien jakautumisen pienempiin tiimeihin ja tekevän ohjelmistokehityksestä entistä tehokkaampaa.

Komponenttikirjasto on kehitettävästä tuotteesta erillään oleva projekti, joka sisältää yhteiskäyttöisiä komponentteja, kuten painikkeita, vetovalikoita ja taulukoita. Komponenttikirjaston hyötynä nämä komponentit täytyy luoda vain kerran, jonka jälkeen niitä voi hyödyntää muissa projekteissa.

Teoriaosuudessa tarkastellaan modernin frontend-kehityksen haasteita, ja sitä kuinka uudelleenkäytettävien komponenttien hyödyntäminen vastaa näihin haasteisiin. Osuudessa käydään läpi lähestymistapoja komponenttipohjainen ohjelmistokehitys, komponenttilähtöinen kehitys, Atomic Design ja Micro Frontends. Teoriaosuudessa esitellään myös, miten komponentit esiintyvät web-käyttöliittymässä, kuinka uudelleenkäytettävä komponentti eroaa sovellusratkaisusta, ja kuinka Reactia ja React Testing Librarya hyödynnetään komponenttien luomiseen. Teoriaosuuden päättää tutustuminen Storybook-työkaluun, jonka avulla komponenttikirjasto rakennetaan toteutusvaiheessa.

Opinnäytetyön perustana toimi tutkimuksellisen kehittämistyön prosessi, joka etenee vaiheittain pääpiirteittäin kehittämiskohteeseen tutustumisesta kehittämistehtävän määrittelyyn ja toteutukseen, ja lopuksi kehittämishankkeen julkistukseen ja arviointiin. Toteutusmenetelmänä sovellettiin konstruktiivista tutkimusta, jonka tehtävänä on luoda ratkaisu konkreettiseen ongelmaan. Komponenttikirjaston rakentamisessa käytettiin aineistona toimeksiantajayrityksen InVision-suunnittelumalleja ja varsinaiseen kehitysprojektiin luotuja komponentteja.

Komponenttikirjastoon valmistui projektin aikana 20 komponenttia, joita on nyt mahdollista hyödyntää muissa projekteissa. Komponenttikirjaston osalta on siis vielä työtä, jotta kaikki toivotut komponentit ovat käytettävissä komponenttikirjaston kautta. Komponenttikirjaston rakentaminen mahdollistaa tiimien jakautumisen tulevaisuudessa ja vie yritystä lähemmäs Micro Frontends-lähestymistapaa.