I am wondering if any of you could explain the dependencies that Angular2 is using. So far I found out that angular2 always uses the following:
RxJs
Angular2 Polyfills
ZoneJS
Could you explain me in simple words what each one of them is responsible for, and why do we need those?
Thanks
Rxjs provides an implementation of Reactive Programming concepts. Angular2 is based on it for custom events in components (EventEmitter class that extends the Subject one) and within its HTTP support (methods like get, post, ...).
The angular2-polyfills.js file of Angular2 contains ZoneJS and Reflect-metadata. ZoneJS is a tool to trigger Angular2 change detection (see this question for more details: What is the Angular2 equivalent to an AngularJS $watch?). Reflect-metadata is to set metadata on classes. It's used by Angular2 decorators to define metadata according to their parameters. For example, the configuration of a component (selector, template, ...).
You can also use polyfills to complete a partial support of an API (like ES6 for example).
Another important tool is SystemJS, the library that manages modules. In short when you use import and export in TypeScript the corresponding compiled code relies on it.
You could also see this question:
addEventListener, setTimeout(), ...) are patched so that Angular gets notified when they are called. This is when Angular runs its change detection.
RxJS (Reactive Extensions for JavaScript) is a library for Observable. Observable are a new addition that resemble the Promises you already know from Angular 1, except they can be called multiple times.
Basically RxJs is a library used in angular2 for request/response i.e at the time of HTTP requests, when to handle the observable
with the RxJs operators like .map() and .subscribe() to handle the response of HTTP requests.
Zones are an idea borrowed from Dart that Angular 2 uses to efficiently know when to update the view. Basically the whole change Detection of angular2 is Done by ZoneJs, i.e when to update view, changes made Etc.
I don't know much about polyfills but yes polyfills is used for checking browser compatibility with the code, i.e checking which code is being executed on particular browser.
See Also this tutorial for the dependency list of angular2
Introduces observables. It provides an event stream abstraction with the ability to subscribe to and handle events. If an observable emits a value or object literal, you can do thing like:
{{ data | async }}
Where data is defined in the component as:
data = Rx.Observable.create(...);
The http service returns an observable, so you can also do something similar:
data = http.get(...);
Collectively, this is called reactive programming, to shift focus on the paradigm - it's thinking and programming in a different way using a higher level event stream abstraction. Instead of thinking "how do I emit and subscribe to an event?" which is a perfectly valid question for any event programming model, you start to ask "What kind of event stream do I want? How do I combine these event streams or manipulate them with stream operators to get the behavior that I want? Do I want a real-time stream (like a live video feed) or do I want a playable stream (like a pre-recorded movie)?
Once you have an event stream setup (called an observable) with the behavior that you want, you can then setup subscribers to handle the events.
To illustrate the concept, its kind of like this (pseudocode):
var stream = new ObservableEventStream('left mouse click')
.skipFirst(3) // skip the first 3 clicks
.keepLatest() // only output the latest event
.combineWith(new ObservableEventStream('right mouse click')) // combine with right clicks
.throttle(300); // throttle the events so that the speed is 1 event per 300 ms
// now that you have the stream, setup subscribers to handle the event
stream.subscribe(event=> { DoSomethingWithClick(event); });
This is obviously pseudo code but you get the general idea. In reality, the syntax is different.
If you understand the basic concept, the real thing should be easy. Check out this tutorial for real examples.
Zones are used by the Angular2 library to monkey patch browser API calls and events handlers so that Angular2 knows when to trigger change detection automatically. This is also the reason you can use other third party libraries with angular2 and everything magically works.
To get an idea about how it monkey patches things try doing an alert(timeout) and you'll see what I mean.
In angular 1 you had to call $scope.$apply to manually trigger a digest when some asynchronous event happened outside of the angular world. With zones, this happens automatically in Angular 2 because of monkey patching.
ES6 introduces a lot of language features to JavaScript. Browsers today try to be ES6 compliant, but the reality is, they all fall short - some more than others. Chrome is one of the most compliant, IE is one of the worst. A shim makes up for these short-comings so that all the language features are available. In other words, with an es6-shim, you can write your angular app using ES6 features and not have to worry about the browser crashing on you.
A polyfill is almost the same as a shim, except that it provides support for future standards (not yet a standard or in proposal stage)
