Käyttöliittymäkomponenttikirjaston kehittäminen Svelte-alustalle

Abstract

Tässä insinöörityössä kehitettiin Svelte 5 -kehykseen perustuva käyttöliittymäkomponenttikirjasto, jonka tavoitteena oli parantaa käyttöliittymäkehityksen tehokkuutta, selkeyttä ja ylläpidettävyyttä nykyaikaisessa web-kehityksessä. Työssä perehdyttiin keskeisiin teknologioihin, kuten Svelteen, Tailwind CSS:ään ja Typescriptiin sekä suunnitteluperiaatteisiin, jotka ohjaavat käyttöliittymäkirjastojen rakentamista. Komponenttikirjaston kehitys perustui Material Design 3 -suunnittelujärjestelmään, jonka komponenttiluettelo toimi kattavuuden lähtökohtana.

Kehitysprosessissa hyödynnettiin SvelteKit-kehystä ja Kanban-menetelmiä projektinhallintaan. Komponenttikirjaston rakenteessa painotettiin selkeyttä ja tyyppiturvallisuutta, ja se rakennettiin siten, että se olisi helposti laajennettavissa ja mukautettavissa. Komponenttien hallintaa lähestyttiin varianttipohjaisesti, ja käyttöliittymän tilojen hallinta toteutettiin Tailwind CSS:n pseudoluokkien sekä apuvälinemetodien avulla.

Insinöörityössä tarkasteltiin myös keskeisiä haasteita, kuten teemojen ja tyylien hallintaa, komponenttien tilanhallintaa ja sisällön ohjelmallista sijoittelua. Kirjaston soveltuvuutta arvioitiin vertaamalla sitä olemassa oleviin käyttöliittymäratkaisuihin, kuten Google Flights ja Airbnb. Tuloksena syntyi käyttöliittymäkomponenttikirjasto, joka vastaa käyttöliittymien kehityksen perustarpeisiin, on muokattavissa ja toimii osana Svelte 5 -sovelluskehitystä.

In the study, a user interface component library was developed with the goal of improving speed, clarity, and maintainability in modern web development in a pragmatic way. Key technologies including Svelte, Tailwind CSS and Typescript, as well as design systems that guided the development of the library were explored. The development was based on the Material Design 3 design system, whose components acted as the foundation for coverage requirements.

The development process utilized the SvelteKit meta-framework and Kanban methods for project management. In the library structure clarity and type-safety were emphasized, and it was built for ease of extension and customizability. The component structure followed a variant-based approach, and user interface state handling was implemented using Tailwind CSS utility-classes and other utility methods.

The thesis additionally addresses challenges such as theme and style management, component state management, and programmatic content placement. The suitability of the library was assessed by comparing it to existing user interface solutions, such as Google Flights and Airbnb. The result was a UI component library that meets the basic needs of user interface development, is customizable, and integrates well with Svelte 5 application development.