Home / Case Studies / Migration from AngularJS to Angular 11

case study

Migration from AngularJS to
Angular 11

Examples of widespread AngularJS limitations and issues include low performance, inflexible architecture and maintenance that is way too expensive. The conjunction of these problems makes migration a necessity for many of our clients.

How to identify the early signs that your AngularJS app requires an upgrade?

Low performance, inflexible architecture and way too expensive maintenance are widespread issues reflecting AngularJS limitations. The conjunction of these factors torn the migration into necessity for loads of our clients.

About the Client

A premium provider of IT and financial services in the healthcare industry was one of the first of our clients to choose migration. For over a decade, they’ve been consulting skilled nursing homes, inpatient rehab facilities and associated management companies all over the US. Being in this highly competitive industry gave them no choice but to update their tech stack.

The extensive platform, which has a multiple module structure, had developed bottlenecks long before the migration. So, their management team decided to partner with us, a legacy software modernization company that has a solid expertise in Angular and AngularJS. (And yes, we address these frameworks separately! Why? Keep on reading!)

The Business
Case for
Migration

Before you embark on any migration project, there must be a business drive. You must clearly understand why there is a need for this migration because it is not a simple feat. Do you need better security, easier off-line access, or just a better design? There is a lot of work and planning that goes into a migration project, and it will not look any different to users unless you redesign your interface in addition to migrating.

Our client experienced severe tech limitations, which unfortunately affected their business processes. The issues specifically were that AngularJS couldn’t handle fundamental tasks such as:

Integration with third-party tools inherited in .NET Framework;
Providing reliable and consistent software performance;
Creating system extensions with new features.

To preserve and raise the value of the solution for customers and end-users, they decided to continue with the migration to Angular.

AngularJS vs Angular:
Key Differences and Aspects

	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

Good to Know

More than 41% of developers use a version of Angular or AngularJS for web and mobile frontend development.

Stack Overflow survey

The Challenges We Faced in
This Project

Migrating from AngularJS to Angular often turns into rewriting an entire app from scratch. This means that more resources are used, more time is spent and there potentially more risks involved.

WE HAD FOUR
MAIN CHALLENGES

Dealing with a complex functionality and architecture

The architectural patterns in AngularJS and Angular are completely different. So, our team had to align the business logic of the existing solution with the target system. Add the enormous scope of the project and a lot of dependencies and the complexity of migration tripled right from the start.

Working under a strict deadline

Since the business niche is highly competitive, management didn’t want any delays or downtimes. The aggressive timeline encouraged us to accomplish work quickly and effectively. However, having to complete this much work in a short span of time cost our team a lot of money in overtime work.

Selecting proper
substitutes for legacy AngularJS tools

As we mentioned before, the outdated elements of AngularJS weakened the system. In the new Angular platform, we carefully chose libraries to facilitate further maintenance.

Managing the resistance
to the new designs
by users

The new system provides ample opportunities for users, but it also involved some changes in the decision-making processes and the work routine as well. Not all of the users were satisfied with the new appearance of the system, so we had to come up with a strategy to increase user acceptance.

Prev Next

Importance of
Planning and Risk Management During
the Migration Process

Modernization projects are no different from ordinary software development practices when it comes to planning and risk management.

First, we analyzed the current solution, listed the needed changes, prioritized tasks, and broke the project down into milestones. Next, we moved on to AngularJS, which has some quirks to consider during the planning stage. AngularJS issues include, but are not limited to: poor documentation, tangled structure, and large codebase.

Since we had to rewrite the system from scratch, we know this process is quite risky, with problems such as unpredictable external issues potentially arising. In this project, the users seriously impacted the migration process, so in addition to making a risk management plan, we also involved a business analyst who handled user demands.

Tips for Choosing the Right Approach

AngularJS systems are oftentimes filled with thousands of interconnections which complicate an upgrade when using automation tools.

As you know, the tech community recommends using ngUpgrade or Angular Elements package for easy and seamless migration. In reality, approximately half of solutions, especially large enterprise systems, must be rewritten from scratch for the sake of the business.

Upgrading the Backend from .NET
Framework to .NET Core

Frontend and backend are components that are interrelated parts of the whole system, that’s why we upgrade them simultaneously. In this project, the legacy .NET Framework caused compatibility issues and wasn’t a good match for the brand-new Angular frontend, so our team chose to use .NET Core instead.

.NET Core technology has convenient features to build multi-client projects. The ASP.NET team designed Angular templates that work perfectly with .NET Core as the backend. With these templates, it was easier to build and publish the application even on a large scale and as a result cut operational expenses significantly.

During this stage, we assembled Angular components (including substitutes for AngularJS elements), mapped out a basic architecture, and framed the configurations for the Angular side.

How to Convert .NET Framework to .NET Core: Steps and Key Points You Should Know

The fullest guide on upgrading your .NET Framework app to .NET Core or .NET 6.

Learn more

All articles

Blog Posts

Rewriting Modules Piece
by Piece using Angular 11

Whereas the system had 10 large independent modules with more than 35K daily users each, we applied a hybrid approach to the migration.
It means completely rewriting the app from module to module while supporting the current app. This decision made the upgrade less painful for the customers that were already at the maelstrom of other drastic changes - the new system design.

Redesign of the Large-scale Enterprise System

When redesigning the system, we prioritize the following 3 goals: refresh the UI/UX, get rid of all outdated elements, and preserve behavioral patterns. The system redesign process involves the following steps:

000

Analyze

Analyze the current system, business logic, documentation, and dependencies

001

Interview

Interview the users to point out bottlenecks in the system and define the user persona

010

Create

Create wireframes based on the users’ feedback, improve UX and set up the design system (use a main page as a starting point)

011

usability testing

Conduct usability testing and handle objections

Redesign Process

When we showed the updated interface to users, the new appearance was not an immediate success. We thought that too many changes at once could confuse some users, so that is why we implemented a participative strategy to encourage system use and increase familiarity with the new design. We incorporated user participation into the design process and established user support services.

When is it the Right Time to Redesign an Enterprise System?

Outdated, and borderline obsolete, technology causes obvious problems for business, whereas outdated design is often overlooked and ignored. Most organizations cannot find the time to redesign their software. According to one of our leading experts, you should pay close attention to user behavior, functionality strengths and weaknesses, and the tech debt in the existing solution to determine whether to update your system now or later.

Ready to start your project? Get a consultation!

Technologies
and Tools We Use

000

001

010

011

100

101

110

1000

SCOPE OF WORK :

1 Dev Lead

1 ui/ux designer

3 full-stack developers

2 manual qa engineers

2 front-end developers

1 business analyst

Results

This project is ongoing and involves additional work and upkeep. However, our client is already satisfied with the new functionality and daily users are pleased with the better user experience. As an intermediate result we delivered:

More concise and efficient code that is now 6x shorter.

Our dedicated team refactored 65K lines of AngularJS source code with thousands of functions and classes. It was substantial work that was vital for the software's maintainability. The client received the quality product, complete documentation, and streamlined software structure. Now, any issue is resolved much faster with less efforts.

Higher ROI and performance due to
on-time system
redesign

The old system had a lack of practical choices and poor information architecture, that’s why investments in usability paid off immediately. The proper hierarchy increased business productivity as users improved their behavior patterns. And our client successfully marketed the modernized product as well, which helped in acquiring new users.

Long Term Support

Angular 11 is now stable and will get some bug fixes but not major updates. Our client’s business workflow will not be disrupted because of unexpected flaws. This also cuts operational costs.

Results

Key Takeaways

Migration from AngularJS to Angular is a highly complex process. If you plan undergo such drastic changes, get the consultation from experienced legacy software modernization company. It will save your organization’s resources and speed up the whole process.

Pay attention to the users of the system and redesign the app if needed. During the upgrade, the new frontend will have some UX modifications. So, it’s better to entrust the changes to professionals that will boost productivity with an improved workflow.

Don’t be scared to rewrite the system from scratch. In some cases, it’s impossible to migrate an old solution with automatic migration tools and preserve its value and functionality. Don’t worry, if rewriting is carefully planned and done right, the new solution will fit the budget, meet deadlines, and maximize the ROI.

Our Team
on This Project

Serge

Business Analyst

Even small changes can make a big difference

The transformation of an already established business takes great courage. I’m pleased that our team solved the issues, rebuilt the system, and got the job done right despite any challenges.