Framework to migrate angularjs based legacy web application to react component architecture

Abstract

Due to the increased complexity and the high expectation of the modern web applications, the legacy applications built on top of previous generation frontend frameworks such as AngularJS fail to serve both end users and developers. The AngularJS based legacy applications start poorly performing when the application grows larger. At the same time they become highly challenging for developers to maintain and add new functionality over time. The next generation component based frontend frameworks such as React has outperformed AngularJS from both the end user and developer expectations. Since the whole industry has evolved to gain the benefits of the component architecture, sooner or later all these legacy applications need to migrate to new component based architecture. The concepts, patterns and the architecture of the old school AngularJS application and the component based React applications are different so the migration is not a straightforward step. The successor of AngularJS which is named as Angular2 provides some tooling to support migrating old AngularJS applications to Angular2 but those are not directly compatible with React migration. This makes the organizations and developers who are planning to migrate AngularJS application to stick with Angular2 which is a less popular and flexible framework when compared with React. This research tries to define a clear migration path from AngularJS applications to React applications which will allow organizations and developers to choose React also as a goto framework option and will save hundreds of research and development hours in setting up the migration. This research compares and contrasts approaches of legacy frontend application migrations with respect to steps, best practices, technologies tools and pain points. By comparing different approaches, the research provides a step by step guideline which can be referred to and followed when migrating any AngularJS based legacy application to component base React application. These guidelines are organized as a migration framework with steps of refactorings and provide as the first outcome of this research. As the second step of this research, a migration assistant tool which is called as Ng-React Copilot was implemented to guide the developer through the migration steps and apply them to the existing code base. The tool was developed by converting the critical refactorings proposed in the framework into a set of detection algorithms and providing the ability to scan against the provided codebase as a command line tool as well as an integrated tool with populer IDEs. The framework and the tool were validated by applying them to selected small, medium and enterprise level AngularJS legacy applications. One application was selected from each category and used the tool and the framework to step by step migrating to React where the small application was fully migrated to React while the medium and enterprise applications were migrated partially with the interest of the time. The results from the migration assistant tool and the framework were collected and validated the accuracy of them and except for a few false positives, the migration assistant tool was detecting the required refactoring accurately and was making the migration straight forward. Improving the algorithms and configurations to avoid false positives, improve the tool to guide the users as a step by step workflow rather than showing all the refactorings at once, automating few more time consuming manual refactorings, improving the framework to address external library coupling and improve the tool to guide the user on where in the application to start the migration were identified as future improvements for the identified limitations during the evaluation process. By looking at the evaluation results, the migration framework and the Ng-React Copilot tool can be considered as good starting materials to get assistance for AngularJS to React application migration and the effectiveness can be further improved by applying the identified future improvements.