Importance of zone.js and rxjs in angular2

Question

I am new to angular2. While going through, I come across with zone.js and rxjs. Are they both serve for async tasks, or each one have specific function? Can anyone guide me why exactly zone.js and rxjs are been used in angular2 application?

Answer 1

Zone.js is a kind of wrapper around the whole Angular2 application that patches (allmost) all async APIs of the browser. Angular2 invokes automatic change detection every time execution of an event handler has been completed, and the use of zone.js allows Angular2 to get notified when that happened.

RxJS is a way of handling single or a series of events from an async APIs in your code. See also Angular - Promise vs Observable

Answer 2

Zone.js(Shared execution context-State Preservation) and RXJS-Reactive extensions for js are mechanisms to have more smarter web controls on your web page to maintain state and enhance the quality of your interactions respectively.

Example for ZoneJS - How does google know its you when you're logged into gmail, that the search is originating from your account - state sharing across google apps.

Example for rxjs - Google Search's auto suggest feature seems to list progressively your desired search string, based on all the interactions you've had with it by far.

Please note that these are only vague examples and there is a unimaginable ton of algorithms and machine learning involved in each of these examples, nonetheless they abstract these ideas very well in action.