http://danielsadventure.info

Angular 2: Ready for Prime Time?, July 3, 2016

Angular 2 has been a very hot topic in technology news as of late. The Angular 2 team has announced that Angular 2 is in release candidate stage, but is it ready for prime time? For the long answer, continue reading, or for the short answer, click the [Spoiler] button below.

No, Angular 2 is not ready for primetime, and I have doubts that it ever will be.

The [Spoiler] button above is programmed using Angular 1.5, and the code to make it work was written in just a few minutes. This is important!

From the news, Angular 2 is very exciting. It contains a number of new features and simplifications. For example, controllers, directives, and services from the original Angular are now incorporated into a single feature called "components". When used on a web page, directives have annotations that indicate what sort of directive they are; for example, directives that change the structure of the page are annotated with a *, so everytime you see this character, you know that it's for a directive that changes the structure of the page. Angular 2 is also supposed to be much more performant than the original Angular. The original Angular had these things called "dirty-checking" and the "digest cycle", which chewed up a lot of processing power. Angular 2, I am assured, corrects these performance issues.

In February this year, I was between major gigs with my consulting business. I knew from experience that Angular is one of the hottest technologies on the market. I had just finished up a project where I made great use of Angular, and I was excited about the upcoming Angular 2 release. Why was I excited? Simple: Angular was a game-changer from the first day. I expected the same with Angular 2.

// This packages.json is the first code you are likely
// to see when you read the documentation.
{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings"
  },
  "license": "ISC",
  "dependencies": {
    "@angular/common": "2.0.0-rc.4",
    "@angular/compiler": "2.0.0-rc.4",
    "@angular/core": "2.0.0-rc.4",
    "@angular/forms": "0.2.0",
    "@angular/http": "2.0.0-rc.4",
    "@angular/platform-browser": "2.0.0-rc.4",
    "@angular/platform-browser-dynamic": "2.0.0-rc.4",
    "@angular/router": "3.0.0-beta.1",
    "@angular/router-deprecated": "2.0.0-rc.2",
    "@angular/upgrade": "2.0.0-rc.4",
    "systemjs": "0.19.27",
    "core-js": "^2.4.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12",
    "angular2-in-memory-web-api": "0.0.14",
    "bootstrap": "^3.3.6"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0",
    "typescript": "^1.8.10",
    "typings":"^1.0.4"
  }
}

I spent several days in February studying Angular 2 as if it were my job. I read the documentation and worked thru examples, and at the end of the first week, I felt like I knew less about how to make Angular 2 work than I knew about the original Angular or jQuery, for that matter. I was incredibly frustrated and disappointed. At first, I wanted to blame myself for not understanding how great Angular 2 is, but I eventually decided that the problem is with the product and not with me!

Why was I so frustrated? Recall what I said about the [Spoiler] button above. You can look at the source to this page and see that I simply pasted a link to the Angular 1.5 source on a content delivery network and then wrote five lines of code that make it work. That's how simple it is to get started with the original Angular! With Angular 2, there is a long list of directions that you follow to "install" Angular 2 in your web project. Let's stop right there with the word "install". Javascript is an interpretted, dynamic language that can load additional code at run-time. The word "install" is irrelevant! But I digress. To "install" Angular 2, they want you to download a packages.json file and use NPM to "install" not only Angular 2, but a light web server, as well. They also instruct you to install node.js. This is absolutely dreadful. If I have a project I want to use Angular 2 with, the odds are I already have my own web server, and furthermore, simple demos should be able to run without a web server. Try it! Save this page to your hard disk and load it into a web browser. The [Spoiler] demo button will work! All together, NPM will download over 100 megabytes of various files that the Angular 2 team thinks you should have to use Angular 2.

I would say to the Angular 2 team that frankly, I should be able to easily set up Angular 2 without downloading or "installing" ANYTHING except the source to Angular 2. I shouldn't have any need to know what a packages.json file is, or what NPM is. I'm not knocking these tools, but requiring them is absurd.

Next, let's talk about TypeScript. TypeScript is a Microsoft language that is a "superset" of Javascript. The idea is that TypeScript provides features, namely: strong typing, that you can use to program, and then TypeScript will translate that code into the type of Javascript supported by modern browsers. Angular 2 is programmed in TypeScript so that a TypeScript developer can take advantage of the features of TypeScript when programming with Angular 2. The documentation says that Angular 2 works great with TypeScript, but still works fine with the ES5 version of Javascript. This brings me to my next point.

The documentation is simply awful. It may have changed since I read it, but following along with the examples, it seemed like everything took longer and was more confusing that it should have been. Worst of all, though, was the documentation for programming Angular 2 with Javascript without TypeScript. As a learner of Angular 2, I decided to start with the lessons based around Javascript, rather than TypeScript. I have nothing against TypeScript, but I didn't yet know it well, and I wanted to focus my energy on learning Angular 2 and learn TypeScript another time.

If you try to program Angular 2 in ES5, you're going to have a bad time. (South Park meme)

Imagine that English is your first language and a friend recommends a novel to you. He tells you that this is a great novel and you don't want to miss it. You go to the bookstore and ask for it. The bookseller tells you, "Oh yes, this is a great novel, but it's written in Russian. You probably want the English version, don't you?" You take the book home and realize that half of the chapters have been omitted from the book because they are missing in the table of contents. Now, imagine the same scenario, but there is no table of contents, so the book is incoherent and you don't know why. That is exactly what it was like trying to read the documentation for Angular 2 with ES5 Javascript. There was so much missing that it was virtually incomprehensible! Essentially, TypeScript is absolutely required to do anything useful with Angular 2 regardless of what the documentation says.

After several days of struggling with the above, I decided to just put Angular 2 on the back-burner of my mind and concern myself with other things.

Flash forward to a few weeks ago, I was invited to a local user group meeting where a man was to give a presentation about Angular 2, now at release candidate stage. I thought to myself that since it is in release candidate stage, maybe they've fixed some of the issues that I ran into.

The presentation was scheduled to last for three hours. I had not given Angular 2 any serious thought or study since February. It was my hope that the issues I had noted back in February had since been fixed. I sat down and watched from the beginning. The presenter began by telling us that there are a number of tools that you have to install to use Angular 2. Already, I was disappointed. I had hoped that they would have made it easier to get up and running with Angular 2. At one point, he showed a slide listing the components that are downloaded by NPM. I raised my hand and pointed to one of these components and asked "What is that component for?" The answer from the presenter was, "I don't know." My heart sank. Angular 2 is so overly bloated and complicated that even an expert giving a presentation can't give me an answer about what its dependencies are doing!

A full hour and a half into the presentation, the presenter had not written a single line of code with Angular 2. He was still explaining how to set up the development environment and all those dependencies! Disappointed nearly to the point of disgust, I stood up and left. I didn't care what else was said at the presentation; I had seen everything I needed to see.

In conclusion, my verdict is that Angular 2 is definitely not ready for prime time in any sense of the word. The documentation is a mess and the process of setting up your web project to use it is horribly complicated and difficult. I believe that Angular 2 is only being talked about seriously because it is labelled with the "Angular" name . If it were "Bob's awesome Javascript library", I doubt that anyone would be seriously interested in it.

The original Angular was a game-changer from the beginning. I can imagine the original Angular sticking around for years to come if Angular 2 is the only competition. However, one of the Angular 2 developers left the team and started his own Javascript library: Aurelia. Hopefully, that will turn out better! Then again, when Microsoft first released Entity Framework, it was roundly rejected by developers; Microsoft created a better version of Entity Framework which has become an indispensable tool for Microsoft developers, so perhaps it will be the same with Angular 2. Or maybe not.