Amid fast-changing markets and a mobile-first world, companies are compelled to focus on delivering a superior customer experience (CX). This involves many aspects, from interface to responsiveness to infrastructure, all of which require organizations to leverage modern technologies. Many companies have looked to AngularJS, but on December 31, 2021, support for AngularJS will only be extended for security flaws, not for breakages associated with browser updates. To maintain their CX leadership, companies must migrate their AngularJS applications to modern web technologies such as ReactJS and Angular 10+, enabling them to take advantage of new features introduced in modern web frameworks.

 

Wipro’s Three-Phase AngularJS Migration Approach

 

Wipro’s AngularJS migration approach involves three phases: Discovery, Design, and Development.

 

In the Discovery phase, Wipro works with organizations to analyze app functionality and usage, identifying alternative ways to achieve the intended result. This analysis is based on new-feature addition, bug fixing, and deployment frequency. It also includes analyzing the source code for compatibility with the AngularJS style guide, dependencies on third-party libraries, the use of custom frameworks, and the feature folder structure.

 

During the Design phase, Wipro and the enterprise determine whether to design a hybrid app or a new app. The hybrid app approach uses AngularJS/Angular code in a single project, identifying accelerators (e.g. ngUpgrade), dependencies, and opportunities to replace third-party libraries. New-app development also uses accelerators such as ngUpgrade or low-code tools, and identifies dependencies on third-party libraries.

 

The Development phase responds to the work completed during Design. Development of a hybrid app encompasses migration preparation, bootstrapping the app, and using ngUpgrade/DowngradeMudule to utilize features between AngularJS and Angular modules. For new-app development, Wipro builds the components and/or services required.

 

Lessons Learned for AngularJS Migration

 

Having used this three-phase approach with many organizations, Wipro has identified several challenges and solutions for companies on their AngularJS migration journey.

 

  1. Reverse-engineering the design and coding patterns used to decouple the AngularJS code into modules is time consuming. However, once done, this helps to define and convert the AngularJS modules to Angular Components as development begins.
  2. Third-party solutions like rich editor or charts (e.g. Velocity.js) require additional attention from the beginning, especially if critical features are based on third-party solutions that may not interact well with Angular/ReactJS.
  3. It is good practice to start the migration with a less-critical chunk to see how it goes and, if necessary, adjust the migration approach accordingly.
  4. Working with styles is different in Angular 2+ compared to AngularJS, because it isolates styles whereas AngularJS does not isolate the styles. This adds complexity to styles migration and requires additional refactoring.
  5. Migrating Bootstrap to latest version 4 is a major rewrite.
  6. Having access to all the necessary API documentation is important to accelerate the migration since it would help to understand API support from the existing functionality perspective.
  7. In addition to the migration, it is important to have a test/demo environment and present the progress, as well as the additional CI/CD setup that takes into account the new-build process.

 

Determining the Best AngularJS Migration Approach

 

Wipro works with companies to identify their long-term vision and consider several variables as they determine whether a hybrid or new-app approach is best. Among those variables, five stand out as primary aspects to consider.

 

  • Frequency of App Updates. Hybrid-app development is best suited for more-frequently updated apps, because migration and new-feature addition can be planned together. New-app development is suitable for apps that are updated less frequently.
  • Compatibility with AngularJS Style Guide and Feature Structure. Companies may wish to pursue hybrid development if the current app’s development is aligned with the AngularJS style guide, and if the current app has well-developed features. If not, a new-app development approach may be preferred, as it will not require changes and will factor-in efforts required for complete app development.
  • Development Effort. In a hybrid approach, the migration happens in phases but eventually results in all features being migrated to Angular. This means the development effort required will be similar to that of new-app development. If there are new features being added during migration, these features will need to be implemented in the old and the new app, increasing development costs for new-app development based on the complexity and size of the new feature.
  • Use of a Custom Framework. In a hybrid-app development, the complexity and cost will increase if any custom-build framework is used that’s based on AngularJS. For new-app development, no change to development effort is required, as this approach will factor-in efforts required for complete app development.
  • Skillsets Required. Hybrid app development requires AngularJS and Angular expertise, whereas new-app development requires ReactJS or Angular expertise (AngularJS is required only if feature additions are required in an older AngularJS project).

 

While companies consider the best approach for them, it can be helpful to have a high-level understanding of the elements for each app type. Three examples are below.

 

Hybrid app

Reference https://angular.io/guide/upgrade

 

 

Angular app

Reference https://angular.io/guide/architecture

 

 

               

ReactJS app

 

As companies rush to meet the fast-changing demands of a customer-centric world, they must quickly migrate their AngularJS applications to modern web technologies. Wipro stands ready to assist on this journey, empowering enterprises to leverage the latest web frameworks to realize their mobile-first vision and achieve tangible business value.

 

To learn more about the importance of AngularJS migration, please read the case study

What you’ve read here? Tip of the iceberg. Are you ready to be part of the excitement?
Get in touch