The Road to Angular 2.0 part 6: Migration

Intro


I gave a presentation at the GOTO conference in Amsterdam titled: The Road to Angular 2.0. In this presentation, I walked the Road to Angular 2.0 to figure out why Angular 2.0 was so different from 1.x.

This series of blogposts is a follow up to that presentation.

Migration


Last week we discussed the new bindings system in Angular 2.0, and we saw that by using trees Angular 2.0 applications use less memory and are faster than before.

In this final instalment of this series, we are going to look at how we can migrate our Angular 1.x applications to Angular 2.0.



The road to 2.0


How do you migrate an Angular 1.x app to Angular 2.0?
migration-questionmark

The answer you might hope for is running some magical wizard in some fancy IDE that will take care of the process for you. Does such a magical solution exists? The answer, unfortunately, is no. There is no easy way to migrate your applications without doing some work yourself.

Here is a video from the ng-conf showing how you can migrate code from Angular 1.3 to Angular 2.0. It is worth a view and shows the manual work required to upgrade an Angular application.

A tale of two roads


The Angular team states that there are two roads to migrate an Angular 1.x app to 2.0: Big Bang and Incremental.
migration-options


Big Bang


Big Bang is a migration path in which you halt all development on an application, and migrate an entire application to Angular 2.0 in one Big Bang.

The biggest benefit of a Big Bang migration is that it is the fastest way to get to Angular 2.0. This means you can use al the cool new features such as components, TypeScript and the new Template syntax as soon as possible.

Big Bang has a couple of drawbacks: first it might be difficult to convince your manager or product owner to freeze the product you are working on. Performing a Big Bang migration whilst the application is changing underneath your feet is not something I would recommend. So it is imperative that the application is frozen so the target does not move. Trying to sell this to your manager / product owner is going to be difficult.

The second drawback is that the size of your application determines how easy it is to pull a Big Bang off. The larger your application the more time it will take to perform the Big Bang. The more time it takes to perform a Big Bang the more difficult it is to get the application freeze approved.

The third drawback is that when you rely on third party libraries such as: ui-bootstrap or restangular, you will have to wait until they've upgraded to 2.0 as well. This means that you cannot perform a Big Bang until each and every one of your dependencies has upgraded to 2.0. Of course you could work around this problem by dropping a dependency and writing it yourself, but this can be a lot of work, especially if your application has "big" dependencies that do most of the work in your application.

Incremental


Incremental is a migration path in which you update parts of your application with Angular 2.0 code, and keep parts of your code Angular 1.x code. This is possible because you can run Angular 2.0 applications and 1.x applications side by side.

You can do this in two flavors: either you have an Angular 2.0 app which includes Angular 1.x app, or vice versa you have an Angular 1.x app which includes an Angular 2.0 app. This gives us the freedom to mix and match Angular 1.x and 2.0 as we please.

For example: we can migrate everything from controllers to services to Angular 2.0, and keep some select directives Angular 1.3 such as ui-bootstrap. Another example is that we stick to Angular 1.x for our controllers and services, but write al of our new directives with Angular 2.0 components.

The benefit of Incremental is that we have a lot of flexibility in how we migrate our applications to Angular 2.0. Just like the Big Bang migration path Incremental also has some drawbacks.

The first drawback is that you will bundle Angular 1.x with 2.0, this means that the browser will have to download two complete frameworks, and parse two complete frameworks, this will impact the performance of your application negatively.

The second drawback is that having two frameworks, Angular 1.x and 20, with two very different philosophies,  will make  your code will look like a Chimera, a strange hybrid that is stuck between two worlds, not a pretty picture. The only way to fix this is to eventually migrate to Angular 2.0 completely.

Big Bang vs Incremental


The question you might ask so which is better Big Bang or Incremental? The answer is that it depends on the nature of your application and your projects circumstances. Here is a decision matrix:
angular-path-matrix

Basically the matrix states that the smaller your application is the more Big Bang makes sense. This is because the time it takes to perform a Big Bang is directly related to the size of the  application.

Another facet in the decision is how many dependencies the application has. As stated before you can only upgrade to 2.0 completely when all your dependencies have upgraded. However some apps are more dependant on external dependencies than others, if you for example depend heavily on some big external Google Maps directive, it might make sense to wait until that directive has updated, and do an Incremental upgrade instead.

The last facet of the matrix is the time you can "get" to migrate to Angular 2.0. This is really a circumstance which is more political than technical, it depends on management. If you get oceans of time to migrate, Big Bang makes more sense, if there is a focus on new features Incremental makes more sense.

Preparing for 2.0


There are steps you can take to prepare for an migration to Angular 2.0. The closer you can get your 1.x application to the 2.0 philosophy the easier it is to migrate to Angular 2.0.

Stop using $scope


In Angular 2.0 components will no longer have a '$scope', instead the instance of the component's controller will become the scope. To prepare for this change I recommend that you use the "controllerAs" syntax. This way you won't have $scope's that need to be removed when you migrate to 2.0.

Upgrade to 1.4


Upgrading to 1.4.x: the latest stable version of Angular is a good step to take. Upgrading to 1.4 will make it easier to migrate to Angular 1.5, which brings me to my next point.

Upgrade to 1.5 when it is released


The goal of Angular 1.5 is to make migrating from Angular 1.x to 2.0 easier. What the exact nature of these features are is still in flux. One feature that I'm personally rooting for is the "component helper" function. This will make it easier to write directives that mimic Angular 2.0 components. By mimicking Angular 2.0 components Angular 1.5 will be closer to the philosophy of Angular 2.0, being closer to the Angular 2.0 philosophy makes migrating easier.

Start using ES6 today!


Using a transpiler such as Babel you can start writing ES6 today. A transpiler transforms ES6 code to ES5 code, so you application will run in todays browsers.

The biggest benefit of ES6 is that it allows you to write "classes", Angular 2.0 will heavily rely on classes, Components are classes for example. By using classes to define services and directive's controllers you have already done some of the migration work.

The new Component router


Angular 2.0 will have a new built in router called the Component Router this router will, as its name suggests, routes on components, it will instantiate a component based on the current URL.

The nice thing about the Component Router is that the router will be back ported to Angular 1.5. This means you can start using the new router in 1.5 and when you upgrade to Angular 2.0, migrating your routes is already done.

If you use ui-router today instead of ngRoute, you might want to read up on the differences between ui-router and the Component Router.

Note that the Component Router was called the ngNewRouter until a couple of months ago.

A new Hope


At the AngularU conference key Angular core team members gave a keynote in which they announced that Google has some internal tools to make migrating easier. They are in the process of evaluating which tools are useful to release to the Angular community. There isn't much information on these tools so there isn't much more to tell you, but there is some hope that migrating will easier, and more importantly partly automated.

Starting new projects


I've often received the following question: "I'm starting a new project, should I wait for Angular 2.0, or should I start in Angular 1.4?" The answer is to just start using Angular 1.4, and migrate to 2.0 later.

The reason for this is because Angular 1.x is not abandoned , in fact it is quite the opposite. The Angular team has been split into two teams: one team for 2.0 and one team for 1.x. The 1.x team even has a new project lead: Pete Bacon Darwin, so 1.x if far from abandoned. With Angular 1.5's focus on migration from 1.x to 2.0, starting on 1.x and migrating to 2.0 will mean some work, but it will not be the end of the world, and if you follow my advice on preparing for 2.0 you will make migrating easier.

Another reason not to wait for angular 2.0 is because it still doesn't have a release date, in fact there isn't even a beta available yet. Hopefully we will learn more at the AngularConnect conference in London in October, hopefully they will announce something more concrete than: "it is done when it is done".

Conclusion


Now you know the somewhat painful truth that migrating from Angular 1.x to 2.0 is not going to happen by a click of the button. We have seen that the Angular team has put together two migration paths: Big Bang and Incremental. A Big Bang migration get your project to Angular 2.0 as quickly as possible. The Incremental migration allows us ton combine 1.x and 2.0 in the same application, so we can migrate step by step.

We also know that we can prepare for Angular 2.0 by using a transpiler such as Babel to start using ES6 classes in our Angular applications today.  We should also upgrade our applications to the latests Angular 1.x version that is available, because that version is closest to Angular 2.0.

The final takeaway of this blogpost is that Angular 1.x is not going anywhere anytime soon, it is still actively being maintained, and the community is still alive and kicking. So starting a project in Angular 1.x and migrating to 2.0 later is a valid strategy.

I hope you enjoyed this series of blog posts and found them informative. Hopefully Angular 2.0 gets released soon, I think it will be a great leap forwards for us the Angular community.

35 comments:

  1. Today, the Internet has become one of the most important needs of your life. The easiest and most efficient way to connect all our devices to the internet is via Wi-Fi 192.168.1.1 - 192.168.l.l Router Admin Login.

    ReplyDelete
  2. Great post, you have pointed out some fantastic points , I likewise think this s a very wonderful website. 토토커뮤니티

    ReplyDelete
  3. Hello I am so delighted I located your blog, I really located you by mistake, while I was watching on google for something else, Anyways I am here now and could just like to say thank for a tremendous post and a all round entertaining website. Please do keep up the great work. 토토커뮤니티

    ReplyDelete
  4. Good artcile, but it would be better if in future you can share more about this subject. Keep posting. BizOp

    ReplyDelete
  5. Good website! I truly love how it is easy on my eyes it is. I am wondering how I might be notified whenever a new post has been made. I have subscribed to your RSS which may do the trick? Have a great day! 먹튀검증업체

    ReplyDelete
  6. Fantastic blog! Do you have any tips and hints for aspiring writers? I’m planning to start my own website soon but I’m a little lost on everything. Would you propose starting with a free platform like WordPress or go for a paid option? There are so many options out there that I’m completely overwhelmed .. Any suggestions? Many thanks! nursing test bank

    ReplyDelete
  7. Great articles and great layout. Your blog post deserves all of the positive feedback it’s been getting. http://kitchenfaucets.jigsy.com/

    ReplyDelete
  8. Wow, What a Excellent post. I really found this to much informatics. It is what i was searching for.I would like to suggest you that please keep sharing such type of info.Thanks nex777

    ReplyDelete
  9. Good artcile, but it would be better if in future you can share more about this subject. Keep posting. 파워볼사이트

    ReplyDelete
  10. I found Hubwit as a transparent s ite, a social hub which is a conglomerate of Buyers and Sellers who are ready to offer online digital consultancy at decent cost. Tafsir al ahlam

    ReplyDelete
  11. Shipping from China to Us Thanks for taking the time to discuss this, I feel strongly that love and read more on this topic. If possible, such as gain knowledge, would you mind updating your blog with additional information? It is very useful for me. Shipping from China to Usa

    ReplyDelete
  12. I have seen some great stuff here. Worth bookmarking for revisiting. I surprise how much effort you put to create such a great informative website. Your work is truly appreciated around the clock and the globe. 바둑이게임

    ReplyDelete
  13. Yes i am totally agreed with this article and i just want say that this article is very nice and very informative article.I will make sure to be reading your blog more. You made a good point but I can't help but wonder, what about the other side? !!!!!!THANKS!!!!!! 현금바둑이

    ReplyDelete
  14. Thanks for posting this info. I just want to let you know that I just check out your site and I find it very interesting and informative. I can't wait to read lots of your posts. www.seoservicesindelhi.in

    ReplyDelete
  15. i am always looking for some free stuffs over the internet. there are also some companies which gives free samples. abercrombieand-fitch.com

    ReplyDelete
  16. Thanks for picking out the time to discuss this, I feel great about it and love studying more on this topic. It is extremely helpful for me. Thanks for such a valuable help again. 먹튀폴리스

    ReplyDelete
  17. I as shown by an overall perspective need to uncover to you that I am new to weblog and especially favored this blog page. Likely I'm going to bookmark your blog . You thoroughly have staggering stories. Roots for obliging us your blog. https://visualaidscentre.com/

    ReplyDelete
  18. This is monster, offering little appreciation to it might be central so you can take a gander at the going with site: https://www.buyyoutubeviewsindia.in/youtube-marketing/

    ReplyDelete
  19. Superbly written article, if only all bloggers offered the same content as you, the internet would be a far better place.. test bank free download

    ReplyDelete
  20. i read a lot of stuff and i found that the way of writing to clearifing that exactly want to say was very good so i am impressed and ilike to come again in future.. textbook answers

    ReplyDelete
  21. thanks for the tips and information..i really appreciate it.. 먹튀검증

    ReplyDelete
  22. You have a good point here!I totally agree with what you have said!!Thanks for sharing your views...hope more people will read this article!!! 인디벳

    ReplyDelete
  23. Positive site, where did u come up with the information on this posting?I have read a few of the articles on your website now, and I really like your style. Thanks a million and please keep up the effective work. https://sites.google.com/view/buy-twitch-followers/

    ReplyDelete
  24. I really loved reading your blog. It was very well authored and easy to undertand. Unlike additional blogs I have read which are really not tht good. I also found your posts very interesting. In fact after reading, I had to go show it to my friend and he ejoyed it as well! 먹튀검증

    ReplyDelete
  25. This is empowering, by the by it is head for you to visit this specific url: 카지노사이트

    ReplyDelete
  26. What I was thinking about was solved thanks to your writing. I have written on my blog to express my gratitude to you.토토사이트My site is We would be grateful if you visit us.


    ReplyDelete
  27. I am really enjoying the design and layout of your blog. You can read allkenya health surveillance form requirements about visas. Tourists and business travelers who meet e-Visa requirements can usually obtain a visa online within 24 hours.

    ReplyDelete
  28. I definitely enjoy every little bit of it. It is a good website and has good stock. I want to thank you. Guide for India 30 days tourist visa, you can read all info related to 30 day tourist visa via India evisa website.

    ReplyDelete
  29. Wow, that's what I was looking for, what stuff! Present here on this website, thanks to the admin of this website.. Turkish visa is an electronic travel authorization which is a 100% online Turkish e visa process, which takes hardly 3-5 minutes to fill out an online application.

    ReplyDelete
  30. Our best wishes to you in all your blogging endeavors. Travelers can get information about tourist visa India US citizen directly for e-visas online. The Indian government developed an online application so visa applications could be submitted for fast and convenient processing.

    ReplyDelete
  31. This is a really authentic and informative blog. Share more posts like this.
    Types of Bots in Automation Anywhere
    Automation Anywhere Bots

    ReplyDelete
  32. Thanks for this blog, keep sharing your thoughts like this...
    What is MERN Stack
    How Does MERN Stack Work

    ReplyDelete
  33. Such a very informative article… Thanks for sharing...keep it up... A US passport holder is eligible for an emergency visa to India from USA in some rare and unforeseen situation. In the process of an emergency visa, you can get a visa as soon as possible.

    ReplyDelete