This degree project is a scientific study where the focus is to formulate a method of how to compare Single-Page Application (SPA) frameworks written in JavaScript. To solve the problem, an abstraction of SPA frameworks is required. This abstraction is completed using a criteria-based approach. Criteria are collected from literature and interviews with experienced developers. Every criterion is defined and has a set of questions evaluating it. In addition to the abstraction concepts are extracted from other comparative methods, such as performance testing and code comparison. The method is evolved into two separate parts, a theoretical and a practical. Finally, the method is tested on three different frameworks, AngularJS, Angular 2 and React, by implementing a prototype for each framework. From this prototype, code comparison and performance tests are conducted and evaluated. According to the method, AngularJS is suggested to be the best choice. However, the majority of the results from the theoretical part were more or less identical whereas practical part showed more differences. For future reference, this method could be evaluated to other comparative methods or be extended with more criteria and questions. / Detta examensarbete är en vetenskaplig studie där fokus är att formulera en metod för hur man kan jämföra ramverk för single-page-applikationer (SPA) skrivna i JavaScript. För att lösa problemet, behövs en abstraktion av SPA-ramverk. Denna abstraktion använder sig av ett kriterium baserat tillvägagångssätt. Kriterier samlas in från litteratur och intervjuer med erfarna utvecklare. Varje kriterium definieras och har en uppsättning frågor som utvärderar det. Förutom abstraktionen extraheras koncept från andra komparativa metoder, såsom prestandatestning och kod jämförelse. Metoden utvecklades i två separata delar, en teoretisk och en praktisk. Slutligen testas metoden på tre olika ramverk, AngularJS, Angular 2 och React genom att implementera en prototyp för varje ramverk. Från denna prototyp kan kod jämförelser och prestandatester genomföras och utvärderas. Resultatet visar att AngularJS är det bästa valet. Men de flesta av resultaten från den teoretiska delen var mer eller mindre identiska medan den praktiska delen visade fler skillnader. För framtida utveckling, kan denna metod utvärderas med andra jämförbara metoder eller utökas med flera kriterier och frågor.

Memoria para optar al título de Ingeniero Civil en Computación / El presente documento describe la implementación de un sistema web bajo la arquitectura de aplicación de página única (en inglés, SPA: Single Page Application), con el objetivo de dar apoyo a la gestión interna de OTECs (Organismos Técnicos de Capacitación), dando una experiencia más fluida a los usuarios del sistema a través de una aplicación de escritorio. Las tecnologías escogidas en este proyecto permiten generar una arquitectura modular, que facilita la modificación de su estructura, con el objetivo de agregar o quitar servicios según los procesos internos que posea un OTEC en particular. Además, las funcionalidades desarrolladas en este sistema permiten apoyar procesos transversales de un OTEC, como por ejemplo: registrar usuarios, crear y corregir pruebas, y realizar encuestas de satisfacción, entre otras. Este sistema web permite al OTEC, registrar diversos tipos de usuario: internos, empresas y estudiantes regulares. Entre las principales funciones de los usuarios internos (empleados del OTEC), se encuentra: registrar estudiantes y empresas, generar y revisar pruebas para las capacitaciones, cargar documentos de apoyo, y generar credenciales, diplomas y actas de entrega. Por su parte, los usuarios empresa pueden: controlar el avance los alumnos, y descargar las credenciales, diplomas y actas de entrega. Finalmente, estudiantes regulares pueden ver su participación en las capacitaciones, y descargar sus credenciales, diplomas y responder pruebas. La solución desarrollada permite a la OTEC reducir el número de errores en la carga de información, y evitar la duplicidad de la misma. Por otro lado, al ser éste un sistema online, permite el trabajo en paralelo y distribuido, siempre que se cuente con acceso a internet. Este trabajo de memoria se desarrolló en el marco un OTEC particular, quien destacó el software como un elemento diferenciador respecto a otros OTEC. Aunque este proyecto será continuado con el objetivo de cubrir todas las necesidades de un OTEC, los resultados actuales del software han sido evaluados positivamente, y le permiten al OTEC operar con niveles de error muy por debajo de sus niveles históricos.

There is a need of storing and keeping track of things. As the amount of information increases, so does the demand for suitable applications that can manage the data. This thesis has had its focus on developing a web administration interface for relational databases, where the focus has been on managing and visualizing the data, where relationships between data within the database could be predicted through an algorithm. During the thesis, it was revealed that administrators can utilize naming conventions for databases, a property which can be used to predict its relationships. Furthermore, existing applications for managing databases has been compared with the thesis' implementation. Notable differences are that existing solutions are focused towards the structure of the data, rather than the data itself. To accomplish all this, an agile method was chosen for fast results within the deadline, together with standardized web development tools and JavaScript frameworks. The resulting implementation consists of a front- and backend. The frontend was developed using the Ember.JS framework for making web applications and the backend was implemented using Node.JS, together with a component for handling different database dialects called Sequelize. It has been concluded that the prototype this thesis has resulted in works as a proof of concept, complete with a prediction algorithm that can suggest relationships within databases that utilizes convenient and consistent naming conventions. In the future, further research and tests could be conducted to evaluate the security, reliability and usability of the application, to ensure its production quality.

This is a report on the development and implementation of the web shop “Urballa Ur”, a web application developed by nine students at Linköping university. The report illustrates the methodology and process with intention to answer the question “How can an online watch store be implemented to increase sales?”. During the process the agile method scrum has been used as a working method. A survey and a market plan was created and the results were used as a foundation for the backlog and implementation process. Additionally, a thorough theoretical study was conducted to found the report in academic research. The results of the study is discussed and the conclusion shows that, by creating a thorough backlog and a solid theoretical background, it is possible to develop a web shop with the requirements to answer the question.

MVC architecture is one of the most known and used architecture for application development, for both web and desktop based application. New architecture evolved though thanks to the fast-growing industry and it brings new practices that are much more convenient to use. The main goal of this theses is to describe how Redux library, which is based on this new architecture, is used for application development. Redux is only a state management library, another library is needed for creating the user interface. It is possible to create the user interface from the scratch but it takes a lot of time and it is difficult to scale. React library is possibly the most favorite library for creating UI and it works well together with Redux. For these reasons, React was selected as the UI library that will be used in this thesis. While theoretical part of this thesis is focused on describing principles Redux and React libraries are based upon and the best practices for using these libraries, practical part is focused on using the theoretical knowledge in the real world, demonstrated on the web application for invoicing. Development of the invoicing system is described in a way that demonstrates to the reader how to approach web application development, what does it contain and where to start.

This diploma thesis deals with development of web applications using Google web Toolkit. GWT is modern set of open source tools that allows developers to create Rich Internet Applications completely in Java without any deep knowledge of JavaScript. The theoretical part of this thesis is focused on architecture of Google Web Toolkit, basic approaches and some advanced topics as MVP architecture, client-server communication or persistence layer. The practical part consists of set of examples which demonstrates approaches described in theoretical part.

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

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.

Digitalization has changed our world and how we interact with different systems. Desktop applications have more and more been integrated with internet, and the web browser has become the Graphical User Interface (GUI) in today’s system solutions. A change that needs to be considered in the automated regression testing process. Using the actual GUI has over time shown to be a complicated task and is therefore often broken out as its own standalone test object. This study looked into time and quality constrains of using the GUI as driver of the regression testing of business requirements in a web based solution. By evaluating the differences in execution times of test cases between Application Programming Interface (API) calls and GUI driven testing, flakiness of test results and required modifications over time for a specific test suite. These constraints were analyzed by looking into how reliability of the test results could be achieved. With a GUI driven full end to end scope the quality in software solutions could be improved with a reduction in the number of interface issues and detected errors in deployed systems. It would also reduce the volume of test cases that needs to be executed and maintained as there are no longer standalone parts to verify separately with partially overlapping test cases. The implementation utilized Selenium WebDriver to drive the GUI and the results showed that by utilizing Selenium the test execution times were increased from approximately 2 seconds (API) to 20-75 seconds (Selenium). The flaky test results could be eliminated by applying the appropriate pattern to detect, locate, and scroll into visibility prior to interacting with the elements. In the end of the study the test execution results were 100% reliable. The navigation required 15 modifications over time to keep them running. By applying the appropriate pattern a reliable test result can be achieved in end to end regression testing where the test case is driven from the GUI, however with an increase in execution time.

A single-page application is a website that retrieves all needed components in one single page load. The intention is to get a user experience that reminds more of a native appli- cation rather than a website. Single-page applications written in Javascript are becoming more and more popular, but when the size of the applications grows the complexity is also increased. A good architecture or a suitable framework is therefore needed. The thesis begins by analyzing a number of design patterns suitable for applications containing a graphical user interface. Based on a composition of these design patterns, an architecture that targets single-page applications was designed. The architecture was designed to make applications easy to develop, test and maintain. Initial loading time, data synchronization and search engine optimizations were also important aspects that were considered. A framework based on the architecture was implemented, tested and compared against other frameworks available on the market. The framework that was implemented was designed to be modular, supports routing and templates as well as a number of different drivers for communicating with a server-side database. The modules were designed with a variant of the pattern Model-View-Controller (MVC), where a presentation model was introduced between the controller and the view. This allows unit tests to bypass the user interface and instead communicate directly with the core of the application. After minification and compression, the size of the framework is only 14.7 kB including all its dependencies. This results in a low initial loading time. Finally, a solution that allows a Javascript application to be indexed by a search engine is presented. It is based on PhantomJS in order to produce a static snapshot that can be served to the search engines. The solution is fast, scalable and easy to maintain.