Framework to Migrate AngularJS Based Legacy Web Application to React Component Architecture

Abstract

The next-generation component-based front-end frameworks such as React have outperformed AngularJS from both the end-user and developer expectations. The concepts, patterns, and architecture of the old school AngularJS application and the component-based React applications are different, hence the migration is not straightforward. This research defines a clear, cost-effective and efficient migration path from AngularJS applications to React applications. By comparing different approaches, the research provides a framework with a step-by-step guideline for migrating the presentation layer of any AngularJS based legacy application to a component-based React application. A migration assistant tool named Ng-React Copilot was implemented to guide the developer and automate the migration. 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 given codebase. The tool works as a command-line tool as well as an integrated tool with popular IDEs. The framework and the tool were evaluated by applying them to selected small, medium, and enterprise-level AngularJS legacy applications and the results indicate the validity of the research findings.