Migrate to Angular: why and how you should do it

Are you thinking about migrating your AngularJS to more recent or latest (as the best option) version of Angular (AKA: Angular 2 and beyond)? The increasing number of features, performance, and speed of the latest Angular version increases the constant desire of updating your app to take all the advantages of a serious and robust framework with more than 3 years as Angular. As you probably don’t know (or hopefully yes), AngularJS entered a 3-year Long Term Support on July 1, 2018. This means less than 2 years until it’ll be considered deprecated. So the time to migrate is now!

New versions of Angular came with several groundbreaking changes regarding Angular 1.x, making migration a huge deal. While its learning curve isn’t that high, its stark changes from the earlier versions could be somewhat hard to swallow. The upgrade stirred up a lot of fear and questions within the community. We got to the point of many not knowing if they should really upgrade their applications or just start all over from scratch.

Is it the right time to upgrade? Is it even possible? Will it require a ton of work? Will the business accept these changes? Should I hire new developers?

---

---

There are some concerns among the community regarding the migration. However, we can assure you that the advantages far outweigh the challenges! Keep reading to find out why.

Why do people hesitate to migrate?

Stephen Fluin, Google Developer Advocate for Angular, says that there are three main reasons why companies currently avoid migration:

Fear of the unknown

Companies who haven’t done the migration before don’t know what sorts of challenges they will run into. Often times companies attempt to address old pains and new requirements at the same time as upgrading a codebase, and these additional factors can put a major project like this at risk.

Fear of your existing code

Many companies who have large codebases written in AngularJS haven’t had as strict policies about code control as they might like. Many companies haven’t been following a standardized architecture or best practices. They understand that as part of the migration process, they may have to fix the problems that already exist in their code.

Fear of change 

Each technology within a company builds up its own momentum of shared understanding, tooling, and a ‘happy path’ is typically worn and distributed socially within a company. Changing technologies means that some of the best practices and shared understandings have to be rebuilt. Angular has attempted to mitigate this by leveraging the same core principles and philosophies as AngularJS.

In this post, we are going to explain why you should be upgrading. Also, we will share some of the best ways to migrate to Angular. Here you will find the experiences of UruIT, the Angular team (represented by Stephen), and the overall Angular community.

Reasons why you should migrate to Angular

#1 Perform like never before

The migration’s main advantage is its boost in performance, since Angular is 5 times faster than Angular JS. As Stephen says, you can begin server-rendering your application. “You are looking for better runtime performance.”

During the release candidate period it was noted that numerous developers reduced their final bundles’ size after migrating to the latest version. To accomplish this, the Angular team made some changes in the AOT (“Ahead-Of-Time Compilation”), which resulted in applications compiled prior to being sent to the browser by the angular compiler. As a result and because of the reduced compilation time, it’s easier for the browser to download the code and execute it much faster.

Also, some specific packages (i.e. animations) were separated from the Angular core package. Therefore, the app is lighter in size and faster to run. Likewise, this brings security benefits. The application is less prone to injection attacks, as AOT compiles HTML templates into JavaScript files, removing those templates from the final bundle.

#2 Get advantages from new features

Angular CLI gives you the ability to create everything you need on your Angular app with just a simple command on your terminal. Something as simple as ng generate component users will create a complete component with the basic boilerplate and files to start working on your component: template, styles, test and typescript file. Not only components, you can create modules, services, pipes, even a new Angular project that will prevent you from the tedious work of creating all the basic configuration. You can also create your own custom schematics in case you need to.

Differential loading is also a new feature, in which Angular allows you to create two different builds: one for ES5 and another one for ES6. Depending on how up to date is the browser you use to navigate your app, it will load one of the builds so it can take advantage of state of the art JavaScript (ES6) or the polyfills and compilation required to make your app work as expected (ES5). This will improve build sizes by splitting functionalities according to what each bundle needs.

Innovative features

Also, there are two features that even though they’re considered experimental right now, will have full support on version 9, Bazel and Ivy. Bazel allows us to divide our project into different build units, which can be as granular as a NgModule. This means that if there’s a change that concerns only one module, this one should be rebuilt while keeping the rest of the app intact. 

Finally, Angular Ivy is the 3rd version of the angular renderer, and will bring features like smaller bundles, faster compilation times and dynamic load of components and modules. We will also have the opportunity to implement concepts as High Order Components, which is a common concept in other frameworks and libraries as React. a HOC is a function which receives a component as a parameter and returns a new instance of the component with the changes and modifications needed. 

There are other features that you can take advantage of using Angular 2+. Some of them are Inputs and Outputs on template, dependency injection and content projection, and of course all the new features provided by the newer versions of Typescript.

 #3 Go Mobile with Angular

Another plus is its mobile-driven approach. Unlike version 1.x, latest versions were designed to create native mobile apps by using strategies from other mobile-oriented frameworks such as Nativescript, Ionic Framework or React Native. For example, lazy loading makes Angular compile different modules when they are actually needed instead of compiling all the application at once. It makes the resulting code lighter and the initial load time will be much faster. Moreover, the framework’s improvement in performance will make the mobile application way smoother than it could have been if it had been developed by AngularJS.

 #4 Execute better with components and modules

The general structure of Angular applications (component-based) makes it easier to understand than 1.x versions. This new approach makes developers focus on building classes, called components, which replace the “Views” and “Controllers” that defined Directives from earlier versions. This helps testability and maintainability as concerns are clearly separated and tests are easier to write.

Along with these changes, the fact that the framework is written in Typescript (a typed superset of JavaScript) helps reduce runtime errors as mistakes can be found before transpiling. This may also help developers experienced in OOP (i.e. C#) learn the framework faster as the syntax and approach is similar to that kind of language. Stephen guarantees that by migrating, you can also take advantage of powerful new capabilities. Some of them are ES2016 syntax, Code Splitting and PWAs.

Modules allow you to separate your code in different units according to what each one should do, making it easier to you to understand where something is located and also where a new component should be. You can create a module for login, another for user settings, another one for shared components that you will use throughout your entire app and each one of those will only import the libraries and components needed for this unit to work. This in use with lazy loading will create smaller chunks of code so that when you navigate to a specific route only this chunk will be loaded by the browser, making your load times faster by only showing what the user needs at that exact moment.

#5 Migrate smoothly

Finally, another central benefit is the fact that both frameworks could live in the same application. Therefore, it can help developers to upgrade it gradually. Also, it allows third-party libraries used in AngularJS to continue working after migrating.

So, for the time being, the time to upgrade is now.

These benefits will keep your users thrilled with your apps as a result of them working more smoothly and faster. Moreover, being up-to-date with the latest technology trends will inspire developers to become more motivated and skilled. That’s how Stephen summarizes why your team will definitely be up for migrating:

When should I migrate to Angular?

There is no exact time to migrate. Actually, it will depend on how the product is built or how it is in the process of being built. Best practices make it easier to rewrite code in the new framework. If you don’t follow them, migrating an existing application could be an arduous task to complete. However, if you were developing an AngularJS application taking into account a future migration, then the upgrade is possible whenever the team and business feel confident in doing so.

How can I manage the Angular migration?

The most common ways to upgrade applications are vertical and horizontal slicing, each with its own pros and cons.

Vertical Slicing

Firstly, the Vertical Slicing strategy consists of upgrading the application module by module. It means both frameworks coexist, but in different parts of the application, so each “feature” will have to deal only with “one Angular” at a time. Thus, the way to implement this is to choose one top-level component and start upgrading its child components until the whole module is in the latest version.

As the migration is encapsulated within features/routes, it results in better maintainability, testing and debugging of the application. Also, there’s an increase in performance of the updated Angular modules. This approach suits large applications maintained by different teams. That’s because each team can focus on upgrading its own modules without affecting the rest of the application. However, keep in mind it could result in code duplication for some time. Therefore, you may need older versions of some components to keep some dependencies from breaking.

Horizontal Slicing

On the other hand, the Horizontal Slicing approach consists of migrating from the bottom level working your way up to the top of the application. The positive aspects of this strategy are that it’s easy to start with and you can avoid code duplication. However, the application becomes hard to debug and understand as both frameworks coexist in the same modules. As it’s not encapsulated, it makes it difficult to coordinate between different teams. Because if one changes a single component, it may affect the rest of the application. So, this approach works better for smaller apps and teams. Also, both frameworks are loaded for every module, affecting performance. Unfortunately, is not possible to take advantage of all the benefits that each framework brings.

To sum up

Needless to say, both approaches have the same risks as refactoring. So this could affect time of delivery and break existing functionalities, if not done correctly.

However, there is so much to gain in updating an Angular application that there should be no doubt about whether you should upgrade or not, but rather about when and how. Based on our experience, these strategies cover most of the cases and should offer a comfortable and safe migration, without any considerable effort besides learning and taking into account Angular’s best practices. We have been working with Angular for quite some time now. Therefore, we like to say our software development projects have evolved along with the technology!

Back to Angular

There is plenty of material shared in the NG-Conf YouTube channel regarding why we should use the new versions of the framework and the improvements that will be made to the applications! Moreover, I especially recommend this talk by Victor Savkin called Upgrading Enterprise Angular Applications, upon which I based the idea of this post. Angular also has an upgrade guide that will explain it in a more technical way.

You can also get more insights from the eBook we shared at the beginning of this post. If you haven’t downloaded it yet, do it now! Read the full article about how we facilitated one of our nearshore outsourcing partners’ migration from AngularJS to Angular.

In addition, if you are planning to update your app between different versions of Angular (5 to 6, for example) the Angular guys have released a guided site where you can select from and to which versions you want to upgrade, the complexity of your app and a few other choices. It then gives you a step by step guide in order to update your app in a smoother and correct way without breaking anything.

Post updated on August 9th, 2019, by the software developer Miguel López.

---

About us

UruIT works with US companies, from startups to Fortune 500 enterprises, as nearshore partner for project definition, application design, and technical development. Our Uruguay and Colombia-based teams have worked on over 150 design and development projects up to date.

Are you ready to make the leap in your software development project? Tell us about your project and let’s talk.