Storybook osaksi Svelte-ohjelmistokehitystä

Abstract

Tämän opinnäytetyön tavoitteena oli selvittää, miten Storybook voidaan ottaa käyttöön osana olemassa olevaa SvelteKit-pohjaista ohjelmistokehitysympäristöä ja arvioida sen tuomat hyödyt ja haasteet. Työ tehtiin toimeksiantona Kongsberg Maritime Finland Oy:lle. Tavoitteena oli tutkia Storybookin soveltuvuutta käyttöliittymäkomponenttien kehittämiseen, testaukseen ja dokumentointiin Svelte-projektissa, jossa komponenttirakenne on laaja ja kehitysympäristö monimutkainen.

Storybook asennettiin ja konfiguroitiin osaksi kohdeprojektin monorepo-rakennetta, ja sen toimivuutta testattiin luomalla tarinoita olemassa olevista käyttöliittymäkomponenteista. Toteutuksessa havaittiin, että Storybookin avulla komponentteja voitiin tarkastella ja testata eristetysti, mikä mahdollisti virheiden havaitsemisen ja rakenteellisten parannusehdotusten tekemisen jo varhaisessa vaiheessa. Työkalun käyttö lisäsi näkyvyyttä komponenttien toimintaan ja tuki laadunvarmistusta.

Käyttöönoton aikana ilmeni kuitenkin merkittäviä haasteita. Svelte-ympäristössä Storybookin dokumentaatio ja yhteisön tuki ovat vielä rajallisia, ja kohdeprojektin monimutkainen rakenne vaati huomattavan määrän konfiguraatiomuutoksia. Vaikka Storybook tarjoaa merkittäviä hyötyjä, sen täysimittainen käyttöönotto olemassa olevaan Svelte-projektiin ei osoittautunut kustannustehokkaaksi. Työ osoitti, että Storybook on erinomainen työkalu, kun se otetaan käyttöön jo projektin alkuvaiheessa, mutta sen integrointi valmiiseen ympäristöön vaatii laajempaa tukea ja kehitystä Svelte-ekosysteemissä.

The objective of this thesis was to examine how Storybook can be integrated into an existing SvelteKit-based software development environment and to evaluate its benefits and challenges. The work was commissioned by Kongsberg Maritime Finland Oy. The goal was to study the suitability of Storybook for developing, testing, and documenting user interface components within a Svelte project that features a complex structure and extensive component library.

Storybook was installed and configured as part of the project’s monorepo architecture, and its functionality was tested by creating stories for existing user interface components. The implementation showed that Storybook enabled components to be reviewed and tested in isolation, which made it possible to identify errors and suggest structural improvements already in the early stages of development. The tool enhanced visibility into component behavior and supported quality assurance throughout the development process.

However, several challenges were encountered during the implementation. Documentation and community support for Storybook in the Svelte environment are still limited, and the complexity of the target project required extensive configuration adjustments. Although Storybook offers significant advantages, its full-scale adoption in an existing Svelte project did not prove cost-effective. The study concluded that Storybook is an excellent tool when introduced early in a project but integrating it into an established environment demands more comprehensive support and maturity within the Svelte ecosystem.