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.
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 quickstar 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.
