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!
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.
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.
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!
- When to refactor
- How often should you refactor? refactor early, refactor often!
- The Road to Angular 2.0 part 6: Migration
- ngMigrate cheat sheet to migrate to Angular
- Refactoring Angular Apps to Component Style
- How I’ve Improved My Angular Apps by Banning ng-controller
- “Fat model, skinny controller” is a load of rubbish
- Angular 2 Core
- Why “Progressive Web Apps vs. native” is the wrong question to ask
- Code Reuse in Angular 2 Native Mobile Apps with NativeScript
- Building Mobile Apps with Angular 2 and NativeScript
- Some really large codebases
- Crazy Small Angular 2 Tutorial for everything you need right now
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 ;-)