case study

How to Migrate
from AngularJS
to Angular 9+

Case Study

How to Migrate from AngularJS 
to Angular 9+
Question

Outdated technology could stab you in the back when you least expect it.

This was the case of our client whose business growth peaked in the decline of AngularJS. To provide a good level of customer experience, he had to migrate the system to the latest Angular version fast.

About the Client

The client is a global enterprise that provides employee recognition services in 160 countries. Their unique solution, a configurable cloud-based SaaS platform, helps thousands of companies improve the social culture within their organization and strengthen relationships with their employees.

From the beginning of our cooperation, the system had more than 5 million users in total, where user experience and customer support were at the core of the client's business processes. To that end, the migration from clumsy AngularJS became an integral part of the company’s IT strategy.

Why Was it Vital to Migrate from
AngularJS?

The reasons for migration were obvious: the application’s end users wanted new features while the management thrived for innovations.
The system frontend on AngularJS restricted desired improvements and, in addition, accumulated a high technical debt.

It was just one of the numerous arguments for migration from AngularJS, other reasons why companies consider AngularJS to Angular 9 migration are listed in our guide.

In the nutshell, the client found the latest Angular version the best alternative for its legacy system that must meet the following criteria:

Higher performance

Improved security levels

Greater usability

pie

Migrating AngularJS to Angular 9:
Better Architecture and Performance

Language App architecture Development Tooling support Performance Upgrades
JavaScript MVC Less tractable CLI Not enough to fulfill developer requirements Becomes obsolete in 2021
TypeScript Component-based With simplified structure, it’s easier to develop and maintain large applications Wide choice of third-party tools, built in IVY compiler Overall improvements in performance, especially in speed and dependency injection LTS support

The Challenges
We Faced in This Project

Software modernization projects have never been plain and straightforward, especially for large enterprises. The bigger the system, the more unpredictable issues might pop up.

We had four main
challenges:

arrowPrev Next arrow
dots

Migrating AngularJS to Angular Case Study: Best Practices before Starting the Project

A meticulous planning is the best you can do for the modernization project. No jokes! That is what helped our team accomplish a bunch of work on time and deliver all the functionality with no disruption. So, what did we do from the jumpstart?

These hints are just as useful when you need to migrate AngularJS to Angular 11, which is in demand nowadays.
orange

How to Migrate from AngularJS to Angular: Step-by-Step Process

Multi Tenant

Same Application
Seperate Database

Scheme

Map a Multi-tenant SaaS Architecture to the New Conditions

As the app consisted of 3 levels: client sites, admin dashboards, and global admin dashboard, we decided to prioritize migration efforts (app’s logic, components, modules) based on the business requirements. In the first instance, we worked on client sites migrating them incrementally, and then, switched to admin parts.

Whereas the user experience was of utmost importance for the client, our team enabled customers to "skitter" across the old and new versions. Also, the tenants were able to change themes and widgets however they wanted.

Replace Outdated AngularJS Components with Proper Angular Tools

The next big step on the migration journey was to complement technology stack with proper Angular libraries and components.

The thing is the existing AngularJS elements weren’t the right fit for the new app, so in the table below you can see how we’d replaced them:

Legacy component

Angular tool

Priority

Third-party tools: Angular and related

1 AngularJS v.1.7.8 Angular 9 High Priority
2 Angular UI (Bootstrap wrappers) ng-bootstrap High Priority
3 Angulartics Angulartics2 High Priority
4 Angular Gridster angular-gridster High Priority

Third-party tools: Kendo UI and related

5 KendoMultiselect MultiSelectModule MEDIUM PRIORITY
6 KendoWindow WindowModule MEDIUM PRIORITY
7 KendoGrid GridModule MEDIUM PRIORITY
8 KendoToolip TooltipModule MEDIUM PRIORITY

Third-party tools: Other

1 jquery-ui-1.12.0 Skip MEDIUM PRIORITY
1 Jcrop ngx-image-cropper MEDIUM PRIORITY
1 highcharts.js highcharts-angular MEDIUM PRIORITY

ModLogix Suggests

When selecting the right tools to substitute legacy elements in the target system, focus on the business prospects, community support, and resources to introduce new technologies (namely, available expertise in dealing with chosen tools).

Develop Single-Page Application


The legacy AngularJS apps were built using a conventional web development approach. In short, most of the logic was performed on the server and the app did numerous page reloads as the user searched the website.

Upon each user request the website renders all necessary HTML, JavaScript, and CSS code, causing a ripple effect. It slowed down the performance and worsened the user engagement.

Instead, we decided to create a Single Page Application (SPA) that dynamically loads everything in response to user actions with no reloads at all.

Under this approach, we fully isolated ASP.NET MVC backend and API from the frontend part. As far as you remember, it was the principal task to reuse it in the target system.

dots

WHAT WE GAINED:

Boosted performance with asynchronous requests Boosted performance with asynchronous requests
Enhanced user experience due to flexible user interfaces Enhanced user experience due to flexible user interfaces
Facilitated maintenance and support Facilitated maintenance and support

Ready to start your project? Get a consultation!

CONTACT US

When Should You Choose Single-Page Application for the Project

Factor

Traditional Web App

Single Page Application

Required Team Familiarity with JavaScript/TypeScript Minimal Required
Support Browsers without Scripting Supported Not Supported
Minimal Client-Side Application Behavior Well-Suited Overkill
Rich, Complex User Interface Requirements Limited Well-Suited
icon

Set Up Continuous Integration/Continuous Delivery

Continuous Integration/Continuous Delivery (CI/CD) is a well-known practice to confidently build, validate, and deploy any type of app.

We often apply CI/CD in the projects, and this one was no exception. The approach allows performing frequent releases while maintaining and improving the quality of the product.

Since our client was up to date at every development stage and provided invaluable feedback on the go, we launched the system perfectly on time.

The Importance of Automation in the Migration Process

Successful migration should be completed with minimal disruption to daily operations. Automated testing optimizes the development detecting any flaws that might remain unseen. In such a way, the dev team releases the app to production much faster with the highest possible quality. 

Maintain the Legacy and Upgraded
Version Simultaneously

“Users shouldn’t feel the shift”
is something we heard at the beginning of the initial negotiations.

In that view, we decided to create the new Angular app, and support the old version in parallel.

Plus, as we hinted at, system customers were able to tap into the previous version with the flip of a switch.


It’s a superior feature for multi-tenant systems: each tenant can make changes to their product without interrupting others.

dots

Technologies
and Tools We Use

000
001
010
011
100
101
110
SCOPE OF WORK :
1 Software Architect
1 Business Analyst
1 Dev Lead
1 QA Lead
3 Frontend Developers
3 Full-stack Developers
1 Automation QA Engineer
3 Manual QA Engineers
1 Scrum Master
16 Months

Results

5x lesser code length 5x lesser code length

A large amount of data in the cumbersome AngularJS app involved a lot of work, so our team built a new app, fixed bugs, and optimized the source code in parallel, almost 61K lines in total. As the saying goes, “Always leave the campground cleaner than you found it.”

123% higher product performance 123% higher product performance

The migration process was mainly driven by the needs of system users, as they expected new features and smoother experience. With the latest Angular version and cutting-edge tools, we managed to accomplish it successfully. Besides, updated functionality helped the client expand the customer base. Since the migration, the system was replenished with another tenant, a large-scale enterprise.

LTS support LTS support

The client has got the modern Angular 9 framework marked LTS - long-term support. The acquired status allows maintaining the software much easier, which saves the company’s resources in the long run. In future, app migration to the next version won’t involve complete rewriting.

5-6x faster project releases 5-6x faster project releases

Due to improved CI/CD pipeline and the level of granularity, the dev team rapidly applies hotfixes to a site development environment. These changes are easily configured for production

Results

Key Takeaways

If it's possible and fits in the context, isolate the backend from the frontend part during the migration. Our experience so far has shown that moving the entire app altogether could drag out development and raise the costs and complexity dramatically.

CI/CD already seems commonplace in software development, but most organizations underestimate its value. Apply automation throughout the development cycle to speed up the process.

Consult with a qualified legacy software modernization company that’s aware of all the migration pitfalls. Although AngularJS and Angular have the same roots, in fact, they are utterly different frameworks.

Our Team
on This Project

Vlad
Vlad
Dev Lead

IT’S HARDER THAN IT LOOKS

We’ve been collaborating with the client for almost 10 years, and our team knows all system’s ins and outs. Despite that fact, migration turned out to be a quite demanding task. And if I’d had to do it once again, I’d have advised you share the efforts on supporting existing software and upgrading to the new version and have a dedicated team by your side.

quotes

Let’s Start a
Conversation

Share your challenge with us – we want to hear from you

* Please enter your name
* Please leave a message






    elipse
    Whitepaper.doc
    close
    Get Your FREE Template!

    Please, provide the email address so that we can send the whitepaper to you.

    * Please enter your name