hig.sePublications
Change search
CiteExportLink to record
Permanent link

Direct link
Cite
Citation style
  • apa
  • harvard-cite-them-right
  • ieee
  • modern-language-association-8th-edition
  • vancouver
  • Other style
More styles
Language
  • sv-SE
  • en-GB
  • en-US
  • fi-FI
  • nn-NO
  • nn-NB
  • de-DE
  • Other locale
More languages
Output format
  • html
  • text
  • asciidoc
  • rtf
Ramverksagnostiska designsystem: Teknisk arkitektur och dess påverkan på utvecklarupplevelse
University of Gävle, Faculty of Engineering and Sustainable Development, Department of Computer and Geospatial Sciences, Computer Science.
University of Gävle, Faculty of Engineering and Sustainable Development, Department of Computer and Geospatial Sciences, Computer Science.
2026 (Swedish)Independent thesis Basic level (professional degree), 10 credits / 15 HE creditsStudent 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
Available from: 2026-06-23 Created: 2026-06-19 Last updated: 2026-06-23Bibliographically approved

Open Access in DiVA

fulltext(1429 kB)14 downloads
File information
File name FULLTEXT01.pdfFile size 1429 kBChecksum SHA-512
6066190d220d0934aa2c6beebf2a9a522d85debfd9559e62ae092add1e1b356ebaa5df35193ec38e94ef0259c57face13508ef8a52fac15ce133a35faf458a6c
Type fulltextMimetype application/pdf

By organisation
Computer Science
Software Engineering

Search outside of DiVA

GoogleGoogle Scholar
The number of downloads is the sum of all downloads of full texts. It may include eg previous versions that are now no longer available

urn-nbn

Altmetric score

urn-nbn
Total: 84 hits
CiteExportLink to record
Permanent link

Direct link
Cite
Citation style
  • apa
  • harvard-cite-them-right
  • ieee
  • modern-language-association-8th-edition
  • vancouver
  • Other style
More styles
Language
  • sv-SE
  • en-GB
  • en-US
  • fi-FI
  • nn-NO
  • nn-NB
  • de-DE
  • Other locale
More languages
Output format
  • html
  • text
  • asciidoc
  • rtf