Best Practices for ExtJS to Angular Migration

Updating to new versions of technology on time ensures business continuity and increases customer experience. The obligation to be proactive and future-ready helps in meeting increasing requirements.

As the technology landscape or process silos perpetrated by existing technologies, or because of the necessity to stay proactive and future-ready to meet emerging requirements. It is always best when a proactive approach to necessitating change takes the lead. 

The same principle goes for ExtJS to Angular migration. It is essential to have a brief overview of the strengths and shortcomings of both frameworks and understand the key factors that make Angular an advanced option. 

• ExtJS has a higher learning curve compared to Angular. 
• In comparison to ExtJS, Angular is more robust and well-equipped to fulfill requirements such as integrated automation testing support, integrated end-to-end test runner, a variety of responsive modules for mobile web apps, etc. 
• The biggest drawback to ExtJS is its footprint and performance. Compared to ExtJS, Angular is at least 3 times lighter and faster. 
• Heavy Licensing Cost
• Un Availability of skilled Resources or Costly Resourcing

So, the key reasons for existing ExtJS-based applications to switch to Angular are easily understandable. But how the ensures complete control of all the “To Be” enhancements and value generation needs some preparatory steps. 

Proactive and Step-by-Step Migration Planning

So now that the reasons for migrating from ExtJS to Angular seem pretty obvious, you need to go deeper into the migration challenges, the ideal approach, key advantages you should aim for from the migration, and a strategy to ensure continuous improvement after the migration is complete. 

Let’s begin by drawing your attention to four preparatory steps to set the trajectory of an entire migration project. 

• Research: Despite having a clear idea about the target benefits delivered by the existing apps, when migrating we need to do fresh research on how the scope of the app for benefiting users can be further extended through the migration. Since with Angular you can ensure speeding up load time, researching the scope of extending user benefits is very essential. 
• Reusability:  Since ExtJS has many inbuilt components, you need to figure out the appropriate Angular  UI library which supports the maximum similar ExtJS UI components out of the box, So that there will be less customization effort. If the application has the functional/Business logic in the code, then figure out a way to reuse the same in Angular.
• Target benefits: Uplifting the overall speed and performance of the app seems to be the primary target benefit of this migration. The rich UI components and libraries within the ExtJS repository that can be switched to open-source or commercial UI counterparts in Angular should be documented along with their specific benefits. The integrated test automation tools and capabilities of Angular can help with continuous development and integration (CI/CD) cycles, resulting in more frequent value generation. 
• Continuous Value Addition: Improving an application with frequent value addition and enhancement is something every project aspires to. But this requires serious planning involving frequent quality checks, performance monitoring, and scope evaluation. An ExtJS to Angular migration project should also make prior planning for this continuous improvement. 

Preparing test cases and identifying bugs in an existing application

The migration exercise should begin by preparing a few test cases and identifying all the bugs in existing ExtJS applications. Some of the key responsibilities of the QA team for this include the following. 

• Identifying and understanding different use case scenarios 
• If there is any available test automation framework, it needs to be evaluated for the different scenarios. 
• As found appropriate, the test automation framework needs to be trained with test case documents. 
• Running a rigorous bug test to detect all the bugs in the existing ExtJS application. 
• Identifying all the UI/UX issues and functional problems faced by the existing ExtJS app. 

Architecture, Design, and Code Research 

To begin with, it is important to carry out thorough research of the architecture, design, and code of the ExtJS app subjected to migration. Some of the key things that need to be understood through the research include the following. 

• The number of App screens and the common patterns visible across them
• Basic UI components of the ExtJS application, such as Fields, Grid, Buttons, etc.
• Reusable Functional Components of the ExtJS application, such as Interactive Grids, API Interceptors, Create /EditForms, etc. These components are the ones with interactive attributes over the basic UI components. 
• How the ExtJS application renders the screens dynamically rendering based on the response received in browser-friendly JSON data format. This is the area for evaluating application performance and smooth rendering capabilities. 
• How fast and smoothly the requests and responses are processed by the ExtJS application? 
• How the session management used to be done with ExtJS and whether the same session management will be repeated post-migration needs to be decided. 
• It is important to decide on the strategy for development and deployment as well. You may choose to opt for separate Dev and QA versions. 
• What existing themes can be supported by Angular and how far these can be customized should be researched as well. 

Building the new Angular app 

Now that you have run the tests, found the bugs, UI/UX issues, and functional bottlenecks, and done a thorough research of the code, architecture, and design of the existing ExtJS application, it is time to analyze a variety of UI components to choose from in the Angular repository. 

There are both open source UI components such as PrimeNg, Angular Material, and Ant and commercial UI components such as KendoUI, DevExtreme, and a few others. Based on the feature and UI requirements, support (community-based or commercial), themes, Angular release syncing, and a few other aspects, you need to choose the right UI component library for the project. 

Designing the new architecture for the Angular app 

Now that you know about the code, UI, and architecture of the ExtJS application and you have a component library ready to build the Angular app on top of reusable ExtJS components, let’s find out some key areas for designing the architecture for the new Angular app. 

• The core UI components of the app are fetched straight from the chosen Angular library. 
• The core UI components were incorporated on top of the components of the third-party UI library to ensure consistent interaction and behavior across the existing ExtJS app.  
• It is important to keep the dynamic rendering capability of the existing ExtJS by utilizing the dynamic component loading feature of Angular. 
• It is also essential to figure out the appropriate theme of the component library chosen to meet the needs or build a custom theme beyond the standard theme package of the component library so that several theme options can be supported. 
• Finally, you need to set up CI/CD for Angular code for developing and deploying the same app across different environments such as Dev, ST, and UAT.  

Some Key Development & Deployment practices to follow

With everything said and done with the above guidelines and principles, there can still be shortcomings and discrepancies in the project when compared to what improvements the migration project wanted to achieve. To make sure that this does not happen when migrating your ExtJS app to Angular, consider the following practices and steps.   

• When you want the existing ExtJS code and the components to deliver the same behavior, it is better to prepare a Low-Level Design (LLD) document that explicitly shows all the class diagrams along with the respective methods as well as relations between classes. 
• Make sure developers, when writing code, follow the LLD document written by the team head. This brings precise direction for the team to achieve consistency between existing and new applications. 
• As for Unit Test automation, make sure you utilize the integrated Angular Testbed with 80% or more code coverage. 
• Carry out Performance Testing only to compare against the performance benchmarks of the existing application and its frequently used functions.
• At last, make sure the application passes through User Acceptance Testing (UAT).

It may seem challenging and time-consuming to migrate from one front-end framework to another, however Phani and Arun can make it simple for you by providing the best practices that have unquestionably been successful. Join this ‘Things to consider while migrating your Ext JS Applications’ webinar on Dec 1st 2022. 

Key takeaways – 

1. Why are users migrating away from Ext JS? 
2. How to plan the migration and measure the success of your migration 
3. Lessons we learned during our journey 
4. Best practice.

Watch here