AngularJS migration — the roadmap

Pascal Maniraho
May 25, 2017 · 4 min read
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!

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

  • 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