Context: As most modern browsers fully support the new set of APIs called Web Components, it is crucial to investigate how developers could use them to enhance the performance and developer experience of web development. When considering this, it is fitting to investigate both the technical and practical differences between modern libraries powered by the APIs, versus traditional libraries which do not. Objectives: In this study, traditional libraries using Virtual DOM got investigated to find out which differences exist when compared to modern ones using Web Components. To find out how this next generation of front-end libraries could utilize these new APIs to improve the build process of websites. If the APIs offer alternative ways for developers to achieve better performance and developer experience. Realization:  In order to fulfill the objectives, an empirical study and a literature review were conducted. In the literature review, we investigated how a set of well-known front-end libraries technically compares to new and aspiring Web Components based libraries. In the empirical study, a new Web Components library was built from the ground up with inspiration from Vuejs. With the help of modern code styles to achieve a fresh developer experience. Results: The results of the study show that Web Components based libraries tend to be quite powerful and offer excellent all-around performance. The created library, Kirei, reflected this as it became a powerful all-around library that offers a great developer experience. It also performed equally well or even better than Vue on most benchmarks. However, Vue was better at creating new elements while Kirei excelled at updating elements. In a way, the libraries excitingly contrasted with each other. Conclusions: While Vue and React are fundamentally different from Lit-Element, Heresy, and Kirei, they are alike in some sense. Most of the differences come from how the libraries apply updates to the DOM. While Web Components based libraries patch only the dynamic parts, Virtual DOM has to diff both the dynamic and static parts. Moreover, Kirei proved to be a robust framework that could compete with Vue and React. In some benchmarks, it proved to have an upper edge in performance.

Német, K., Web application displaying data flows between objects on generated online map. Brno: Mendel University, 2019. This diploma thesis is about creation of a map interactive presentation in the form of web applications for data visualization on the map. The application is created for academical purposes, especially for future research of visualization on the map. The theoretical part describes the basic concepts and technologies used in map applications and description of used technologies and technical tools used during implementation. The practical part describes application design, data storage and application testing. At the end of this thesis is discussed, possible application extension and application applicability in practice.

Text classification is a subset of machine learning which is used to classify texts such as tweets, email, news headlines or articles, with tags or categories. As news publishing can have uncertainty in their categorisations, text classification could categorise articles autonomously and distinguish unclear categorisations. The library TensorFlow helps with operations and tools for the machine learning workflow.  This paper takes focus on the crucial parts of working with machine learning using TensorFlow.js and to what extent this model can categorise a news article. The authors evaluates different models to analyse how optimising the settings will affect the accuracy of the model. Results of this paper was researched with a literature study of official documentations and peer reviewed reports. An empirical experiment where machine learning models were trained in TensorFlow.js was also performed. The results showed that the model with the highest accuracy with 87.17% accuracy was trained with 1000 articles using Relu and Softmax activation functions and the Mean squared error loss function. While the model with lowest accuracy had 75.5% using Sigmoid activation functions and Categorical cross-entropy on the 5000 articles training set. Crucial parts for this development were: optimizer function, loss function, batch size, activation functions, training data and test data with labels, normalise function, shapes of layers and computing power. There are several parts and functions to take in consideration when developing a machine learning model with text classification in TensorFlow.js. The training process needs to be performed multiple times as there are many parameters which has an affect on the model results. The model results can be improved by optimising and finding the best combination between different functions and parameters.

The project is about a GS1-verified input system Prevas GCM, which is a web service for suppliers to send article information to receivers. With the current system the suppliers need to select each receiver individually when sending information. The purpose with the project is to develop a system that let suppliers create receivers groups from receivers. The preparatory work consist of create prototypes in Adobe XD. Thereafter the web application produced in two steps. The project has mostly used the programming language JavaScript together with AG-Grid. In addition html and css have been used. The result was a almost launch-ready product with minor fixes left. / Projektet har handlat om GS1-verifierat inmatningssystemet Prevas GCM, som är en webbtjänst som låter leverantörer skicka ut artikelinformation till mottagare. Den nuvarande lösningen innebär att leverantörerna måste välja alla mottagare enskilt. Syftet med projektet blev att utveckla en webbapplikation som låter leverantörer skapa mottagargrupper av mottagare. Förarbetet bestod av att skapa prototyper i Adobe XD. Därefter har webbapplikation tagits fram i två steg. Projektet har huvudsakligen använt programmeringsspråket JavaScript ihop med AG-Grid. Utöver det har HTML och CSS används. Resultatet blev nästan en lanserings-klar produkt med mindre fix kvar.

Nashorn is a JavaScript engine that compiles JavaScript source code to Java bytecode and executes it on a Java Virtual Machine. The new bytecode in-struction invokedynamic that was introduced in Java 7 to make it easier for dynamic languages to handle linking at runtime is used frequently by Nashorn. Nashorn also has a type system that optimizes the code by using primitive bytecode instructions where possible. They are known to be the fastest imple-mentations for particular operations. Either types are proved statically or a method called optimistic type guess-ing is used. That means that expressions are assumed to have an int value, the narrowest and fastest possible type, until that assumption proves to be wrong. When that happens, the code is deoptimized to use types that can hold the current value. In this thesis a new architecture for Nashorn is presented that makes Nashorn’s type system reusable to other dynamic language implementations. The solution is an intermediate representation very similar to bytecode but with untyped instructions. It is referred to as Nashorn bytecode in this thesis. A TypeScript front-end has been implemented on top of Nashorn’s cur-rent architecture. TypeScript is a language that is very similar to JavaScript with the main difference being that it has type annotations. Performance mea-surements which show that the type annotations can be used to improve the performance of the type system are also presented in this thesis. The results show that it indeed has an impact but that it is not as big as anticipated. / Nashorn är en JavaScriptmotor som kompilerar JavaScriptkod till Java bytekod och exekverar den på en Java Virtuell Maskin. Nashorn använder sig av den nya bytekodinstruktionen invokedynamic som introducerades i Java 7 för att göra det lättare för dynamiska språk att hantera dynamisk länkning. I Nashorn finns ett typsystem som optimerar koden genom att i så stor utsträckning som möjligt använda de primitiva bytekodinstruktioner som är kända för att vara de snabbaste implementationerna för specifika operationer. Antingen bevisas typen för ett uttryck statiskt om det är möjligt eller så används något som kallas för optimistisk typgissning. Det innebär att uttrycket antas ha typen int, den kompaktaste och snabbaste typen, ända tills det antagandet visar sig vara falskt. När det händer deoptimeras koden med typer som kan hålla det nuvarande värdet. I det här dokumentet presenteras en ny arkitektur för Nashorn som gör det möjligt för andra dynamiska språk att återanvända Nashorns typsystem för bättre prestanda. Lösningen är en intermediate representation som påminner om bytekod men som är uttökat men otypade instruktioner. I det här doku-mentet refereras den som Nashorn bytekod. En TypeScript front-end har implementerats ovanpå Nashorns nuvaran-de arkitektur. TypeScript är ett språk som liknar JavaScript på många sätt, den största skillnaden är att det har typannoteringar. Prestandamätningar som visar att typannoteringarna kan användas för att förbättra prestandan av Nashorns typsystem presenteras i det här dokumentet. Resultaten visar att typannoteringar kan användas för att förbättra prestandan men de har inte så stor inverkan som förväntat.

Describes the creation of an e-commerce store consisting of a client application, a REST API and a database. In this e-commerce store, two APIs containing Klarna's and PayPal's payment solutions have been integrated. These have also been compared in a simpler literature study. An e-commerce store consisting of the three components ordered above has been created. Both payment solutions have been implemented in the store. Based on a literature study, it has been stated that PayPal's API is suitable for better complex applications where you want a lot of freedom to be able to tailor the functions. Klarnas API is better adapted for applications that can be developed fast and are user-friendly. / Beskriver skapandet av en e-handelsbutik bestående av en klientapplikation, ett REST API och en databas. I den här ehandelsbutiken har två API:er innehållande Klarnas och PayPals betallösningar integreras. Dessa har även jämförts i en enklare litteraturstudie. En e-handelsbutik som bestod av de tre komponenter som beskrevs ovan har skapats. Båda betallösningarna har implementerats i butiken. Utifrån en litteraturstudie och så har det konstaterats att PayPals API lämpar sig bättre åt komplexa applikationer där man vill ha mycket frihet över att kunna skräddarsy funktionerna. Klarnas API är bättre anpassat för applikationer som ska kunna utvecklas fort och vara användarvänliga

The aim of this thesis is to examine differences between the three Javascript frameworks Angular, React and Vue along the Unified Theory of Acceptance and Use of Technology (UTAUT) model. With the purpose to give developers support in their choice of framework. Previous studies focused on advantages and disadvantages of the frameworks from a technical perspective, therefore we decided to carry into effect a qualitative study based on developers experience. Our method of choice was a case study where the phenomenon was “why a framework is chosen”, this ruled and motivated our research. We used a survey as the method to collect data. With our survey we collected data from more than 500 different developers. The results from the research are presented in different tables and charts which we analyze and compare to the results of previous studies related to ours. The conclusion of our research is that Vue is a good option for a developer that is learning on your own, looking for a framework that is easier to learn or developing a smaller project on your own. Angular is considered to be the most complicated framework to learn, but is a good option for anyone who is looking for a job or is involved with bigger projects. React has the lowest overall values in all the UTAUT categories, but has shown to be a viable option for someone looking for better job opportunities. The advantage React has over Angular is that it is easier to learn. The final results of our thesis are recommendations and not strict rules. Decisions for and against a framework depend heavily on the use case and other varying circumstances. Our study can hopefully give a better insight and support developers in their choice of framework. / Webbutveckling utvecklas, innoveras och skapar nya möjligheter för användare att mötas på en gemensam plattform. En del av utvecklingen är möjlig mha JavaScript-ramverk vars versioner är i tusental. Syftet med vår rapport var att undersöka skillnader mellan de tre ramverken Angular, React och Vue utefter Unified Theory of Acceptance and Use of Technology (UTAUT) modellen för att kunna ge utvecklare stöd i sitt val av ramverk. Tidigare studier visar på fördelar och nackdelar kring de tekniska aspekterna hos ramverken. Därför valde vi att utföra en kvalitativ studie baserad på utvecklares erfarenheter. Vi utförde en fallstudie där fenomenet var “varför ett ramverk väljs”, detta styrde och var motiveringen till våran forskning. Vi använde en enkät som metod för datainsamling. Med vår enkät samlade vi in data från över 500 olika utvecklare. Resultat från undersökningen presenteras i olika tabeller och grafer som analyseras och jämförs med tidigare studiers resultat inom samma område. Vår slutsats av resultaten är att Vue är ett bra alternativ för dig som lär sig utveckla på egen hand, vill ha ett lättare ramverk att lära sig och utvecklar mindre projekt på egen hand. Angular anses var det svåraste ramverket att lära sig, men kan vara ett bra alternativ för dig som vill söka jobb eller ska utveckla ett större projekt. Angular är det ramverk som funnits under en längre tid och har därför bredare möjligheter. Även om React uppskattas lägst i alla kategorier så har det visat att det är ett bra alternativ för dig som vill öppna upp fler jobbmöjligheter. Fördelen React har över Angular är det är lättare att lära sig. Resultatet vi presenterar är förstås bara rekommendationer och inget som är definitivt. Beslut för och emot vilket ramverk som är bäst varierar från fall till fall beroende på omständigheterna. Men vår studie kan förhoppningsvis ge en bättre insikt och hjälpa utvecklare som står inför att välja ramverk.

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.

The goal with this exam project is to take as much knowledge as possible from earlier courses I’ve taken at the webdevelopment program at Mid Sweden University and use this knowledge for a project for a company working with webdevelopment. I’ve chosen to do my exam project for David Törner Web agency who’s main goals are to work with Content Management Systems, (CMS). I’ve developed a custom theme and a webstore in the CMS WordPress with the plugin WooCommerce, a plugin that connects webstores with WordPress sites for easier administration and management of products. The webstore is selling bikes in the categories mountain bikes, enduro and downhill bikes, specially black bikes with high quality and it works as a demonstration of a webstore to show other companies what we are able to offer if they choose us to do a webstore in WordPress. The webstore also offers service on the bikes that the customer can book by themselves through the contact form. The design and foundation for the webstore have been designed and developed in the program Adobe XD in the form of moodboards, wireframes and design sketches and then coded in the program Visual Studio Code, (VSC) with the program language HyperText Preprocessor, (PHP), HyperText Markup Language, (HTML), Cascading Style Sheets, (CSS) and JavaScript. The design and the foundation of the webpages have been connected to WordPress and the webstore plugin WooCommerce and the webstore has been published online through a public webhosting service. / Syftet med detta examensarbete är att ta så mycket som möjligt utav kunskapen från tidigare kurser i webbutvecklingsprogrammet på Mittuniversitetet och applicera denna kunskap i ett arbete åt ett företag som inriktar sig inom webbutveckling. Jag har valt att göra mitt examensarbete åt David Törners Webbyrå som inriktar sig specifikt på webbsidor skapade med Content Management Systems, (CMS). Jag har utvecklat ett tema samt en webbutik i CMS:et WordPress med tillägget WooCommerce, som är ett tillägg som kopplar samman webbutiker med WordPressidor för enklare administrering samt hantering utav webbutiken och varorna. Webbutiken inriktar sig på försäljning utav cyklar inom kategorierna mountainbikes, enduro- samt downhill-cyklar, specifikt svarta och högkvalitativa cyklar samt fungerar som en demonstrations-webbutik att visa upp för företag som exempel på vad de skulle kunna få om de väljer en webbutik gjord i WordPress. Webbutiken erbjuder även service utav cyklar och att kunden via kontaktformulär kan boka sin service. Design och grund för webbutiken har utvecklats först i programmet Adobe XD i form utav moodboard, wireframes samt designskisser och sedan utvecklats och kodats i programmet Visual Studio Code, (VSC), med hjälp utav programspråket Hypertext Preprocessor, (PHP), HyperText Markup Language, (HTML), Cascading Style Sheets, (CSS) samt JavaScript. Designen och grunden på webbsidorna har sedan kopplats samman med WordPress samt webbutik-tillägget WooCommerce och publicerats på ett publikt webbhotell.

The municipality of Nyköping has for a long period of time had complaints from its municipal residents considering the lack of information given about the municipalitys garbage collection. The municipality has not previously had data that has been able to respond to this, but now the municipality has compiled an Excel file with all current addresses considering the garbage collection. In order to be able to offer the information to the municipal residents, a search function was desired that could easily cater for this. The project was developed mainly in JavaScript and will be implemented in Episerver's environment that the municipality uses. The search function has been developed with an autocomplete function and takes into account all current garbage pickup intervals that the municipality has requested. / Nyköpings kommun har under en längre tid fått klagomål från sina kommuninvånare att det inte på ett enkelt vis går att tillhandahålla sig information kring när nästa sophämtning sker för deras adress. Kommunen har tidigare inte haft data som har kunnat svara på detta, men nu har kommunen sammanställt en Excel-fil med alla aktuella adresser och dess sophämtningar. För att kunna erbjuda informationen till kommuninvånarna önskades en sökfunktion som enkelt kunde presentera detta. Projektet utvecklades främst i JavaScript och ska implementeras i Episervers miljö som kommunen använder sig av. Sökfunktionen har utvecklats med en autocomplete-funktion och beaktar alla aktuella hämtningsintervaller som kommunen har önskat.