19 Tips to Make Learning Angular 2 Easier

Have you been flirting from across the room with Angular 2? Is it time to glide across the room and and say, "Hello"? Before you do, and you should, I'd like to give you a pep talk. I'd like to give you 19 thoughts that will make your efforts more fruitful. So, listen up.

1. Get good with Git

If you've been avoiding Git, stop it. Angular 2 assumes that you are somewhat good with Git. Just consider the instructions for getting the QuickStart project up and running. So be good with Git. If you're not good with it, get (basically) good with it.

2. Learn Node and npm

Angular 2 development is tightly hitched to Node and npm. To quote the Angular 2 project:

Node.js and npm are essential to Angular 2 development.

If you are trying to dodge either of these, you're doing it wrong. Learn them both so that neither become a stumbling block when learning Angular 2. If you think you can skirt these technologies, just consider the Node processing power used during development behind the npm scripts in the official QuickStart code.

3. Use TypeScript and grok typings

TypeScript

While it is logically possible to write Angular 2 applications without TypeScript, it is pragmatically not wise. One might even say that avoiding TypeScript isn't even realistic.

The mainstream of everything Angular 2 flows through TypeScript. You want to be in the mainstream and you want to go with the flow, the flow is TypeScript. Don't walk upstream or walk along the bank. Just jump in and let the TypeScript river take you down stream. This entails you understand things like tsconfid.json, tslint.json, and typings.json.

If the typings thing is blowing your mind, stop and get a handle on it.

4. Mostly Ignore UMD modules and Transpiling in the Browser

Angular 2 code can be run using UMD modules, from a CDN, compiled in a browser at runtime. This is a nice trick for sharing small Angular 2 code samples, but I wouldn't pay it too much attention. Use it for teaching and code sharing. Other than that, focus on ES6 and ES6 modules via TypeScript loaded using a modern JS loader.

5. Use A TypeScript-friendly code editor

Best to choose a code Editor for Angular 2 development that understands TypeScript by default (or via a plugin) and is considerate of modern JavaScript development (i.e. Node/npm development). Visual Studio Code, Atom, or WebStorm seem to be the ideal choices today. While you might love another editor, getting started with Angular 2 will likely be easier when using one of these editors.

6. Angular 2 isn't one script include like Angular 1.

Gone are the days of including one JavaScript file and and doing Angular development. Angular 2 is a set of npm packages and even doing non-trivial Angular 2 development will require a handful of npm packages. Accept it. Angular 2 is full-on Node'ified and on the npm bandwagon.

7. Angular 2 has several, hard, third-party dependencies you'll need to grok

Once you've learned Node, npm, and TypeScript (and potentially a new code editor) the next thing you'll need to gain insight on will be Angular 2's hard dependencies on zones.js, reflect-metadata, and RxJS.

reflect-metadata and zones.js are polyfills for Angular 2, both of which I'd glance at. As you walk a mile or two with Angular 2, you'll eventually have to understand what is being polyfilled and why.

As for RxJS, take a closer look at it. It's endorsed by the Angular 2 project and plays a major role in application development when dealing with HTTP responses on the client. So, yeah, no real reason to sidestep RxJS or put it off. Just learn it.

8. Angular 2 loves modern JavaScript. So polyfilling at runtime is needed.

If you are building an Angular 2 application for an environment that runs ES5, ES6, and some future ES* code with no issue, you are golden. Otherwise, a polyfill will be needed. The Angular 2 project depends upon core-js to make sure Angular 2 code can run in an environment that does not support ES5, ES6, and ES* perfectly. While not exactly necessary to do Angular 2 development, I believe it is a good idea to understand what core-js is doing at runtime.

Don't forget, an Angular 2 application won't run in anything less than IE9, and IE9 support for ES5, ES6, and ES* isn't perfect. Heck IE10 and IE11 support is far from perfect.

9. Serious Angular 2 development requires a JS loader

So, now that you know a thing or two about Git, Node, npm, TypeScript (including typings), and RxJS, the next major knowledge hurdle is to accept the fact that Angular 2 development will, in most cases, require the use of a modern JS loader. The Angular documentation seems to favor SystemJS, but Webpack will work too.

You'll need a good understanding of whichever you use. Don't gloss over this part of the stack. Make sure you learn the loader. It'll make learning and using Angular 2 easier if you are not baffled by the loader.

Also keep in mind that both SystemJS and Webpack not only load modules, they also aid in bundling.

10. You'll want modular CSS

Contrary to the QuickStart code, you'll want modular CSS. Simply including CSS files in index.html isn't going to scale very far. Make sure you use the plugins provided by Webpack or SystemJS to load CSS in a modular fashion using modern ES6 module syntax.

11. Developing Angular 2 code entails watching, compiling, and serving processes

While developing Angular 2 code, you'll be running multiple processes that watch your files, recompiles these files upon changes, and then serves these files to a browser via a local Node server.

For most JavaScript developers, this stuff is commonplace. But, if you are just learning Angular 2 along with the tools that make development possible, the multiple Node processes might come as a surprise. Just keep in mind that your terminal will be running several process that make Angular 2 development possible. You'll need to be aware this fact and often the output from these processes will be mission critical to development.

At a high level, just remember that all TypeScript code has to be compiled to run in a browser. This requires a compiling process and listening process while developing Angular 2 applications.

12. Not so much client-side MV* anymore – more like components from top to bottom (i.e. a component tree)

Coding Angular 2 will force you to think about your application, not in terms of MV*, but in terms of a tree of components. Components are the building blocks of an Angular application.

Every Angular 2 application has a starting root component and that component will contain all other components. Components will be how you organize your application. Forget client-side MV* and learn components. In an Angular 2 application, a component will bring together the views, styles, controller logic, and state. A major part of your Angular 2 journey will involve understanding how components are encapsulated and interface with parent and child components (especially the passing of data from parent to child(ren) and child to parent(s)).

13. A smidgen of functional programming is upon your Angular 2 OOP

For the most part, if you think/develop in OOP terms, you should be right at home with Angular 2 development. However, given Angular 2's use of RxJS and things like ngrx/store, you should be aware that functional programming concepts are infringing upon a strict OOP developer mindset. Ease yourself into functional programming because Angular 2 isn't shying away from it. Try it – you might just like it.

14. Angular 2 isn't just for web browsers

Angular 1 started out as a single script file you placed into an HTML page to create JavaScript applications for web browsers. Angular 2 is something entirely different. While it can be used to create applications that run in a web browser, Angular 2 is more about how you write applications, wherever you may want write them to run.

When learning Angular 2, you'll start out writing code that will run in a web browser (i.e. getting started docs). But know, this is only an option, not a requirement. Angular 2 code is a tool to write applications that can potentially run on the web, on the mobile web, on native mobile devices, and as native desktop applications.

Angular cross platform rendering

Consider Angular 2 a way to build applications that can potentially run anywhere.

15. Testing is assumed and opinionated

Angular 2 development assumes you'll be writing tests and that you'll likely be using, Jasmine, Karma, and protractor. These testing tools have infiltrated the documentation and getting started code.

Just a heads up. These seem to be the preferred solutions for testing an Angular 2 app. Not that you can't use something different, just that you'll be going it alone if you do (i.e. not the official recommendations).

16. Angular 2, only From npm

As far as I know, you can only use npm to get Angular 2 code. Don't bother looking for it in any other repository. If you think it will eventually show up outside of npm, in an official way, I believe you'll be mistaken. Its npm, or nothing, moving forward.

17. Chill! Angular 2 isn't even RTM yet.

As of today, Angular 2 is at RC (release candidate) 5. They are currently working on RC6 and word on the street is, ngModules will be the last large breaking change. So at this point, RTM (Release to Manufacturing/Marketing), GA (General Availability), and a production release hasn't even happened yet. Start living like this is the reality of the situation and you'll be fine.

In other words, it is the perfect time to start learning Angular 2, but not yet the ideal time to go into production with the solution. Hopefully by the end the year, things will be ready to rock, but production usage is likely 7 to 9 months off.

18. Get comfortable with Angular 2 Configuration files.

Don't shy away from configuration files. I know it's tempting to just accept these from quickstart guides and boilerplates, but don't. Configure or minimally open and understand the pre-configurations found in the following files:

  1. package.json
  2. tsconfig.json
  3. typings.json
  4. systemjs.config.js or webpack.config.js
  5. tslint.json
  6. protractor.config.js
  7. karma.conf.js

19. Moving from Angular 1 to Angular 2 won't be trivial.

RIP

Migrating from Angular 1 to Angular 2 will hurt. If by hurt one means you'll have to learn new stuff and the old stuff won't exactly work with the new stuff

But come on folks, this is the web and JavaScript, are we not always constantly hurting? Basically, face it, migrating won't be a snap. It's just what happens when a house burns down and you have to move back in after rebuilding it. Plenty of help will be available, but again, it won't be a trivial migration/move.

ngmigrate

Going forward

Have I prepared you for the move to Angular 2? More than likely not. We're just not talking about a trivial move regardless of if you are new to Angular or not. Hopefully, however, I've given you some insight as you approach Angular 2. More depth on the details will be forthcoming. Until then, I hope I've built up your confidence as you glide across the room and pick up on Angular 2.

Comments

  • Monty Rasmussen

    This is a great guide for Angular 2 using TS. I did want to point out to your readers, though, that about half these steps are unnecessary if you use Angular 2 with Dart instead, as all the big Angular 2 projects at Google do (such as AdWords). Take a look at the quickstart guide on the Angular site to see for yourself: https://angular.io/docs/dart/latest/quickstart.html

    • I’ll check that out. Very interesting point. Thank you for making it.

  • Phil

    Looking at Angular 2 coming from a knockout.js and Aurelia.js background; this post is spot on.

  • Naga

    nice recommendations , thanks.

  • Pingback: Dew Drop - August 26, 2016 (#2316) - Morning Dew()

  • Here’s an interesting FP take on Angular 2: http://blog.wolksoftware.com/the-rise-of-functional-programming-and-the-death-of-angularjs. IMO “the rise of FP within the JavaScript community” as the reason for a decline in Angular 2 adoption seems far fetched.

    • That is a good read. Thanks for sharing it.

    • Yeah, it seems far fetched to me too. I don’t know how anybody would think or prefer otherwise.

    • Brian

      I wouldn’t consider there to be a rise in FP in JavaScript community, as it is a functional language by default. If anything, there is a rise in the application of OOP methodologies to the JS language to help fix all the problems that FP is causing for application development with large teams. I’m pretty sure companies and dev groups are not adopting learning TypesScript /ES6 / OOP frameworks for the fun of it, or to be doing something different. It has become a necessity when they compare their front end JS workflow to that of their server/desktop/native mobile app development teams. The owner of Wolksoftware, Remo Jansen runs the Typescript meetup in Dublin, and is the author of some to-be-published typescript books – so maybe hedging their bets.

  • Jeff Mahoney

    Point #12 is something I’ve wrestled with a bit myself. I’ve recently started working on a team using Angular2. My previous 2 years of JS data-binding framework experience were with KnockoutJS. While some of the binding syntax looks fairly similar between the two (and you can even do component work in KnockoutJS), you hit it right on the head about Knockout being more for MV*-type approaches. Great article!

  • About #17…
    Looking here: https://github.com/angular/angular/milestones it seems RC.6 is just around the corner, and that it won’t be long until 2.0.
    By “production usage is likely 7 to 9 months off” – did you mean that you won’t even recommend 2.0 for production (wait for 2.1 or something)? Or that it will be 7-8 months until 2.0 will be out? Because 2.0 seems to be just around the next corner, after RC.6

    • I’m using historical events in the past to make a conservative estimation. Remember we still have “RTM (Release to Manufacturing/Marketing), GA (General Availability), and a production release” to go. All of that could happen faster that 7 to 9 months, but given the past I’m being very conservative in my prediction of the future.

      • Well… if that’s the case, maybe I shouldn’t have bet my colleague that 2.0 Final will be out before November 1st 🙂
        I was also hoping that, since Angular Connect is in September, that they’d do some magic before that.
        But I had no idea about releasing processes in general… I thought that “2.0 Final” will be the next thing after “RC” ends.
        Or, maybe they’ll pull a fast one and call it “final” just before Angular Connect, like they did before “ng conf” when they simply called it “RC” instead of “beta” (in my opinion, that should have been done when they got the code at the stage it was in RC.5).

      • Well… if that’s the case, maybe I shouldn’t have bet my colleague that 2.0 Final will be out before November 1st 🙂
        I was also hoping that, since Angular Connect is in September, that they’d do some magic before that.
        But I had no idea about releasing processes in general… I thought that “2.0 Final” will be the next thing after “RC” ends.
        Or, maybe they’ll pull a fast one and call it “final” just before Angular Connect, like they did before “ng conf” when they simply called it “RC” instead of “beta” (in my opinion, that should have been done when they got the code at the stage it was in RC.5).

  • guyAtHockeyBiasDotCom

    Coming from a C# background and this is quite useful – thanks!

  • hgoebl

    I’ve just tried angular-cli@webpack. Seems like it’s no longer necessary to deal with System.JS and webpack directly. Another advantage: you don’t have to invent a project structure and you have live-reload and a production build out-of-the-box. I really hope that Angular projects get more standardized this way. Not these snowflake projects with totally different tooling any more.

    • That is good to hear. I hope the experience using the CLI continues to improve.

    • Brian

      The set up was a pain for me over the months, so I started to use angular2-seed project – there are around 15 contributors, and some of the top Angular 2 devs use/contribute to it. The Angular 2 CLI is not really ready

  • Adam

    Nice article with lot of useful links. I will take a look on them. I like angular 1 and tried to start with angular 2. However I do not have so good overview yet. At the moment SystemJS is default jsloader for angular, but I have read somewhere, that they will go to webpack. Is there any big advantage use webpack and don’t use systemjs or vice versa?

    • I’m being told and witnessing what seems like a shift to webpack by ng2 folks. Personally, I like SystemJS better. Code wise. But the amount of plugins, content, and tools around SystemJS is nothing compared to Webpack. And, Webpack 2 is coming. And when it does arrive I have a feeling it’ll be the wagon to be on until the next one comes along.

  • rpolevoi

    I couldn’t agree more with your main drift, which is (as I take it) — “Just face up to the whole banana of Angular 2 and eat the whole thing without whining.” Rxjs, module loaders, TS (of course), etc, etc. etc. But there has to be some priority to this laundry list, and I insist that the first and most important task is to “master” to the best of your ability the fundamental intellectual/architectural/design principles of Angular 2 itself. Until you really understand and appreciate the beauty, intelligence and supple flexibility of an application built from class-based, intercommunicating components (each combining logic and UI), with services layered on (or abstracted out), you will simply not have the incentive for climbing the Angular 2 “wall of ice” on all of the other, more tangential fronts. In fact, until you have managed to really appreciate ng-modules and their integration with lazy-loaded routing as introduced with the current RC, it’s a waste of time slogging through stuff like typings and tsconfig (much less daring a glance at the truly gory zone or reflect-metadata libraries — for adults only).

    • I agree, next step after getting ones head right and some high level knowledge (i.e. acceptance), is always the patterns/details (i.e. how well one actual lives with it) of the architecture.

  • Christoffer Klemming

    Brilliant article, highly informative. About to take the plunge of migrating our AngularJS production app (waitwhile.com) over to Angular2, but keep deferring it. This article did (in fact) make it more plausible that will start the migration once RC6 is shipped.

  • Pingback: Curated links of 2 Oct 16 – DiscVentionsDaily()