AngularJS has become the most popular Javascript framework for web application programming. Launched in 2012, it has already gained in maturity and performance thanks to several evolutions. Today, AngularJS 2 has nothing in common with its first version. That’s why Google decided to make breaking changes to reform and redesign its framework.
Angular is heading for FRP (Functional Reactive Programming)
What is FRP?
The idea behind FRP is to have a reactive application. Technically, it means programming with asynchronous data streams. It’s also programming in a functional way, by using pure functions, avoiding side effects, which remains one of the biggest issues in web application today.
Heading towards FRP, Angular 2 relies on RxJS library. It allows users to manipulate observable data streams thanks to a toolbox full of functional operators. This library leans on the Observer pattern. Its goal is to build a dependence between an observer and an observable, in order to notify the observer each time the observable is modified, so it can update its state.
Angular 2.0 uses TypeScript
TypeScript is a programming language representing a Javascript superset, respecting Esmascript 6 norms. As Angular 2 has a component-based architecture, it is now possible to use classes to isolate the business logic related to a component of our application.
Angular 2.0 has its own CLI
AngularJS 2 uses decorator patterns, strong typing (thanks to TypeScript) and ES6 norms. However, the setup, configuration and maintenance prices for a modern Javascript application using these different tools is high. AngularJS developed its own CLI to overcome this drawback.
In the first Angular version, the change detection process is called dirty-checking. It works with the digest cycle. During each digest cycle, Angular assesses all the recorded watches. If the value sent back by the watch has changed, the match function goes off. The aim is to ensure a consistency in the synchronisation between model and view. However, there was no guarantee to have a parent node checked before its child.
With Angular 2, the mechanism is simplified. A change does not spread in a unidirectional way, from the root. In other words, during a modification on the model, the parent component is always checked before its children.
How to migrate from Angular 1.x to Angular 2?
For a weighty application, a total migration is not possible. In that case, you should use ng-upgrade. The idea is that Angular 2 and Angular 1 coexist in the same application. Thanks to this approach, it is possible to upgrade components from Angular 1.x to Angular 2, but also to downgrade components from Angular 2 to make them work with Angular 1.x. Thus, you can progressively migrate. The perfect applicants to start a migration to Angular 2 are services with no dependencies. Then you can tackle leaf components, before converting root components.