This study is conducted to evaluate the Blazor WebAssembly framework for the Progressive Web Application (PWA) methodology. A comparative study is conducted with a ReactJS PWA as a baseline. The two frameworks are evaluated in their front-end performance and documentation of PWA-focused subjects. Front-end performance is measured between two experimental applications that test the loading times, heap memory usage and loading consistency during layout generation. It is found that a Blazor WebAssembly PWA takes on average a range of 0.34, 0.18, and 0.06 seconds less time to generate a layout than a ReactJS PWA. The Blazor WebAssembly PWA was less consistent in its loading times when handling many elements. Documentation that covers Progressive Web Application terminology was found to be different between the frameworks. The Blazor WebAssembly documentation covers more topics and provides first-hand knowledge while the ReactJS documentation covers fewer topics and relies on external sources to provide the necessary explanations. These findings indicate that Blazor WebAssembly is a faster framework when updating large amounts of elements in comparison to ReactJS. However, the ReactJS PWA was found to be overall more consistent in its loading times. Documentation varied between the two frameworks. Documentation in Blazor WebAssembly covers more Progressive Web Application subjects and is more in-depth than ReactJS.  This study only evaluates applications developed in ReactJS and Blazor WebAssembly. Both are tested on Google Chrome in a desktop environment.

With almost 70% of the population being active internet users and with signs that this number only will increase in the coming years, the value for companies, organisations, and hobbyists to be able to share what is important to them will also increase. One of the most common ways to gain attraction on the internet is with the help of a website. There are multiple ways to create a website, with one popular approach is with the help of content managing systems (CMS). Different CMSs offer a range of functionality and range in complexity. A staple name in the CMS community is Drupal. Drupal can provide the entirety of an application but can also be used in a decoupled mode where it serves as the backend for a frontend developed with other technologies, e.g. a JavaScript library like ReactJS. This thesis aimed to evaluate how the JavaScript library ReactJS interacted with Drupal when used in its decoupled mode. Different methods, such as JSON:API and GraphQL, to export data from the Drupal site were also compared. The thesis also aimed to guide less experienced developers through their journey of decoupled CMSs. Through extensive research about Drupal and ReactJS, as well as the core functionalities, the thesis provides the necessary groundwork for implementing a decoupled application. The concepts are then further expanded with realistic examples to provide a deeper understanding of the subject. By implementing a realist web application containing common functionalities found in modern web applications, it could be concluded that Drupal and ReactJS complemented each other excellently by providing each other with features the other one did not have. Difficulties encountered were related to the unique technologies rather than their collaboration. The comparison between JSON:API and GraphQL elucidated clear benefits and drawbacks for each, providing a guide for developers to choose based on their specific needs. Future research could broaden the scope to other CMSs and JavaScript libraries to enhance the understanding of decoupled architecture. Exploring the implementation of custom APIs is also suggested for further studies.

Denna kandidatuppsats presenterar design, implementation och testning av ett grafisktgränssnitt för CertCenter, en applikation för hantering av X.509-certifikat på Nordic MedtestAB. Vid starten av kandidatarbetet består CertCenter av ett Swagger-gränssnitt, som ärutvecklat med Python och FastAPI, med en MongoDB-databas för lagring. Det befintligaAPI:t och arbetssättet för certifikathantering på Nordic Medtest har visat vara otillräckligt ochmedför flera utmaningar för användarna, såsom komplexitet, bristande översikt ochspårbarhet av certifikatens livscykler samt bristande hantering av behörigheter. För attförenkla certifikathantering är syftet att utveckla ett grafiskt gränssnitt med hjälp av ReactJSoch komponenter från Ineras Designsystem. Metoder som användes inkluderarsemistrukturerade intervjuer och fokusgrupper med målgruppen för att identifiera behov ochmål, framtagning av kravspecifikation, prototyputveckling, implementering i ReactJS, ochslutligen utforskande test av gränssnittets funktionalitet och design. Resultatet visar att detutvecklade gränssnittet gör det möjligt för anställda på Nordic Medtest att söka eftercertifikat, ta del av certifikatsinformation, ladda ner certifikat, kopiera certifikatets PEM ochCSR i textformat, skapa nya samt uppdatera certifikat. Slutsatsen visar på att införandet av ettgrafiskt gränssnitt för CertCenter kan effektivisera skapandet, hanteringen och uppdateringenav X.509-certifikat jämfört med det nuvarande API:t. Ett grafiskt gränssnitt kan hjälpaanvändarna att förstå, tolka och använda CertCenter utan behovet att förstå eller undersökaAPI-svar i JSON-format. En tydlig uppdelning av funktioner och användargrupper gör dettydligt för användarna vilka funktioner de har behörighet att utföra till skillnad från API:t däralla anrop är tillgängliga för alla. Vidare betonas vikten av att involvera användarna idesignprocessen, iterativ testning av gränssnittet, användartester samt prioritering ochimplementering av kvarstående krav för att säkerställa att fortsatt utveckling av gränssnittetmöter användarnas behov och är användbart för dem.

This independent work includes refactoring a website application. In simpler sense, it means modernizing existing code by increasing its quality and making it more understandable; to exchange old knowledge of methods and concepts into something that is more relevant to its time. This refactoring has also meant to transform the UI into something that is more appealing, and more userfriendly. The website that has gone through the refactoring is Nordyr (”https://nordyr.com/”). Nordyr is a Nordic Film & Series Database that shares information about Nordic films and tv-series, and everyone involved. They also offer social tools such as user profiles and various tools to simplify the exploration and interaction between Nordic movies and consumers. This was made possible by using vanilla PHP, JavaScript/jQuery, and the MariaDB database for information storage and management. The implementation of the refactoring meant retaining PHP for the backend, but applying the Laravel framework, and likewise for JavaScript, but applying ReactJS (a powerful JavaScript library). Nordyr retains MariaDB for its information storage and management, however, its SQL queries have been adapted to Laravel’s query-builder and Eloquent ORM, which means that the majority of SQL queries have been rewritten and the majority of data tables are now represented by models. The restructuring of Nordyr has shown that the website now has the ability to scale better, and the development environment will also be more pleasant for those involved. / Det här självständiga arbetet har innefattat att omstrukturera en hemsida. Det innebär i enklare mening att modernisera kod och öka dess kvalité; att byta ut äldre kunskaper om metoder och koncept till något som anses vara av mer relevans för sin tid. Refaktoreringen har också inneburit att dess UI gjorts om till att bli mer tilltalande och användarvänlig. Hemsidan som gått igenom refaktoreringen är Nordyr (”https://nordyr.com/”). Nordyr är en Nordisk Film- & Serie-databas som delar information om nordiska filmer och tv-serier och alla inblandade. De erbjuder även sociala verktyg som användarprofiler och diverse verktyg för att förenkla upptäckandet och interaktionen mellan nordiska titlar och konsumenter. Detta gjordes möjligt med hjälp av vanilj PHP, JavaScript/jQuery, och databasen MariaDB för informationslagring och hantering. Genomförandet av refaktoreringen innebar att behålla PHP för backend men tillämpa ramverket Laravel, och likaså för frontend, JavaScript stod kvar men ReactJS (”JavaScript bibliotek”) tillämpades. Nordyr behåller MariaDB, men dess förfrågningar i SQL har anpassats till Laravels query-builder och Eloquent ORM, vilket innebar att majoriteten av SQL frågor skrivits om och majoriteten av tabeller representeras nu av modeller (”Models”). Omstruktureringen av Nordyr har visat på att hemsidan nu har förmågan att skala bättre, och utvecklingsmiljön kommer även bli mer behaglig för de inblandade.

Under de senaste åren har webbapplikationsarkitekturen utvecklats för att möta webbapplikationsanvändarnas krav på sömlösa användarupplevelser (Aggarwal & Verma, 2018). Teknikval och ramverk påverkar prestandan för e-handelswebbplatser vilket i sin tur påverkar användarupplevelsen och e-handelsföretagens lönsamhet (Camilleri, 2021). Ett tekniskt experiment genomfördes för att jämföra teknikkombinationerna One-way data bindning, Virtual DOM och Two-way data bindning och Real DOM för ramverken ReactJS och Angular. Resultatet från de olika mätserierna visade på att hypotesen om att ReactJS med dess teknikkombinationer har en snabbare renderingstid, endast stämmer när en (1) produkt renderas ut i kundvagnen. Men när fler produkter renderas ut i kundvagnen falsifieras hypotesen då Angular med dess teknikkombinationer har en snabbare renderingstid. För framtida arbete skulle ytterligare mätningar behöva genomföras där fler antal produkter testasför att se vart gränsen går för teknikvalen utifrån antalet renderade element, men också att genomföra mätningar i fler webbläsare.