The goal of this project was to develop specific functionality for a platform where health providers and schools can get in touch with each other. The programming languages used during the project were JavaScript, PHP and sass. PHP was used for the back-end development and JavaScript was used for the front-end development. The framework Vue js was use for front-end development and the CMS-system SilverStripe was partially used to make the platform more editable. The report describes, in detail, how the following functionality for the platform was created: how Bootstrap was replaced with JavaScript to create a focus border around a search field, how test-data was added to be able to easily test the platform before production, how the way data is extracted from the database was changed from SilverStripe to Vue, how filtering and sorting options was added to allow users to easily find the desired information, and how the test tool Wave was used to make the platform more user-friendly and accessible for as many people as possible, regardless of circumstances. / Målet med projektet var att utveckla specifik funktionalitet fö r en plattform dä r vå rdgivare och skolor kan komma i kontakt med varandra. De programmeringssprå k som användes under projektet var JavaScript, PHP och sass, PHP användes fö r back-end utvecklingen och JavaScript fö r front-end utvecklingen. Ramverket Vue js användes fö r frontend-utvecklingen och CMSsystemet SilverStripe användes till viss del fö r att gö ra plattformen redigerbar. Rapporten beskriver hur följande funktionalitet för plattformen skapats i detalj: Hur BootStrap har ersatts med JavaScript fö r att skapa en fokusram runt sö kfält, hur testdata adderats fö r att enkelt kunna testa webbplatsen innan produktion, hur sä ttet som data läses ut på ändrats från SilverStripe till Vue, hur filtrerings- och sorteringsmöjligheter lagts till fö r att användare enkelt ska kunna hitta den information som sö kes och hur testverktyget Wave har använts för att göra webbplatsen mer användarvänlig och tillgänglig för så många som möjligt oavsett förutsättningar.

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.

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.

This thesis firstly presents the exploration of an engaging user interface and navigation design for local community mobile applications. Furthermore, it seeks for the best suitable tool for both rapid prototyping and production development. The research and content is structured based on design and creation research methodology which is a user-centric and iterative process. To evaluate the suggested interface design and the selected tool, an interactive prototype was developed in this thesis. The results argues that card-based user interface and navigation design has the potential to enhance user engagement. In addition, AngularJS as the selected tool is a suitable framework for rapid prototyping as well as production development.

Developers often need to re-engineer distributed applications to address changes in requirements, made only after deployment. Much of the complexity of inspecting and evolving distributed applications lies in their distributed nature, while the majority of mature program analysis and transformation tools works only with centralized software. Inspired by business process re-engineering, in which remote operations can be insourced back in house to restructure and outsource anew, this dissertation brings an analogous approach to the re-engineering of distributed applications. Our approach introduces a novel automatic refactoring---Client Insourcing---that creates a semantically equivalent centralized version of a distributed application. This centralized version is then inspected, modified, and redistributed to meet new requirements. This dissertation demonstrates the utility of Client Insourcing in helping meet the changed requirements in performance, reliability, and security. We implemented Client Insourcing in the important domain of full-stack JavaScript applications, in which both the client and server parts are written in JavaScript, and applied our implementation to re-engineer mobile web applications. Client Insourcing reduces the complexity of inspecting and evolving distributed applications, thereby facilitating their re-engineering. This dissertation is based on 4 conference papers and 2 doctoral symposium papers, presented at ICWE 2019, SANER 2020, WWW 2020, and ICWE 2021. / Doctor of Philosophy / Modern web applications are distributed across a browser-based client and a remote server. Software developers need to optimize the performance of web applications as well as correct and modify their functionality. However, the vast majority of mature development tools, used for optimizing, correcting, and modifying applications work only with non-distributed software, written to run on a single machine. To facilitate the maintenance and evolution of web applications, this dissertation research contributes new automated software transformation techniques. These contributions can be incorporated into the design of software development tools, thereby advancing the engineering of web applications.

Our reliance on software has been growing fast over the past decades as the pervasive use of computer and software penetrated not only our daily life but also many critical applications. As the computational power of multi-core processors and other parallel hardware keeps increasing, concurrent software that exploit these parallel computing hardware become crucial for achieving high performance. However, developing correct and efficient concurrent software is a difficult task for programmers due to the inherent nondeterminism in their executions. As a result, concurrency related software bugs are among the most troublesome in practice and have caused severe problems in recent years. In this dissertation, I propose a series of new and fully automated methods for verifying and debugging concurrent software. They cover the detection, prevention, classification, and repair of some important types of bugs in the implementation of concurrent data structures and client-side web applications. These methods can be adopted at various stages of the software development life cycle, to help programmers write concurrent software correctly as well as efficiently. / Ph. D.

This thesis compares three modern JavaScript frameworks—Next.js, SvelteKit, and Astro—for e-commerce web development, focusing on how different rendering strategies (Static Site Generation, Server-Side Rendering, and Client-Side Rendering) affect performance metrics like load times, interactivity, and resource efficiency. Prototype e-commerce applications were developed using each framework, and performance testing was conducted to measure First Contentful Paint (FCP), Largest Contentful Paint (LCP), Interaction to Next Paint (INP), page size, and SEO-friendliness. Results show that Astro and SvelteKit consistently outperforms Next.js in load times and resource efficiency. However, the differences in performance metrics are not drastically large. All three frameworks are capable of delivering high-quality e-commerce applications. Therefore, decision-makers should also consider factors such as developer experience, community support, and specific project requirements when selecting a framework.

L’observation de l’exécution d’applications JavaScript est habituellement réalisée en instrumentant une machine virtuelle (MV) industrielle ou en effectuant une traduction source-à-source ad hoc et complexe. Ce mémoire présente une alternative basée sur la superposition de machines virtuelles. Notre approche consiste à faire une traduction source-à-source d’un programme pendant son exécution pour exposer ses opérations de bas niveau au travers d’un modèle objet flexible. Ces opérations de bas niveau peuvent ensuite être redéfinies pendant l’exécution pour pouvoir en faire l’observation. Pour limiter la pénalité en performance introduite, notre approche exploite les opérations rapides originales de la MV sous-jacente, lorsque cela est possible, et applique les techniques de compilation à-la-volée dans la MV superposée. Notre implémentation, Photon, est en moyenne 19% plus rapide qu’un interprète moderne, et entre 19× et 56× plus lente en moyenne que les compilateurs à-la-volée utilisés dans les navigateurs web populaires. Ce mémoire montre donc que la superposition de machines virtuelles est une technique alternative compétitive à la modification d’un interprète moderne pour JavaScript lorsqu’appliqué à l’observation à l’exécution des opérations sur les objets et des appels de fonction. / Run-time monitoring of JavaScript applications is typically achieved by instrumenting a production virtual machine or through ad-hoc, complex source-to-source transformations. This dissertation presents an alternative based on virtual machine layering. Our approach performs a dynamic translation of the client program to expose low-level operations through a flexible object model. These low-level operations can then be redefined at run time to monitor the execution. In order to limit the incurred performance overhead, our approach leverages fast operations from the underlying host VM implementation whenever possible, and applies Just-In-Time compilation (JIT) techniques within the added virtual machine layer. Our implementation, Photon, is on average 19% faster than a state-of-the-art interpreter, and between 19× and 56× slower on average than the commercial JIT compilers found in popular web browsers. This dissertation therefore shows that virtual machine layering is a competitive alternative approach to the modification of a production JavaScript interpreter when applied to run-time monitoring of object operations and function calls.

Sammanfattning Syfte - Syftet med studien är att undersöka vilka parametrar som kan komma att påverka applikationens rendering av användargränssnittet samt hur den skiljer sig i webbapplikation, hybridapplikation och nativeapplikation. Denna undersökning har för avsikt att besvara följande frågeställningar: 1.         Vilka parametrar kan påverka rendering av användargränssnittet på en mobil applikation?   2.         Hur skiljer sig renderingen av användargränssnittet hos webbapplikation, hybridapplikation och nativeapplikation?   Metod - Studien använder sig av en litteraturstudie för att besvara första frågeställningen och en experimentell studie där en hypotes samt förutsägelse formuleras och testas för att besvara andra frågeställningen.   Resultat – Resultatet från studien visar att nativeapplikationen inte alltid ger bättre prestanda vid utförande av samma uppgifter gentemot motsvarande webb- och hybridapplikation. Webbapplikationen hade genomgående bäst prestanda i användargränssnittet, medan hybridapplikation ofta gav sämre prestanda än de motsvarande applikationstyperna.   Implikationer - Studien bidrar till att utvidga kunskapen inom native-, hybrid- och webbapplikationers prestanda i användargränssnittet och kan ge företag samt utvecklare referensdata att grunda deras val av applikationstyp på. Studien påvisar att alla applikationstyper är värda att överväga, men webb- och nativeapplikationen presterade något bättre.   Begränsningar - Inga långtidstester kunde jämföras eftersom ADB inte läser av grafiskdata för webbapplikationer och Chrome DevTools inte kan utföra långa tester. / Abstract Purpose – The purpose of this thesis is to examine which parameters may affect application rendering of the user interface and how it differs in web application, hybrid application and native application. This thesis intends to answer the following research questions: Which parameters can affect the rendering of the user interface on a mobile application?    How does the rendering of the user interface differ from web application, hybrid application and native application? Method – The study uses a literature study to answer the first research question and uses an experimental study in which a hypothesis and prediction are formulated and tested to answer the second research question.   Results – The result of the study shows that the performance of the native application’s user interface does not always perform better when performing the same task as the corresponding web and hybrid application. The web application in general had the best performance in the user interface, while hybrid application often performed inferior to the corresponding application types.   Implications – The study contributes to extend the knowledge of native application’s, hybrid application’s and web application’s performance in the user interface, and can give companies and developers reference data to base their decision on the choice of application type. The study shows that all application types are worth considering, but the web and native application performed slightly better.   Limitations – No long-term tests could be compared because ADB does not read graphical data for web applications and Chrome DevTools cannot perform long running tests.

Ett icke trivialt IP-nätverk består av många noder som är förbundna med varandra genom olika typer av transmissionsmedier. Man kan föreställa sig nätverket som ett moln av noder och förbindelser. Nätverksvisualisering handlar om att kika in i molnet och snabbt få en övergripande bild över de komplexa relationer som finns i det. Genom att skapa nätverkskartor som grafiskt beskriver ett IP-nätverk kan arbetet med att övervaka och felsöka det underlättas. Telenors svenska nätverksövervakning har utvecklat ett system för att automatiskt generera nätverkskartor i formatet SVG. De har ställt frågan om det går att göra dessa interaktiva och koppla ihop dem med befintliga verktygsprogram. Denna rapport visar exempel på tekniker, baserade på öppen källkod och öppna standarder, som kan användas för att utveckla ett system som gör nätverkskartor i dokumentformatet SVG interaktiva i en webbläsare. Problemet att göra nätverkskartorna interaktiva analyseras och olika lösningsalternativ tas fram och jämförs med varandra. Ett system baserat på öppen mjukvara och öppna standarder utvecklas för att visa hur de redovisade teknikerna kan användas i praktiken. Systemets arkitektur beskrivs i tre systemvyer. Nätverkskartorna berikas med bindningar mellan händelser i webbläsaren och JavaScript-funktioner genom att transformera dem med XSLT. Användargränssnittet utgörs av SVG-objekt och JavaScript varifrån det går att asynkront anropa program på en webbserver. Systemet saknar kopplingar till Telenors verktygsprogram. Flera CGI-skript skapas som visar att det från webbservern går att anropa externa program. Det finns inga funktionella begränsningar som hindrar systemet från att kopplas ihop med verktygsprogrammen. Det implementerade systemet kan användas som en grund för att vidareutveckla ett mer komplett system för interaktiv visualisering av IP-nätverk. Systemets funktionalitet avgränsades och har enabart utvecklats för att fungera väl i webbläsaren Firefox. Om systemet ska användas i skarp miljö måste det impementeras stöd för de populäraste webbläsarna. Systemet innehåller inga funktioner rörande säkerhet, till exempel saknas krypterad förbindelse mellan klient och server. Rapporten avslutas med test och utvärdering av systemet och förslag ges på hur det kan förbättras.