Migrating to Angular 2

Over the last few years we have seen Angular becoming the most popular frontend framework. Angular 2 release is expected to ship in few months. Much of the excitement comes from new rendering architecture that splits application and rendering and allows:

  • web apps split across browser’s main process and web workers (better performance)
  • native mobile apps built with Angular 2 with NativeScript
  • server-side rendering (faster startup, SEO)

On top of that, Angular 2 embraces TypeScript, components and new template syntax.

New syntax and semantics

Angular 2 application is a tree of components, similar to Ember and React. Essentially, a component is a controller class (equivalent of ViewModel in MVVM) with a template that represents a UI element. Components are important part of the Angular 1 to Angular 2 migration.

Angular 1 components (directives with controllerAs) are considered to be the best practice since they were introduced in Angular 1.2. However, Angular 1 components and router definitions are much more verbose and lack conventions that make components much easier to write with Angular 2.

migrating-to-angular2-typescript

Angular 2 is written in TypeScript, which is a superset of ES6. Now application’s code is structured using ES6 modules and a new dependency injection that can take advantage of TypeScript types. TypeScript makes your IDE much smarter with type errors and a better auto-completion in code and templates. See 5 min quickstart for Angular 2 code example.

Incremental upgrade

You will be able to run Angular 2 within your Angular 1 application using ng-upgrade. This allows seamless upgrade component by component.  Angular 1.5 release is expected to include a new router and a component helper. It is an important part of the migration process.

Here is a short list of steps to take in order to be closer to Angular 2:

  • upgrade Angular to the latest version
  • organize your code with ES6 modules and classes
  • use Webpack as module bundler
  • replace controllers with directives with controllerAs and bindToController
  • replace $watch calls with with declarative annotations like ng-change or RX.js observables

Conclusion

It is clear that migration to Angular 2 will require some effort, but expected benefits are definitely worth it. We encourage you to take this incremental upgrade approach and start it today.

 

simon – blog

Simon is a lead developer responsible for designing and building application’s architecture from the ground up. As a mentor and a testing advocate, he supports other developers in their efforts to design software applications with code optimization and scalability in mind. He enjoys leading teams and discussing with clients issues concerning technical recommendations and possible adjustments to requirements.