Käyttöliittymän komponenttikirjaston luominen Atomic Designs -metodologiaa käyttäen
Räisänen, Jarno (2019)
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-201905027261
https://urn.fi/URN:NBN:fi:amk-201905027261
Tiivistelmä
Opinnäytetyö on päiväkirjamuotoinen opinnäytetyö. Opinnäytetyön 10 viikon mittaisen seuranta-ajan aikana seurattiin JavaScript-ohjelmointikielen React-kirjastolla toteutetun komponenttikirjaston valmistumista. Seuranta-aika oli 28.1. - 7.4.2019 välillä.
Komponenttikirjaston käytännön puoli toteutettiin Lerna- sekä Storybook -kirjastoilla Atomic Designs -metodologian ohjaamana. Lerna-kirjasto mahdollisti komponenttien riippuvuuksien hallinnoimisen. Komponenttien dynaaminen testaaminen sekä visualisointi toteutettiin Storybook-kirjaston avulla.
Toimeksiantajana toimii opinnäytetyön tekijän työnantaja OPR-Finance Oy. Yritys toimii viidessä eri Euroopan maassa ja työntekijöitä Suomen toimistolla on arviolta 50. Opinnäytetyön tekijä toimii yrityksen sisällä front-end- eli käyttöliittymäohjelmoijana.
Seurantaviikkojen kohdalla ensimmäiset viikot keskittyivät suunnitteluun, ohjelmointiympäristöjen testaamiseen sekä uusien kirjastojen tutkimiseen.
Puolessa väliä seurantaviikkoja tutkimiset kohdistuivat uusien komponenttien luomiseen sekä niiden ongelmien ratkaisuihin. Käytännössä ongelmat kohdistuivat yksikkötesteihin sekä komponenttien tyylien määrityksiin. Ongelmia aiheuttivat lisäksi Storybook-lisäosat.
Viimeisten seurantaviikkojen aikana oppiminen kohdistui Webpack-moduulinkokoajan sekä Jest-testikirjaston asetusten korjaamiseen.
Tärkeimmät pohdinnat ja päätelmät kohdistuivat Atomic Designs -metodologian käyttöön Storybook-kirjaston yhteydessä. Raportoinnin päätteeksi kehitystä tapahtui erityisesti erilaisten JavaScript-kirjastojen kanssa sekä tapoina tehdä tyylejä React-pohjaisille käyttöliittymille.
Komponenttikirjaston käytännön puoli toteutettiin Lerna- sekä Storybook -kirjastoilla Atomic Designs -metodologian ohjaamana. Lerna-kirjasto mahdollisti komponenttien riippuvuuksien hallinnoimisen. Komponenttien dynaaminen testaaminen sekä visualisointi toteutettiin Storybook-kirjaston avulla.
Toimeksiantajana toimii opinnäytetyön tekijän työnantaja OPR-Finance Oy. Yritys toimii viidessä eri Euroopan maassa ja työntekijöitä Suomen toimistolla on arviolta 50. Opinnäytetyön tekijä toimii yrityksen sisällä front-end- eli käyttöliittymäohjelmoijana.
Seurantaviikkojen kohdalla ensimmäiset viikot keskittyivät suunnitteluun, ohjelmointiympäristöjen testaamiseen sekä uusien kirjastojen tutkimiseen.
Puolessa väliä seurantaviikkoja tutkimiset kohdistuivat uusien komponenttien luomiseen sekä niiden ongelmien ratkaisuihin. Käytännössä ongelmat kohdistuivat yksikkötesteihin sekä komponenttien tyylien määrityksiin. Ongelmia aiheuttivat lisäksi Storybook-lisäosat.
Viimeisten seurantaviikkojen aikana oppiminen kohdistui Webpack-moduulinkokoajan sekä Jest-testikirjaston asetusten korjaamiseen.
Tärkeimmät pohdinnat ja päätelmät kohdistuivat Atomic Designs -metodologian käyttöön Storybook-kirjaston yhteydessä. Raportoinnin päätteeksi kehitystä tapahtui erityisesti erilaisten JavaScript-kirjastojen kanssa sekä tapoina tehdä tyylejä React-pohjaisille käyttöliittymille.