What it takes to migrate from AngularJS to ReactJS based customization in Active Workspace?

This blog throw light on some of the major aspects about migrating AngularJS based customization to React!!!

The Angular team recently announced the end of long-term support for AngularJS. Long term support (LTS) was originally planned for July of 2021, but was delayed to December 31, 2021, because of COVID-19.

Considering its advantages like Simplified Scripting, Component-based architecture, Performant (Faster rendering) and with its easy learning curve (easy to use and learn), ReactJS is widely used by developers to develop complex web applications and Active Workspace was no longer an exception for this.

This transition of AngularJS to ReactJS happened in subsequent releases of Active Workspace and from Active Workspace 6.2 onwards, AngularJS was completely replaced by ReactJS.

Customers have rapidly started using Active Workspace and are migrating from Teamcenter Rich Application Client (RAC) to Active Workspace. In this transition, as part of business process mapping, various use-cases were customized in Active Workspace and the result is, a heavily customized Active Workspace Client.

Since majority of customers are using older Active Workspace releases, the customization was done with respect to then AngularJS technology stack and now with the next releases of Active workspace client, one of the biggest challenges is to migrate a code from AngularJS technology stack to ReactJS based technology stack.

Key Challenges

1.???? Impact Assessment

2.???? Define Migration Strategy

3.???? Understanding and Scoping use-cases.

4.???? Mapping AngularJS coding constructs to the ones in React.

5.???? Well versed resources with needed technical expertise.

6.???? Minimal rework with reduced total cost of ownership.

Active Workspace from Angular to React

Active workspace client is evolving with subsequent releases and with the latest ReactJS based technology stack, customers are trying to migrate their older customization to newer ReactJS based customization.

One should consider below factors while migrating AngularJS based Active Workspace client code to ReactJS. This would help them to assess impact and estimate efforts for completing migration process.

• Use case identification.
• Prioritization
• Use of more & more OOTB functionality (De-customization)
• Time and Resources

Below list gives a walkthrough on all those technical aspects that development team must consider while migrating Active Workspace Customization from Angular to React

Although above points give a broader view on various aspects of migrating AngularJS based code to ReactJS, the core part resides in below three aspects.

• Removing AngularJS Specific codeo?? E.g., Removing AngularJS dollar services like $scope, $watch etc.
• Atomic Datao?? Modify the component-level state on the view model.
• Converting AngularJS directives to ReactJS Componentso?? Creating ReactJS Components using Declarative, JSX etc.

Component

Building block of React that defines a new, reusable, UI Element that can be used in views.

Components are defined by:

• A view model
• A view
• Optionally, one or more services providing a code-full implementation of some of the actions referenced in the view model

?Business Use-Case

This use-case deals with the workflow feature in Teamcenter. Customer was looking for a UI enhancement to know the time remained to complete some of the critical tasks of their various workflow processes.

Considering this as a UI enhancement, new UI element was developed to show time remained for completion of current task. This development was done in Active Workspace 6.0 using AngularJS based technology stack. With our proven migration strategy, this development was migrated to latest release of AW 6.2 using React based technology stack.

Summary

Migrating can be a rather a cumbersome task that takes a lot of effort, time, planning, and development to ensure it goes smoothly without compromising maintenance and development speed. It is important to consider the pros and cons before migrating.

While there are many benefits of converting, it isn’t always possible because most companies don’t have the time or resources to commit this change. But still with correct migration strategy and resources, this is achievable.

Are you looking for faster migration of Active Workspace AngularJS to ReactJS based customization?

Feel free to reach me on +91- 735086857 / [email protected]

With Regards

Akshay Kothe

Active Workspace Customization Specialist