AngularJS migration — the roadmap

Pascal Maniraho
May 25, 2017 · 4 min read
Image for post
Image for post
Cats love Eloquent JavaScript — photo from Unsplash.com — credits goes to Michael Auer

Intro

If you are responsible of a legacy large scale AngularJS application, and have been thinking ways to migrate to Angular without breaking your boss’s heart, congratulations: We are in same boat!

We’ve got you covered If you are considering to “Migrate from Angular to React”, or want to dive into “React and its application architecture” instead.

Legacy

It is hard to believe AngularJS(aka Angular 1.x) is legacy! It has been a heck of bumpy 6 years ride! With the rise of ES6/ES7, Web Component and renaissance of reactive paradigm, the threat for Angular to survive required a complete re-write. Now you are here managing the chaos, since the core team never planned a soft transition with this rewrite.

Large scale

It is fair to say that a ~20K LoC codebase is large. If your codebase is 5K LoC or less, Big Bang(re-write the whole damn thing) may an option for you(at your own peril). The scenario is different If you have 20K+ LoC codebase in production, with limited time and resources. A soft transition, also known as incremental suits better you needs. Incremental technique is non-obstructive as it fits in daily refactoring process. In process, you will be able to run your daily business as usual.

Scenario

You don’t need to learn TypeScript/Dart or ES6/ES7 to start the migration. Most parts of your codebase dependencies(libraries) may not be ready for migration yet. Moreover, you can write Angular with Good Ole JavaScript. In addition to upgrading to Angular 2, It is time you target multiple platforms(Web/Mobile/Desktop/TV and Things) using the same codebase, thinking in terms of PWA to make all your visitors happy regardless of browser/platform, eliminate scope soup+speedup your Angular 1.x by adding reactive(Rx or Redux) super powers. All of these, continuously shipping latest code with fixed bugs.

The Plan

After you read this plan, you may read following articles in same series on migration to deepen your understanding: Unit Testing for as good migration starting point, Transitioning to component architecture, adopting progressive web application ~ optional but useful to boost performance, using redux/rxjs to nuke $scope soup. Coming up soon in these series: the service layer and the grand leap.

  • Beef up your tests — cover 100% of codebase, soft spots such as forms, functions/models/CSS classes used in templates.
  • Upgrade to latest AngularJS 1.x before Angular 2 (aka 4.x)
  • Upgrade dependencies(underscore, ui-router, etc) to latest versions
  • Move all inline CSS to standalone style sheets
  • Optional: adopt BEM CSS it will help when you start Componentization
  • Name all anonymous functions(Services/Filters/Directives/Events)
  • Decouple Angular constructs in favor of standalone JS functions(more on this to come).
  • Adopt Skinny Controllers, and move heavy lifting into your Services
  • Adopt ControllerAs syntax in your existing Controllers and Directives
  • Transfer DOM manipulation code from Directive Controllers to Linking functions(It is a good practice anyways)
  • Directive Componentization — all directives without Link function
  • Componentization of Controllers
  • Componentization of UI-Router(if used)
  • Update Component data-binding(is a bit different) and inter component data transfer(communication)
  • Replace $scope dependencies with reactive components(redux or rx)
  • Upgrade tooling to support babel(or any ES6/7 transpiler)
  • Rewrite functions, variable and classes per ES6/7 or TypeScript
  • Include Angular 2 (or 4.x) in your codebase
  • Rewrite Components(search+replace), Services(not required) per Angular 4.x specification(Annotations, etc)
  • Rewrite bootstrapping logic
  • Enhance UI-Router(to support Angular 2/4.x)
  • Remove Angular 1.x
  • Hooray! … may be not so fast!

Outro

Gosh, You rock If you read all above goodness! Thank You! Your recommendation motivates me to follow up this post with techniques I use while upgrading Hoo.gy — a platform that makes it possible for you to rent stuff from your friends and neighbours. It is green sharing economy, to curve consumerism and save you thousands in credit card debts ;-)

Simple

Share your stuff to declutter your space and earn money

Pascal Maniraho

Written by

Web lover, code crafter, beer drinker, created http://hoo.gy, Montrealer, and training to run a half-marathon :-)

Simple

Simple

Share your stuff to declutter your space and earn money

Pascal Maniraho

Written by

Web lover, code crafter, beer drinker, created http://hoo.gy, Montrealer, and training to run a half-marathon :-)

Simple

Simple

Share your stuff to declutter your space and earn money

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store