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. Sammanfattning: Ensidesapplikationer har historiskt sett påverkats av starka marknadskrafter som pådriver snabba utvecklingscykler och leveranser. Detta medför att kvalitetskontroll och förändringsbar kod, som är viktiga faktorer för förvaltningsbarhet, blir lidande. I denna rapport utvecklar vi två funktionellt ekvi-valenta ensidesapplikationer med AngularJS och React samt jämför dessa applikationers förvaltningsbarhet enligt ISO/IEC 9126. AngularJS och React representerar två distinkta angreppsätt på webbutveckling, där AngularJS är ett ramverk med mycket färdig funktionalitet och React ett mindre bibliotek specialiserat på vyrendering. Kvalitetsjämförelsen utfördes genom att beräkna förvaltningsbarhetsindex för respektive applikation. Versionshanteringsanalys användes för att bestämma andra kvalitetsindikatorer efter den initiala utvecklingen samt två efterfö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 kraftigare ökning i komplexitet jämfört med React-applikationen. Versionshanteringsanalys visar att ändringar i dataflödet kräver större modifikationer för AngularJS-applikationen på grund av dess förbestämda arkitektur. Utifrån detta drar vi slutsatsen att ramverk är användbara när de understödjer utvecklingen mot kända krav men att deras nytta blir begränsad ju mer en applikation växer i storlek.

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.

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.

Web applications are subject to intense market forces, fast delivery and rapid requirement and code change. These are the factors that make maintainability a significant concern in any and especially web application development. In this report we develop a functional equivalent prototype from an existing Angular app, using ReactJs and afterward compare their maintainability as defined by ISO/IEC 25010. The maintainability comparison is made by calculating maintainability index for each of the applications using Plato analysis tool. The results do not show a significant difference in the calculated value of the final products. Source code analysis shows that changes in data flow need more modification in the Angular app, but with the objective oriented approach provided by Angular, we can have smaller chunks of code and thus higher maintainability per file and respectively a better average value. We conclude that regarding the lack of research and models in this area, MI is a consistent measurement model and Plato is a suitable tool for analysis. Though maintainability is highly bounded to the implementation, functionalities which are provided by the Angular framework as a bundle is more appropriate for large enterprises and complex products where React works better for smaller products.

This diploma thesis deals with developing generator for single-page applications. Before developing the application it was necessary to identify problem areas that prevent the development and describe tools that make it easy to create, test, maintain, and deploy single-page applications. Based on the obtained information, the generator Create Sbspa is designed and implemented to efficiently create single-page applications and help to eliminate development problems. It generates configuration and code from semantic templates. The generator is available through a user interface that splits the templates into the groups by applicability. The generator was designed with the need for simplicity and clarity to enable efficient integration with new features. This work also includes design and implementation of the example app which shows features and benefits of the generator.