Over the course of the last few years, the fashion industry hasbegun to focus more resources on their digital transition. For afashion e-commerce business, it is essential to know whether ornot to invest money and time in building a modern webapplication. This master's thesis aims at finding practical resultson how transitioning from a multi-page website towards a SinglePage Application can have an impact on the businessperformances of the company, as measured by ConversionRate, Page Views and Gross Sales. In collaboration with thedevelopment and product team of a fashion company, thismaster's thesis is based on the six-months development of a newSingle Page Application using the Javascript framework React.js,building on known User-Experience Design principles andHuman-Computer Interface heuristics. The live data collectionfrom the website's audience allowed a quantitative analysis ofthe transition's effect on business performance, which showedpositive impact on business performance. A qualitative usersurvey was then conducted in order to further elaborate on thecauses of the aforementioned impact: all respondents praisedthe Single Page Application as compared to the multi-pagewebsite, and noted lower Response Time, efficient filter-andsearchsystem and high user interaction as advantages thatplayed in favour of their browsing experience and their will-tobuya product. The impact of lowering Response Time evenmore was discussed, as well as the different limitations due tothe scope of this thesis. A list of user suggestions for furtherimprovements was also compiled. / Under de senaste åren har modebranschen lagt mer resurser på digital omställning. För en modebutik inom e-handeln är det viktigt attveta om det är värt att investera pengar och tid i en modern webbapplikation. Detta examensarbete syftar till att söka praktiska resultatom hur övergången från en flersidig webbplats till en Single Page Application kan ha betydande inverkan på en modebutik inom ehandelnsekonomiska resultat. Detta examensarbete grundar sig i sex månader av utveckling av en Single Page application för ettfranskt startup-företag inom modebranschen. Applikationen byggdes med Javascript-ramverket React.js. Designen grundas på kändaprinciper inom användarupplevelsedesign och människa-datorinteraktionsheuristik. Den dynamiska datainsamlingen från webbplatsensbesökare användes till en detaljerad kvantitativ analys av övergångens inverkan på de ekonomiska resultaten: Det fanns en signifikantökning på 284% för Conversion Rate. En kvalitativ användarundersökning genomfördes i syfte att undersöka orsakerna bakom dennaeffekt. Alla respondenter svarade att Single Page Application var bättre än den flersidiga webbplatsen. De noterade att lägre svarstid,effektiva filter och söksystem och hög användarupplevelse var viktiga aspekter för deras vilja att köpa en produkt. Effekten av att minskasvarstiden ytterligare diskuterades, så även de begränsningar som finns inom ramarna för det här examensarbetet. En lista medanvändarförslag för fortsatta förbättringar sattes också samman.

Denna rapport beskriver ett kandidatarbete som genomfördes i kursen TDDD96 Kandidatprojekt i programvaruutveckling år 2023. Den produkt som framställdes under projektet är en webbapplikation för felsökning av informationsskyltar via Bluetooth och arbetet genomfördes med en agil arbetsmetodik. Syftet med denna rapport är att förklara hur projektgruppen arbetade under kandidatprojektet och skapade värde för kunden, samt att belysa både tekniska lärdomar och andra erfarenheter som projektgruppen fick under arbetet. Rapporten beskriver överförbar kunskap gällande projektarbeten respektive utveckling med Bluetooth som kan vara användbar i framtida projekt. För att dokumentera erfarenheter, skapa värde för kunden och förbättra arbetsprocessen under projektet genomfördes mätningar, testning, informationssamling, prototypframställning och utvärderingsmöten i form av retrospektiv och en muddy-cards-utvärdering.  Projektgruppen har utvecklat en webbapplikation som använder sig av Web Bluetooth API för att hämta en godtyckligt stor fil givet att användaren skriver in dess sökväg i felsökningsapplikationen. För att skicka filer av godtycklig storlek delas de upp i paket som alla skickas separat. En av de främsta fördelarna med det använda API:t är att ingen nedladdning eller installation krävs men en stor nackdel är att det inte är kompatibelt med alla webbläsare. Vidare har erfarenheter såsom för- och nackdelar med mobbprogrammering, vikten av olika sprintlängder, antal scrum-möten samt uppdelning av arbete dokumenterats. Under projektet har det även visats att en systemanatomi hjälper utvecklare att dela in och se kopplingar mellan olika delar i ett system samt att kundmöten är centrala för att säkerställa att en beställd produkt är av värde för kunden.

This report is about implementing Graphical User Interface for the CatFish website. The CatFish project is iterative research on water pollution where samples from water bodies aremonitored and collected using three different vehicles. The authors of this report, the frontend team, have created a website that aims to represent collected data from the vehicles in the form of diagrams and charts. It also shows live video streaming and gives the CatFish team the ability to control the vehicles remotely. Our results have shown that the website is functional, user-friendly, and ready to be hosted and used. / Den här rapporten handlar om att implementera grafiskt användargränssnitt för CatFish-webbplatsen. CatFish-projektet är iterativ forskning om vattenföroreningar där prover frånvattenförekomster övervakas och samlas in med tre olika fordon. Författarna till denna rapport, frontend-teamet, har skapat en webbplats som syftar till att representera insamlade data från fordonen i form av olika typer av diagram, visa live-videoströmning och ge CatFish-teametmöjligheten att fjärrstyra fordonen. Våra resultat har visat att webbplatsen är funktionell, användarvänlig och redo att hostas och användas.

Idag hämtar anställda på Bredband2 data från olika databaser på ett interntsystem som kallas en API-Hubb.  Denna API-Hubb samlar all informationsom kunder, telefonnummer, tjänster och kunders personliga data genomAPI (Application Programming Interface) förfrågningar.  Denna API-Hubbär begränsad i sin funktionalitet och ägs idag av ett externt företag som tarbetalt vid anslutningar av nya tjänster.  Det här arbetet avser att skapa enAPI-Hubb som utökar denna funktionaliteten genom att komplettera denparallellt eller att ersätta den.För att göra det behöver ett Python-baserat webbramverk användas som geren bra grund för att uppfylla arbetsgivarens krav samt erbjuda effektiva ochfunktionella  lösningmöjligheter.   De  funktioner  som  finns  på  existerandeAPI-Hubb  ska  få  utökade  anpassningsmöjligheter  genom  dynamisk  kodsom är skalbart och fungerar oavsett vilken funktion som ska utföras.Funktionalitet  och  utveckling  kommer  att  ske  till  stor  del  i  Django  RestFramework med programmeringsspråket Python.  För funktioner i använ-dargränssnittet kommer React att användas.  En uppgift är att få React ochDjango Rest Framework att interagera samt att arbetet ska använda sig avPostgreSQL som databas.Arbetet startar med att göra förundersökningar över vilket webbramverksom  ska  användas.   Django  Rest  Framework  valdes  och  installation  ochgrundkonfiguration  av  Django  startades.   När  den  grundliga  konfigura-tionen  ägt  rum  så  börjar  utvecklandet  av  API  endpoints,  models,  viewsoch funktioner för testmiljö.  Det bestämdes olika utföranden för GET för-frågningar och POST förfrågningar riktade mot olika endpoints. Resultatenvisar på att det är fullt möjligt att utveckla en API-Hubb med utökad funk-tionalitet  och  anpassningsmöjligheter  med  Django  React  Framework  ochReact genom att skapa en dynamisk kod som arbetar mot flera funktionerberoende på vilken indata som hanteras. / Today, employees at Bredband2 retrieve data from various databases on aninternal system called an API-Hub.  This API-Hub collects all informationsuch  as  customers,  telephone  numbers,  services  and  customers  personaldata through API (Application Programming Interface) requests. This API-Hub is limited in its functionality and is currently owned by an externalcompany that charges for connections of new services.  This project is in-tended to create an API Hub that expands this functionality by supplement-ing or replacing it.To do so, a Python-based web framework must be used which provides agood basis for meeting the foreman’s requirements as well as offering effi-cient and functional solution options.  The functions available on the exist-ing API-Hub will have extended customization options through dynamiccode that is scalable and works regardless of which function is to be per-formed.Functionality and development will take place in the Django Rest Frame-work with the programming language Python. React will be used too han-dle  functions  in  the  user  interface.   One  of  the  tasks  is  to  get  React  andDjango Rest Framework to interact and that PostgreSQL is used as the database.The work starts with doing preparatory research on which web frameworkis to be used.   Django Rest Framework was selected and installation andbasic configuration of Django was started.   Once the thorough configura-tion had taken place, the development of API endpoints, models, views andfunctions for the test environment began.  Different rules were determineddepending on whether it was a GET request or a POST request, which weresent to different endpoints.  The results showed that it is entirely possibleto develop an API-Hub with extended functionality and customization op-tions with Django React Framework and React by creating a dynamic codethat works towards several functions depending on which input data is han-dled.

No description available.

Långa laddningstider eller bristfällig prestanda kan ha en negativ effekt på användarupplevelsen av en webbsida. Utvecklare kan ta hänsyn till detta vid skapande av ett system genom valet av ramverk, men eftersom det finns ett brett utbud av JavaScript ramverk, som är ett av de mest populära programmeringsspråken, kan det bli en utmaning. Syftet med arbetet är att med hjälp av olika tester och testermetoder jämföra prestandan mellan JavaScript ramverken Angular, React och Vue för att hjälpa utvecklare att välja ramverk. Testerna som ramverken genomförde var rendering av bilder och videor samt skapande, uppdaterande och borttagande av 1 000/50 000 DOM element i webbläsarna Google Chrome, Microsoft Edge och Mozilla Firefox för att samla in kvantitativa data. Verktyget WebPageTest användes för att mäta prestandan vid rendering av bilder och videor. Tidsstämplarna performance.now() och Date.now() användes för att mäta tiden det tog att utföra DOM manipulationer i millisekunder.   Resultatet för ramverken lades in i tabeller och en poängskala skapades för att räkna ut vilket ramverk som var mest effektivt. React presterade bäst vid rendering av bilder och videor med 53 poäng, Vue resulterade i 37 poäng och Angular 5 poäng. Vid DOM manipulering var Vue mest effektiv och tilldelades 42 poäng, Angular fick 32 poäng och React 14 poäng. För att ta reda på vilket av ramverken som generellt var effektivast summerades poängen för båda testerna och resulterade i att Vue totalt presterade bäst med 79 poäng, React hamnade på andra plats med 67 poäng och Angular sist med 37 poäng. React och Vue hade små marginaler mellan varandra i resultatet vid rendering av bilder och videor vilket gör till ett passande ramverk för webbsidor som kräver regelbunden DOM manipulering och som innefattar bilder och videor. Angular presterade bäst vid skapande och uppdatering av 50 000 element i alla webbläsare samt uppdatering av 1 000 element i Google Chrome och Mozilla Firefox. React var minst effektiv vid skapande och uppdatering av element, men presterade bäst vid borttagning av 50 000 element i Google Chrome och Microsoft Edge.

No description available.

This work examined the state of accessibility in React UI component libraries. The accessibility of these libraries is essential since they are used to create the frontend of hundreds of thousands of projects. We conducted a controlled experiment to evaluate the accessibility of six open source libraries. We selected libraries based on GitHub dependents intervals to include libraries with varied use. In the experiment, we implemented a UI for each library with a few standard components. We then tested these UI implementations based on WCAG 2.1 and WAI-ARIA 1.1 with automated testing using Axe and manual test cases. We also used exploratory testing with the screen reader NVDA to detect issues based on actual use with an assistive device. We also conducted a literature review to support the experiment and the following discussion and conclusions of its results. We detected 50 accessibility issues in total and all libraries had one or more issues. Also, that there was a significant difference in the accessibility of libraries. The second interval had the least number of issues and was closely followed by the first interval with the most dependents. The two libraries selected from the interval with the least dependents had the most issues. We recommend developers not using libraries from the interval with the least dependents for public web products. Since all libraries had one or more issues, we also recommend developers choose libraries with care to ensure accessibility, WCAG 2.1 compliance, and follow WAI-ARIA 1.1. This work was limited to six libraries and a few components; there are many more of both. Another limitation was that the testing was limited to a desktop resolution and did not include mobile testing. Also, the work used the free version of Axe, and a paid version could potentially detect more accessibility issues.

Pandemier är något som dyker upp lite då och då. Att kunna visualisera data öppnar möjligheten att hitta intressanta mönster och agera på dem. Geografiska visualiseringar har en förmåga att på ett tydligare sätt bilda förståelse om vad som presenteras och människor har det lättare att resonera och lära sig på ett mer effektivt sätt i en visuell miljö gentemot en textuell- eller numerisk miljö. Arbetet utför en jämförelse mellan de två JavaScriptramverken React och Vue.js. Ramverken använder sig utav Google Charts för att rendera grafer, och en mätning utförs för att ta reda på renderingstid mellan de olika ramverken. Arbetet innehåller även en användarstudie för att ta reda på hur användare tycker att stapeldiagram och GeoCharts fungerar beroende på olika sammanhang. / <p>Det finns övrigt digitalt material (t.ex. film-, bild- eller ljudfiler) eller modeller/artefakter tillhörande examensarbetet som ska skickas till arkivet.</p>

I denna studie jämförs JavaScript-biblioteket React mot Joomla på en e-commerce webbsida. Tillämpningen på e-commerce webbsidan är bokhandel. I implementationen skapades det två webbsidor. En med React och den andra med Joomla. Webbsidan använder sig även av Bootstrap som CSS-ramverk för att få samma layout. Detta är viktigt då mätningen utförs i en kontrollerad miljö där det är viktigt att allting utgår ifrån samma förutsättningar. Mätningen sker genom ett eget skript som körs genom Tampermonkey tillägget i Chrome. Resultatet av mätningarna visas senare i grafer som indikerar att React har en mycket snabbare svarstid jämfört med Joomla-webbsidan. I framtida arbeten går det att öka antalet produkter och innehåll och göra webbsidan mer verklighetsbaserat. Det går även att byta tillämpningstema till en elektronikwebbsida där det förmodligen skulle behöva innehålla fler bilder och även videoklipp.