Webben växer och webbapplikationer blir mer och mer komplexa och innehållsrika. Med detta så ska dessa växande applikationer även kunna presenteras på ett tilltalande och effektivt sätt. Jättarna Facebook, Twitter, Instagram och små bloggar har alla börjat använda sig av en teknik för att kunna dynamiskt ladda in ytterligare innehåll på en sida utan att behöva ladda om den. Denna teknik kallas för Infinite Scroll eller oändlig scrollning. Infinite Scroll kan resultera i enormt stort innehåll vilket tidigare studier visar på att det bidrar till bristande prestanda för rendering och manipulering av innehållet. Arbetet kommer utföra ett experiment där målet är att undersöka hur två populära SPA-ramverk AngularJS och ReactJS hanterar detta problem.

This project is the design and implementation of a web-based message board for software developers. The purpose of “Social Network for Software Developers” is to connect inexperienced software developers with experienced software developers.

The goal of this thesis is to design and develop a framework for building modern single- page application in the JavaScript programming language and describe this approach to development. The work also contains the documentation for a more comfortable use and customization. The content is divided into eight chapters. The introduction is followed by the retrieval of information resources, including the specifics of the JavaScript programming language and explanation of the formation of single-page application. The description of the basic principles of their functioning, motivation and justification, when and why this approach is appropriate is also included. The work is primarily focused on the issue of single-page application, for which the use of the JavaScript programming language is crucial. For this reason, this work provides a whole chapter about this programming language, also including a description of its history and role in the context of others. Below are the common characteristics of single-page applications frameworks, built on top of the library ReactJS, whose formation is engaged in the following chapter. The developed framework also contains the user guide. The practical outcome of this work is an open source framework for creating serverless single-page applications, which is due to its architecture and documentation appropriately adaptable.

The aim of this project has been to investigate whether the headless CMS Sanity can live up to the needs of the the train operator GoAhead Nordic for its website in the transition from EpiServer. To investigate this, the existing website has been recreated as closely as possible. A studio/user interface has been built from scratch in Sanity where schemes and structure has been set for what content an editor can and must enter. Thereafter the content is fetched through an API to a standalone web application. In the web application, React components have been created based on the fetched content from Sanity. The work has been performed in an agile project form and regular meetings were held with the customer to constantly keep relevant focus and priority. The result has shown that even though there are a few minor problems still present there is a great reliability that with a little more time they will be solved. The conclusion of this work is that the headless CMS Sanity lives up to the needs of the customer and that the interface is easy to handle and understand. GoAhead Nordic has been very pleased with what was shown at the demonstrations and has decided to use Sanity as its new CMS / Målet med detta arbete har varit att undersöka om det huvudlösa CMS:et Sanity kan leva upp till de behov järnvägsoperatören GoAhead Nordic har för sin webbplats i övergången från EpiServer. För att undersöka detta har den befintliga webbplatsen återskapats i så stor utsträckning som möjligt. En studio/ användargränssnitt har byggts upp från grunden i Sanity där scheman och struktur har satts upp för hur en redaktör kan och får mata in innehåll. Därefter har detta innehåll hämtats via ett API till en helt fristående webbapplikation. I webbapplikationen har React-komponenter skapats utifrån innehållet som hämtats från Sanity. Arbetet har utförts i en agil projektform och regelbundna möten har hållits med kunden för att hela tiden ha relevant fokus och prioritering. Resultatet har visat att det i dagsläget finns små problem som inte hunnit lösas inom ramen för detta projekt men att det finns en stor tillförlitlighet att de kommer gå att lösa med lite mer tid. Slutsatsen i detta arbete är att det huvudlösa CMS:et Sanity lever upp till de behov som kunden har och att gränssnittet är lätt att hantera och förstå. GoAhead Nordic har varit mycket nöjda med det som visats upp på de regelbundna demonstrationerna och har beslutat sig för att använda Sanity som sitt nya CMS.

Fully autonomous cars are on the horizon. Knightec wants to enable passengers of the future car to be more productive and entertained with a new web platform. With this platform, Knightec wants to explore different input methods one of which being a voice assistant. A key component in a voice assistant is Automatic Speech Recognition (ASR) and for this task, Knightec had planned to use the new Web Speech API. Their target platform (Oculus Quest 2) does not yet support the Web Speech API and a future implementation could be limited. This thesis conducts a comparative study to find alternatives for running ASR in a web application. The study aimed to compare browser-implemented ASR methods to server implemented methods with Web Speech API as a baseline. The study first conducted a document study to find methods for running ASR tasks inside a web application and then create requirements for method selection. With the requirements, two suitable implementations were found for a browser implementation of ASR. During the final implementation, one of these failed, leaving only one method implemented in the browser. Three ASR methods were chosen for the server implementation, following requirements also set by the document study. To compare the ASR methods a dataset was created with the help of Knightec. The dataset consists of 10 commands, utilizing the voices of six individual employees at Knightec including separate versions, one with and one without background noise for each voice totaling 120 recordings. The dataset was used as a benchmark for each implementation where Word Error Rate (WER) and response time were measured. Due to the structure of the Web Speech API, it was not possible to measure response time for this implementation. The result of the benchmark shows that Web Speech API consistently outperforms the other methods in terms of WER. The response times of the browser implementation could not keep up with the other methods implemented and is not in the range of acceptable results. The recommended implementation for Knightec is to use a server-based implementation while for the general case Web Speech API is the best alternative.

Цель работы – создание Web-приложения для взаимодействия с серверной частью, на которой запущен Discord-бот для прослушивания музыки из разных источников, включая российские музыкальные сервисы. Объектом выпускной квалификационной работы является VoIP-мессенджер Discord. Предметом выпускной квалификационной работы является Frontend часть Discord-бота для прослушивания музыки с разных источников с поддержкой web-интерфейса. В работе рассматривается предметная область, аналоги. Производится оценка и выбор технологий, архитектуры приложения. Описывается процесс разработки, трудности и подходы к их решению. Описывается тестирование и перспективы развития. / The goal of the work is to create a Web application for interacting with the server part, which runs a Discord bot for listening to music from various sources, including Russian music services. The object of the final qualifying work is the VoIP messenger Discord. The subject of the final qualifying work is the Frontend part of a Discord bot for listening to music from different sources with support for a web interface. The work examines the subject area and analogues. Technologies and application architecture are assessed and selected. The development process, difficulties and approaches to solving them are described. Testing and development prospects are described.

Denna studie undersöker skillnader i svarstid mellan komponentbaserade SinglePage Applications i ReactJS och i LitElement. LitElement bygger på webbkomponenter som använder sig av Shadow DOM. ReactJS använder sig istället av Virtual DOM. Problemet är att virtual DOM kan orsaka en stor kostnad i beräkningskraft vid utveckling av större projekt. För att undersöka hur denna kostnad i beräkningskraft påverkar svarstiden för ReactJS i jämförelse medLitElement utförs ett experiment i en kontrollerad miljö. Resultatet blev att LitElement har en säkerställd lägre svarstid än ReactJS. Slutsatsen som drogs var att anledningen till denna skillnad i svarstid beror på kostnad i beräkningskraft förReactJS vid uppdatering av data . Vidare testning av detta fenomen, exempelvis fler mätserier eller funktioner skulle kunna vara ett framtida arbete. Andra framtida arbeten för att bredda denna studie kan även vara att undersöka skillnad vid användning av mobila enheter, applikationerna i kombination med databas ,mätning av utvecklingstid och mätning av användarupplevelse

The problematics of gigabit optical networks as well as web technologies suitable for a web tool implementation were studied within this thesis. An experimental web application for monitoring GPON frames is developed based on the proposed system architecture. The frontend is implemented using ReactJS and the Tornado web framework is used for backend implementation. Data for analysis are read from the stream using the Kafka platform.

The purpose of this project is to create a website with a React-based prototype recommendation system of a large cultural collection. The aim of the website is to provide a function that allows a user to upload an image to which the system consequently recommends correlating artwork from the publicly available collection of the Metropolitan Museum of Modern Art (MET). The correlation coefficient between the uploaded image and the artworks from (MET) is acquired through Pearson Correlation. Furthermore the artwork with the highest correlation to the uploaded picture is shown first, then each subsequent artwork is shown in order of highest correlation. The main challenge for building this prototype was to combine the different components together with JavaScript and the REACT framework. The recommendation engine demands numerical representations of these artworks, and most effort was given to the automatic conversion of photos of artworks into a proper format for the recommendation engine.

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.