Stratil J. Refactoring of web portal Curriculum Generator to single-page application. Diploma thesis. Brno: Mendel University, 2017. This thesis is documenting the refactoring process of web application located at web portal Curriculum Generator. The thesis contains analysis of the application status, which is the basis for a draft. The draft includes changes to be made during the refactoring process, a process of choosing JavaScript framework for the refactoring process and a draft of new API. The thesis continues with an implementation of the proposed changes and draft, using chosen technologies. The thesis ends with a description of the refactored application deployment process.

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.

Kondr, M. Web application for personal management. Diploma thesis. Brno, 2018. This diploma thesis deals with the creation of a hybrid application for personal management, which should help the user in a simple and effective way with the organization of his own life. This thesis analyzes the current tools that people use for this purpose, then the functionality of the new application is designed and the process of implementation is described.

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.

Auddly provides a music management tool that gathers all information about a musical piece in oneplace. The acceptance testing on their web application is done manually, which has become bothtime and money consuming. To solve this problem, an evaluation on automated acceptance testingwas done to find a testing tool suitable for their web application. The evaluation was performed byfinding the current existing testing strategies to later compare the tools implementing these strategies.When analyzing the results it was found that two testing strategies were best suited for automatedacceptance testing. The Visual Recognition strategy that identifies components using screenshotsand the Record and Replay strategy that identifies them by their underlying ID. The choice betweenthem depends on which of these properties are modified more often.It was also found that automating acceptance testing is best applied for regression testing, otherwiseit should be performed with a manual approach.It was made clear that the Selenium tool, which uses the Record and Replay strategy, was best suitedfor Auddly’s acceptance testing. Selenium is able to test AJAX-calls with a manual modificationand is a free and open source tool with a large community. / Auddly tillhandahåller ett musikverktyg som samlar all information om ett musikstycke på ett endaställe. Acceptanstestningen på deras webbapplikation sker manuellt, som både blir tidskrävande ochdyrt. För att lösa detta problem har en utvärdering av automatiserade acceptanstestverktyg genomförtsför att hitta det verktyg som passar deras webbapplikation bäst. Utvärderingen utfördesgenom att hitta existerande teststrategier för att sedan jämföra de verktyg som implementerar dessastrategier.I analysen av resultatet framkom det att två av strategierna var mest passande för automatiseradeacceptanstester. Strategin Visual Recognition som identifierar komponenter genom skärmdumparoch strategin Record and Replay som identifierar de via deras underliggande ID. Valet mellan demberor på vilka av dessa egenskaper som ändras oftare.Det framkom även att automatisering av acceptanstester är mest lämpligt i regressionstestning, iandra typer av testning bör det ske manuellt.Det klargjordes att verktyget Selenium, som använder strategin Record and Replay, var det bästpassande för Auddly’s acceptanstestning. Selenium kan testa AJAX-anrop med en manuell modifieringoch är ett gratis verktyg med öppen källkod samt ett stort forum.

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.

Arbetet undersöker huruvida laddtider för en single-page applikation av typen kundvagn påverkas beroende på vilket av JavaScript ramverken AngularJS och Vue som använts under utvecklingsfasen. Undersökningen görs mot bakgrunden att e-handeln hastigt växt på webben under det senaste decenniet till att bli globalt konkurrenskraftig. Den mest centrala delen all e-handel är kundvagnen och det finns en uppsjö av ramverk som kan förenkla utvecklandet som alla har olika styrkor och svagheter. Studien kommer genomföras som ett experiment där en applikation för respektive ramverk skapas på en lokal webbserver och jämförs mot varandra. Testerna kommer genomföras på en MacBook genom automatiserade script i Tampermonkey. Dessa skillnader framhäver behovet av att göra ett val. Resultatet visar tydligt att vilket ramverk som använts påverkar laddtider men till fördel för olika ramverk vid olika tillfällen. Arbetet kan ge en rad framtida arbeten härledas där resultat kan styrkas och utvidgas för att bli än mer givande.

Hur presterar en webbplats som är byggd efter en multi-page arkitektur eller single-page arkitektur prestandamässigt? Hur stor påverkan har navigeringstider för webbplatser på användare och hur blir en webbplats mer användbar? En single-page applikation i två versioner har byggts upp med en Ajax sökfunktion som tillhandahåller en datauppsättning från StackOverflow. Undersökningsmetoderna experiment och användarstudie har tillämpats för att bevisa eller motbevisa hypotesen. Resultatet blev att single-page arkitekturen bevisades vara snabbare än multi-page arkitekturen. Användare anser att svarstider på webbplatser är mycket viktiga. En webbsidas design påverkar användarens vilja att använda denna och enligt deltagande testpersoner valdes en av versionerna ut som mer användbar.

Hur presterar Single-page applikation och Multi-page applikation beroende på datamängden webbsidan består av?  Hur påverkas svarstiderna beroende om det är en MPA- eller en SPA-baserad webbsida. Dessa frågor är de som ligger i fokus för detta arbete. Empiriska mätningar tillämpades för att besvara de frågor. En webbsida skapades för skönhetssalongen Red Carpet i Skövde. Två olika versioner av webbsidan utvecklades, en SPA-baserad och en MPA-baserad. Skillnaden mellan de båda versionerna är enbart att ena är utvecklad som en SPA och den ena är utvecklad som en MPA.Därefter lades en varierande datamängd i form av bilder till på sidorna för att se hur datamängden påverkar webbapplikationernas svarstider.

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.