A Guide to Learning Angular2

Aug 25, 2016

Angular 2, functional, javascript, Reactive, RxJS

A Guide To Learning Angular 2

This article presents a list of various resources that I found particularly helpful with learning Angular 2. If you’re starting to learn Angular 2 yourself, you can view this article as a guide to help direct your own studies.

Background

From late 2012 to early-2015, I was doing a lot of development with Angular 1. But in June 2015, I started working with a client doing mostly back-end “microservices” stuff. I paid almost no attention to what was going on with Angular (or the Javascript world, for that matter) for much of 2015 through June 2016. Then I switched clients again. This new client was doing a lot of front-end work with Angular 1.5 and new (to me) tools such as Webpack, Typescript, and ES6 features, and would like to switch to Angular 2 eventually. As I started to dust off the ol’ Javascript skills, I quickly realized a LOT had changed (or rather, I had missed a lot) during my absence from the JS world. I had some serious catching-up to do. So I dug in, trying to absorb everything I could as quickly as possible. In this article, I will briefly discuss what I’ve learned so far. Rather than another basic tutorial on some aspect of Angular 2 (there are plenty of those already), I thought I’d share a list of the resources that I’ve found most helpful in my effort to get up-to-speed with modern front-end web development – particularly with respect to Angular 2.

GETTING STARTED

I’ll break this article into the following topics: new language features (ES6), Typescript, Tooling, Angular 2, and Functional Reactive Programming. For each topic, I’ll provide a brief explanation and links to resources that I found helpful.

ES6

As you may know, a lot of really cool features are being added to the Javascript (er, ECMAScript) language. The series “ES6 In Depth” by Jason Orendorff (and others) at Mozilla gives a fantastic tour of the latest features. The articles in the series sometimes build on each other, so I’d recommend starting with “ES6 In Depth: An Introduction” and working your way backwards sequentially (i.e., read the oldest articles first).
I would also recommend the book “Exploring ES6” by Dr. Axel Rauschmayer.

Typescript

Just as ES6 is a superset of ES5, Typescript is a superset of ES6. Knowledge of Typescript isn’t required to use Angular 2, but it is highly recommended. Angular 2 itself is written in Typescript, as are most learning materials. Once you have a good understanding of ES6, learning Typescript should be pretty easy. I view it mostly as syntactical sugar that adds static typing capabilities to the language. The docs on the Typescript site should be good enough to get you up to speed with it.

Angular 2

The Angular 2 site is the first place I’d go to get started learning the Angular 2 framework. The documentation seems soooo much better than I remember the Angular 1 docs being at first. Another awesome resource, especially for visual learners, is the free Angular 2 Fundamentals course taught by Scott Moss. Finally, I highly recommend the book ng-book-2.

Tooling

When I stepped away from Angular development in 2015, I was using Grunt or Gulp as build tools. These days, it seems that SystemJS and/or Webpack are the favored “build” tools for Angular 2. My only exposure to SystemJS is via a few Angular 2 tutorials, so I don’t have any recommended resources for learning about that. I’m much more familiar with Webpack. There is a good list of tutorials on the Webpack site. The one I found most helpful was Webpack your bags by Maxime Fabre. The Angular2-webpack-starter project by AngularClass is also a fantastic- it demonstrates a working non-trivial configuration of an Angular 2 app with Webpack.

Functional Reactive Programming

As I played with Angular 2, I inevitably bumped into to the RxJS library and, not being familiar with functional or reactive programming, I wondered what it was all about. I’d seen the terms “reactive programming” and “functional reactive programming” here and there (mostly in marketing emails from book publishers). Maybe I could still build some cool stuff with Angular 2 without being familiar with reactive programming (and RxJS), but it seemed like I was missing something fundamental. I decided to dig into it. Besides, Functional Programming had been my list of the things to learn for a long time anyway, and the two concepts (functional and reactive) seemed to have some relationship. That became quite a deep rabbit hole to go down.

The first book I read on the topic of Functional Programming was Functional Programming in Javascript by Luis Atencio. So far this is the only book I’ve read on Functional Programming, so I can’t say I’ve mastered the concepts but I thought it was a great primer. I’ll definitely be trying to use functional techniques as much as possible from now on. As for RxJS and reactive programming generally, I found the documentation on the RxJS github page a bit difficult to digest, as was “The introduction to Reactive Programming you’ve been missing” by André Staltz. So I picked up the book Reactive Programming with RxJS by Sergi Mansilla. The book is a pretty good introduction, but didn’t offer much depth. I still didn’t feel like I had a good handle on Reactive Programming, but then I ran through André Staltz’ tutorial and the RxJS docs again, and things started to make sense. The ng-book-2 also talks about RxJS and reactive programming a bit, and also has a couple chapters about using Redux in an Angular 2 application.

But wait, there’s more! Functional Programming in Javascript by Jafar Husain is a really cool way to learn and practice functional and reactive programming concepts. The RxJS 4 full documentation is also worth checking out. Note that RxJS 5 is currently in beta and will have some breaking changes, so pay attention to what version you’re using. Some of the books/tutorials I mention are already using RxJS 5.

Functional, Reactive, and Functional Reactive Programming (FRP) are worthwhile skills to acquire. Obviously, they are not limited to front-end web development. We can use these concepts to improve our code in any realm of development. For example, If you’re into iOS development, check out the Swift Functional Programming Tutorial by Colin Eberhardt, and Reactive Programming in the Netflix API with RxJava by Ben Christiansen and Jafar Husain. Finally, another interesting book on this topic (which I’m currently reading) is Functional Reactive Programming by Stephen Blackheath and Anthony Jones.

Summary

Here’s a list the links to all the resources I recommended:

I know, there’s a lot to learn, but I’m sure you’ll find that these are transferable skills. That is, there’s not much here that is really specific to Angular 2. In fact, I don’t think Angular 2 itself really all that complicated – especially compared with Angular 1 (of course, I haven’t worked with it very much yet, so it may be too soon to tell). Hopefully this article helps you get proficient with Angular 2 quickly. And if you know of other awesome resources, please leave a comment to let me know about them.