Mid Sweden University

I den ständigt utvecklande världen av webbutveckling erbjuds en uppsjö av språk, ramverk och bibliotek som underlättar skapandet av grafiska komponenter såsom knappar, listor, tabeller och menyer. Dessa verktyg är avgörande idag för att snabbt och effektivt kunna utveckla användarvänliga gränssnitt som uppfyller dagens höga krav på utseende och funktionalitet. Den här studien utforskar olika alternativ för att skapa en enhetlig ”look and feel” som är lätt att underhålla över tid i ett område där det hela tiden sker förändringar och där nya komponentbibliotek skapas. Studien går igenom för- och nackdelar i att skapa egna komponenter, nyttja open-source bibliotek och nyttja ramverk som Microsofts produkt Blazor som idag är ett ramverk Lyko använder. Studien kommer belysa för- och nackdelar utifrån tid för utveckling, förvaltningsbarhet och risk för inlåsning. Som komplement till studien kommer ett användargränssnitt skapas med en uppsättning komponenter som knappar, tabeller och liknande. Detta skapas i de olika ramverken för att undersöka och demonstrera möjligheten att använda en enhetlig CSS-fil för att uppnå en bra design trots användning av flera olika frontend teknologier och ramverk. Efter tillämpning av CSS-filen över de olika ramverken och över de olika ramverken med komponentbibliotek, kommer en demonstration av testerna visas där målet är att behålla en enhetlig ”look and feel”. Genomförande av dessa studier och tester ger till sist en bedömning på hur väl en ”ren” CSSapproach är genomförbar och effektiv i olika ramverk. Svar till frågor som, hur enkelt de är att underhålla gränssnitten, risken för inlåsning och tid för utveckling besvaras också under testning. Resultaten visar att React, Angular och Blazor alla möjliggör effektiv implementering av en gemensam CSS med varierande låg grad av anpassning krävd. En enhetlig visuell identitet uppnåddes över olika ramverk, vilket demonstrerar att en strategi med egna komponenter och minimal inbyggd stil från ramverken underlättar anpassningen av en gemensam CSS. Däremot introducerade användningen av komponentbibliotek större utmaningar i att upprätthålla denna konsistens, vilket tyder på att övervägande mellan funktionalitet och visuell enhetlighet måste göras i framtida projekt. Undersökning av tid för utveckling, förvaltningsbarhet och risk för inlåsning gav React mest poäng, därefter Angular och Blazor.

In the constantly evolving world of web development, an amount of languages, frameworks, and libraries are available to facilitate the creation of graphical components such as buttons, lists, tables, and menus. These tools are crucial today for the rapid and efficient development of user-friendly interfaces that meet the high standards of appearance and functionality demanded by the modern user. This study explores various options for creating a unified "look and feel" that is easy to maintain over time in an area where changes are constant and new component libraries are being developed. It examines the pros and cons of creating custom component libraries, utilizing open-source libraries, or using frameworks that build on Microsoft's products, like Blazor, which is currently used by the company Lyko. The study will highlight the advantages and disadvantages based on development time, maintainability, and the risk of lock-in. As a complement to the study, an user interface will be created with a set of components such as buttons and tables. This will be developed in the various frameworks to investigate and demonstrate the possibility of using a unified CSS file to achieve good design despite the use of multiple different frontend technologies and frameworks. After applying the CSS file across the different frameworks, a demonstration of the tests will be shown where the goal is to maintain a unified "look and feel". The execution of these studies and tests ultimately provides an assessment of how viable and efficient a "clean" CSS approach is across different frameworks. Answers to questions such as how easy it is to maintain the interfaces, the risk of lock-in, and development time will also be addressed during testing. The results show that React, Angular, and Blazor is all enable the effective implementation of a common CSS with varying degrees of adaptation required. A unified visual identity was achieved across different frameworks, demonstrating that a strategy involving custom components and minimal built-in style from the frameworks facilitates the adaptation of a common CSS. However, the use of component libraries introduced greater challenges in maintaining this consistency, suggesting that careful consideration of functionality and visual uniformity must be made in future projects. An investigation of development time, maintainability, and the risk of lock-in awarded the highest points to React, followed by Angular and Blazor.