Migrate to Angular: 4 reasons why and 2 simple ways to do it

AngularJS Front-end development Technology Tips & Tools

Migrate to Angular: 4 reasons why and 2 simple ways to do it

Taking the leap to go from AngularJS to Angular

 

The hottest topic during the NG-Conf 2017 was the migration of applications from AngularJS to Angular (AKA: Angular 2 and beyond). The event that took place in Salt Lake City, Utah, was a great experience to stay up-to-date with the latest Angular trends and news.

As you may know, the 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.

Should I migrate to Angular? 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?


You can find the answers of these questions and more in our free eBook “Should you migrate to Angular?”. We encourage you to read it and get to know our experience and tips about migrating to Angular.

Read our Angular Migration Case Study


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.

 

Angular 1 vs 2: why do people hesitate to migrate?

We asked Stephen Fluin, Google Developer Advocate for Angular, what are the top three 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.

 

angular 1 vs 2

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 to the AOT. With the “Ahead-Of-Time Compilation”, the application is compiled prior to being sent to the browser by the angular compiler. As a result, it’s easier to download the code. Besides, the browser can execute it faster due to that reduced compilation time.

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 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 faster to download. 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.

 

#3 Execute better with components

Moreover, 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. “Moreover, 3rd party tools you rely on are thinking about moving away from AngularJS and towards Angular,” he says.

 

#4 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 to Angular: 

 

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.

Angular 1 vs 2

 

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, so 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 which could affect time of delivery and break existing functionalities, if they are 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 and we like to say our software development projects have evolved along with the technology! Get to know more about our experience as an app maker company in our Nearshore Staffing page.

 


If you are interested in reading Angular tips, you may be interested in this content about using Redux in Angular apps!


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.

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

 

Read our Angular Migration Case Study

 

 

 

Share on FacebookGoogle+Tweet about this on TwitterShare on LinkedIn
Bruno Hartmann

Bruno Hartmann

Software engineer with +4 years of experience, focused in web development. Bruno has worked with Agile methodologies for almost 3 years. Eager to learn new technologies and being up-to-date with the latest trends in the software community.

Thanks for signing up!

Stay Connected

Receive great content about building successful products!