Ramverksagnostiska designsystem: Teknisk arkitektur och dess påverkan på utvecklarupplevelse
2026 (Swedish)Independent thesis Basic level (professional degree), 10 credits / 15 HE credits
Student thesis
Sustainable development
The essay/thesis is partially on sustainable development according to the University's criteria
Abstract [sv]
Modern webbutveckling har rört sig mot komponentbaserad utveckling genom avancerade ramverk och bibliotek som React och Angular. Nyttjandet av flera ramverk parallellt, exempelvis genom Micro Frontends, har blivit alltmer populärt men har också medfört utmaningar i form av ökad komplexitet, inkonsekventa användargränssnitt och dubbelarbete vid förvaltning av flera designsystem. Detta påverkar i sin tur utvecklarupplevelsen negativt genom ökad kognitiv belastning och monotont arbete.Syftet med denna studie är att utvärdera ramverksagnostiska designsystem för att adressera utmaningarna med storskaliga system som nyttjar flera ramverk. Studien utforskar ramverksagnostiska designsystem i en myndighetskontext där förvaltningsbarhet, designdriven utveckling och utvecklarupplevelse är i fokus. Denna studie nyttjar forskningsansatsen Design Science Research där två prototyper implementeras som sedan utvärderas av yrkesverksamma utvecklare genom uppgiftsbaserade tester och enkäter.Resultatet visar på att valet av teknisk arkitektur, Lit eller Stencil.js, inte är en differentierande faktor för förvaltningsbarhet, tillgänglighetskrav eller designdriven utveckling. Den viktigaste arkitektoniska insikten är att dokumentationskvaliteten, exempelvis via Storybook, är en mer avgörande faktor för ett framgångsrikt designsystem än valet av komponentbibliotek.Utvärderingen av utvecklarupplevelsen visade att det ramverksagnostiska arbetssättet upplevdes som naturligt och likt utvecklarnas ordinarie arbete. Detta tyder på en låg adoptionströskel samt visar på att ramverksagnostiska designsystem ger samma smidiga arbetssätt som ramverksspecifika designsystem.Studien indikerar sammanfattningsvis att ramverksagnostiska designsystem baserade på Web Components utgör en tekniskt genomförbar och strategiskt fördelaktig lösning i en myndighetskontext. Studien utgör ett empiriskt bidrag till den begränsade forskning som finns kring utvecklarupplevelse i myndighetskontext och ger ett utvärderat underlag för organisationer som överväger att implementera ett ramverksagnostiskt designsystem.
Abstract [en]
Modern web development has shifted towards component-based development through advanced frameworks and libraries such as React and Angular. The use of multiple frameworks in parallel, for example through Micro Frontends, has become increasingly popular but has also introduced challenges in the form of increased complexity, inconsistent user interfaces and duplicated work when maintaining multiple design systems. This in turn negatively affects the developer experience through increased cognitive load and monotonous work.The purpose of this study is to evaluate framework-agnostic design systems as a solution to the challenges associated with large scale systems utilizing multiple frameworks. The study explores framework-agnostic design systems in a public sector context, with a focus on maintainability, design driven development and developer experience. This study applies the Design Science Research methodology, where two prototypes were implemented and subsequently evaluated by professional developers through task-based tests and surveys.The results show that the choice of underlying technical library, Lit or Stencil.js, is not a differentiating factor for maintainability, accessibility requirements or design driven development. The most important architectural insight is that documentation quality, for example through Storybook, is a more decisive factor for a successful design system than the choice of component library.The evaluation of developer experience showed that the framework-agnostic approach felt natural and similar to the developer’s ordinary work. This indicates a low adoption threshold and suggests that framework-agnostic design systems provide the same smooth workflow as framework-specific design systems.The study conclusively indicates that framework-agnostic design systems based on Web Components constitute a technically feasible and strategically advantageous solution in a public sector context. The study represents an empirical contribution to the limited research on developer experience in a public context and provides an evaluated basis for organizations considering the implementation of framework-agnostic design systems.
Place, publisher, year, edition, pages
2026. , p. 43
Keywords [en]
frameworkagnostic, designsystem, web components, developer experience, dx, maintainability, design driven, public sector, cognitive load
Keywords [sv]
ramverksagnostiskt, designsystem, web components, utvecklarupplevelse, dx, förvaltningsbarhet, designdriven, myndighetskontext, kognitiv belastning
National Category
Software Engineering
Identifiers
URN: urn:nbn:se:hig:diva-50321OAI: oai:DiVA.org:hig-50321DiVA, id: diva2:2075873
External cooperation
Lantmäteriet
Subject / course
Computer science
Educational program
Högskoleingenjör
Supervisors
Examiners
2026-06-232026-06-192026-06-23Bibliographically approved