Single-page applications have historically been subject to strong market forces driving fast development and deployment in lieu of quality control and changeable code, which are important factors for maintainability. In this report we develop two functionally equivalent applications using AngularJS and React and compare their maintainability as defined by ISO/IEC 9126. AngularJS and React represent two distinct approaches to web development, with AngularJS being a general framework providing rich base functionality and React a small specialized library for efficient view rendering. The quality comparison was accomplished by calculating Maintainability Index for each application. Version control analysis was used to determine quality indicators during development and subsequent maintenance where new functionality was added in two steps.   The results show no major differences in maintainability in the initial applications. As more functionality is added the Maintainability Index decreases faster in the AngularJS application, indicating a steeper increase in complexity compared to the React application. Source code analysis reveals that changes in data flow requires significantly larger modifications of the AngularJS application due to its inherent architecture for data flow. We conclude that frameworks are useful when they facilitate development of known requirements but less so when applications and systems grow in size. / Ensidesapplikationer har historiskt sett påverkats av starka marknadskrafter som pådriver snabba utvecklingscykler och leve­rans­er. Detta medför att kvalitetskontroll och förändringsbar kod, som är viktiga fak­torer för förvaltningsbarhet, blir lidande. I denna rapport utvecklar vi två funktionellt ekvi­val­enta ensidesapplikationer med AngularJS och React samt jämför dessa applikationers för­valtningsbarhet enligt ISO/IEC 9126. AngularJS och React representerar två distinkta angreppsätt på webbutveckling, där AngularJS är ett ramverk med mycket färdig funk­tional­itet och React ett mindre bibliotek specialiserat på vyrendering. Kvalitets­jämförelsen utfördes genom att beräkna förvaltningsbarhetsindex för resp­ek­tive applikation. Ver­sions­­hanteringsanalys användes för att bestämma andra kvalitets­indi­kat­orer efter den initiala utvecklingen samt två efter­följande underhållsarbeten.   Resultaten visar inga markanta skillnader i förvaltningsbarhet för de initiala applikationerna. I takt med att mer funktionalitet lades till sjönk förvaltnings­barhetsindex snabbare för AngularJS-applikationen, vilket motsvarar en kraft­igare ökning i komplexitet jämfört med React-applikationen. Versions­hanteringsanalys visar att ändringar i dataflödet kräver större mod­ifika­tioner för AngularJS-applikationen på grund av dess förbestämda arki­tek­tur. Utifrån detta drar vi slutsatsen att ramverk är användbara när de under­stödjer utvecklingen mot kända krav men att deras nytta blir begränsad ju mer en applikation växer i storlek.

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.

The traditional definition of a dynamic web application is about a collection of programs executed at server-side to provide content for clients. These types of web applications produce content at server-side and deliver it to their clients via multiple pages. In result, the client-side has the responsibility to render the content and perform a limited amount of calculations to increase the performance and user experience.    Meteor is a web framework designed for developing Single Page Applications and compared with traditional web frameworks, it takes a new approach in which most of the computations are done at the client-side. This leads to having the server-side primarily used for data storage and secondarily performing a limited amount of computations based on the Model View View-Model pattern.    This thesis tries to examine how web development is affected by Meteor framework from different angles by performing an experimental analysis on Meteor framework. It will investigate different attributes of Meteor framework used for developing a real-world application and finally concludes by presenting the advantages and disadvantages of using it.

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.