Now that Angular 2 is in beta, you’re probably itching to try it out (if you haven’t already!).
But what are all these new libraries and tools? SystemJS? RxJS? eh?
Some people say to just ignore them until after you get your feet wet, but there’s that nagging feeling – you’ll need to learn it eventually, and it just doesn’t feel right not knowing what all the pieces do.
In this post we’ll look at those dependencies and what they do. This will be a quick overview, enough to satisfy your curiousity and get you past worrying “what is all this weird new stuff.”
What Are These Libraries For?
We’ll use the official “hello world” example from angular.io – available in Plunker here. Open up
index.html and follow along.
You’ll see a bunch of scripts up top:
angular2.dev.js(this one’s obvious)
Let’s look at what they are.
Angular 2 doesn’t have its own module system like Angular 1 did – it uses SystemJS. According to its Github page, it is a “Universal dynamic module loader”. That’s a lot of words.
SystemJS is a library written by Guy Bedford (and others) built upon es6-module-loader to provide a way to load not only ES6 modules, but also CommonJS, AMD and global scripts.
When I first came across it, I thought the “System” in the name implied that it was some big fancy standard that I had missed out on. I mean… it adds a global object called
System. That seems like a strong name for a non-standard thing.
That was partially true. ES6 (aka ES2015) was going to have a global
System object. It got pulled from the spec, but the es6-module-loader was created to provide a polyfill in the meantime.
Zones are an idea borrowed from Dart that Angular 2 uses to efficiently know when to update the view.
reflect-metadata is used to enable dependency injection through decorators.
Have you ever wanted to write something like “fire this promise chain every time some data arrives”? Observables let you do that.
Even if you don’t want to use them, Angular 2 does. So
Rx.js is included as a dependency.
If you were worried about the libraries Angular 2 is using, hopefully this post helped calm your nerves. Now you can get down to the real stuff.
Check out the official angular.io site for a few nice starter tutorials, and sign up below for my newsletter. I’ll be sending out more Angular 2 guides (along with ES6 and TypeScript) in the coming weeks.
Learning React can be a struggle -- so many libraries and tools!
My advice? Ignore all of them :)
For a step-by-step approach, read my book Pure React.