Yleiskäyttöisten komponenttien kehittäminen Reactilla

Abstract

Opinnäytetyön tavoitteena on selvittää uudelleenkäytettävän komponentin suunnittelu- ja toteutusvaiheen vaatimukset sekä luoda tietopohjaa ja perustyöt yrityksen sisäisen komponenttikirjaston myöhempää perustamista varten. Kirjaston komponenteista on tarkoitus luoda teemoitukseltaan sekä ominaisuuksiltaan muokattavia sekä yleisilmeeltään yhtenäisiä.

Työn alussa kerrotaan komponenttilähtöisestä kehityksestä sekä esitellään lyhyesti yleisesti käytetyt kirjastot ja ohjelmointikielet sekä työssä käytetty kirjasto React. Sen jälkeen käydään läpi perusteet kehityksessä käytetyistä React-komponenttityypeistä sekä käydään läpi huomioon otettavia asioita uudelleenkäytettävien komponenttien suunnittelussa ja toteutuksessa. Tämän jälkeen esitellään olio-ohjelmoinnin sekä ohjelmistoarkkitehtuurin SOLID-periaate ja kuinka sitä voidaan soveltaa React-komponenttikehitykseen. Työssä käydään läpi lyhyesti myös design system: mitä kaikkea se pitää sisällään ja kuinka yritys voi hyötyä siitä. Samassa yhteydessä esitellään myös toimeksiantajayrityksen tulevan design systemin toteutukseen valittu työkalu Storybook sekä käydään läpi Storybookin käyttöönotto, kuinka sitä voidaan hyödyntää komponenttikehityksessä sekä muutamia hyödyllisiä lisäosia Storybookin ominaisuuksien laajentamiseen.

Tämän jälkeen esitellään yrityksen lähtötilanne, josta opinnäytetyön tarve syntyi. Käytännön osuudessa esitellään kehitettäväksi valitun komponentin lähtötilanne ja josta rakennetaan uudelleenkäytettävä komponentti. Työn eteneminen ja komponentin rakentamisessa läpikäydyt vaiheet, joissa komponentista muokataan uudelleenkäytettävä ja muokattava, käydään vaiheittain läpi. Storybook-ympäristössä rakennetaan komponentille askeleittain tarina, jonka avulla komponentin ominaisuuksia voidaan muokata ja esitellä niitä Storybookissa. Lopputuloksena syntyneen uudelleenkäytettävän komponentin avulla luodaan perusta yrityksen sisäisen komponenttikirjaston perustamiselle.

Opinnäytetyön tuloksena syntyi uudelleenkäytettävä ja ominaisuuksiltaan muokattava komponentti, jota voitiin esitellä Storybookissa. Komponenttikirjastolle luotiin pohja, josta sen kehitystä on helppo tulevaisuudessa jatkaa.