A Reengineering Framework for the Migration of a Legacy Front End
Valjakka, Andreas (2019)
2019
Tietojenkäsittelytieteiden tutkinto-ohjelma
Informaatioteknologian ja viestinnän tiedekunta - Faculty of Information Technology and Communication Sciences
This publication is copyrighted. You may download, display and print it for Your own personal use. Commercial use is prohibited.
Hyväksymispäivämäärä
2019-12-17
Julkaisun pysyvä osoite on
http://urn.fi/URN:NBN:fi:tuni-201912136873
http://urn.fi/URN:NBN:fi:tuni-201912136873
Tiivistelmä
JavaScript has evolved into the most popular programming language in the world with an eco- system of code libraries. One of the first major web development frameworks, AngularJS, is still the most used JavaScript framework for web applications. However, due to its rigidity and the introduction of modern solutions, AngularJS is no longer a viable option for web applications. So, a need arises to call for a software migration methodology for phasing AngularJS out incremen- tally. This thesis devises and implements a framework for the phase-out process of an application that focuses on migrating its user interfaces from AngularJS to React - a popular modern open- source library.
The migration framework is an adaptation of an existing model. It describes a process where each major activity is viewed as a reengineering process that consists of a reverse engineering, a restructuring and a forward engineering phase. The framework is applied in a case study to analyze and illustrate the detailed steps of migrating a web user interface from AngularJS to Re- act. To minimize the effort, eliminating unnecessary code and salvaging reusable logic is taken into account in different phases of the migration process, and tools are constructed for that pur- pose. Furthermore, the entire application structure is reverse engineered into a tree structure that assists in recognizing user interface components, their composition and interrelatedness. This tree structure facilitates evaluating the user interface components with which to begin reengineer- ing activities.
This thesis contributes to web development by providing a reengineering framework for mi- grating client-side solutions to new technology platforms. Additionally, it provides a sequence of reengineering activities to follow. For AngularJS solutions, the activities introduce concepts and guidelines to utilize.
The migration framework is an adaptation of an existing model. It describes a process where each major activity is viewed as a reengineering process that consists of a reverse engineering, a restructuring and a forward engineering phase. The framework is applied in a case study to analyze and illustrate the detailed steps of migrating a web user interface from AngularJS to Re- act. To minimize the effort, eliminating unnecessary code and salvaging reusable logic is taken into account in different phases of the migration process, and tools are constructed for that pur- pose. Furthermore, the entire application structure is reverse engineered into a tree structure that assists in recognizing user interface components, their composition and interrelatedness. This tree structure facilitates evaluating the user interface components with which to begin reengineer- ing activities.
This thesis contributes to web development by providing a reengineering framework for mi- grating client-side solutions to new technology platforms. Additionally, it provides a sequence of reengineering activities to follow. For AngularJS solutions, the activities introduce concepts and guidelines to utilize.