found drama

Long story short: I was only able to give a couple hours of dev time to my hack team at our company’s hackathon yesterday. We chose AngularJS 2 as the backbone of our app’s front-end because… Well: why not take the developer preview for a test drive? Isn’t that what hackathons are for?

What follows is a short list of impressions. I haven’t meditated too deeply (or really at all) on any of these items. So here goes:

1. “It’s just JavaScript.” This is something I said all along with AngularJS 1, but there seemed to be less ceremony here. For example, the service that we wrote? Literally “just a function”. No ng.factory() boilerplate whatsoever. Grade: A-
2. TypeScript? OMG why? The docs are basically TypeScript by default. And I have no interest in TypeScript. (Not much interest in any of the compiles-to-JS languages, beyond that which is strictly academic.) I didn’t want to go learning (re-learning? refreshing?) TypeScript on top of diving into AngularJS 2. It’s frustrating that everything is framed this way. Grade: C
3. Whither ES6? Given the state of ES6-to-ES5 compilers, it’s pretty disappointing that their “for JavaScript” docs are still ES5. I know I just said I wasn’t willing to throw TypeScript into the mix, but I would’ve added Babel. What’s more, the official AngularJS 2 docs don’t seem to mention ES6, and I wasn’t finding any decent blog posts or how-to guides in the quickie 10 minute search I did. (An eternity in hackathon time!) Grade: C
4. Annotations? Sure, OK. I suppose I like the idea of the @View and @Component annotations, etc. (Maybe I’ve spent too much time with Spring in Java lately?) But they’re also restricted to TypeScript (vide supra) and the way that the translate into ES5 was a little… clunky? Seems like this is the price to pay for getting rid of some of ye olde AngluarJS 1 ceremony. Grade: B-
5. Per-component bootstrapping. This one was confusing at first. Under AngularJS 1, you applied that ng-app directive somewhere in the mark-up (and pretty much only once) and the framework magically started up your app. Here, you define your components as directives (directives as components? either way: win!) and drop the associated mark-up into the DOM but… then what? The examples didn’t mention this but you’ve then got to explicitly call ng.bootstrap() on the function associated with that ~~directive~~ component. So once past the initial confusion of “why isn’t this working?” – it’s actually kind of refreshing, and promising because you can more easily build an app comprised of logically partitioned components. Grade: B+
6. The docs reflect the framework status. I don’t know of a nicer way to put that point. Although some have accused me of being delusional, I always thought that the AngularJS 1 docs were pretty good. I think the AngularJS 2 docs could be good. They’re off to a decent start. But there are gaps. Unmentioned quirks. Unupdated sections. Inaccuracies. You can muddle through it, but it takes some persistence. Grade: C+
7. All the low-level dependency injection. Unless I’m missing something (see my notes about the docs, vide supra) you need to do a whole bunch of annotation and configuration to get the dependency injection to work. Which is good because it removes a bunch of the Function.toString() magic that was much derided and the source of so much consternation. But in my main component, I had to set the bindings for the DI’ed service in two places (maybe only one of them was really necessary?) and then there was the realization that any services injected into the component’s constructor weren’t really reusable by functions attached to the prototype (so much for “just JavaScript”?) because “oh right that’s not how closures work”. (Side note: I’m sure there’s a good pattern for this, but not one that was obvious to me, and/or not one that I could figure out in 4 hours in the middle of the hack team’s noisy room.) Grade: C+
8. Template locals. AngularJS 2 has this notion of variables that are local to the template. You can annotate a given element with #someHashPrefixedReference right in the mark-up. So say something like <input #foo /> gives you instant access to that input element as foo from within the template. Which is great for those places where you just need to capture user input off of some element without necessarily going through all the ceremony of adding it to the view model. There’s just one problem: #someHashPrefixedReference won’t work. Because it’s camelCase. So the mark-up makes it #somehashprefixedreference and so you need to reference it as somehashprefixedreference. Which doesn’t exist because it’s #someHashPrefixedReference. Or maybe it does? I tried a bunch of things, one after the other, all in rapid succession, because I had to head out. But: the point is the same: #somethingLikeThis didn’t work as I expected and #somethinglikethis did, which was not what I expected. But hey… local references. Grade: B-
9. Package manager and/or module loader: don’t leave home without one. A bonus thought: I did not init this project with a package manager or a system loader – something like Browserify or webpack or SystemJS. I know better. And I know that I know better. But boy oh boy did I miss it once I realized I had started the project and didn’t have one. (I guess I’ve just been doing too much work lately on legacy projects that don’t have them?) Oh well, live and learn. Grade: N/A (this isn’t AngularJS’s fault… but they could maybe have more of an opinion about this in the docs)

Overall grade? C+ (B- if I’m feeling generous.) Overall I think they’ve reduced the surface area of the framework, and tried even harder to align it with vanilla JavaScript. But getting up and running isn’t as simple as I’d hoped, and briding the gap from AngularJS 1 seemed to put me at a disadvantage (re: unlearning things). The lean toward TypeScript also left me with a sour taste (again vis-à-vis the current state of ES6-to-ES5 compilers), and there are some rough edges in the state of the documentation. It’s definitely not out of the developer preview stage (not that anyone said it was). I remain optimistic that when it’s announced as production-ready, that it will be a great framework to work with. But for now… let’s check back again in 3-6 months.

–

[SIDE NOTE: A quick re-hash of my background to add some color/context around the above. I’ve been “doing” front-end development for about 15 years, and doing it professionally for over 7 years. I’ve been working with AngularJS since 2012 and have used it to build at least one large non-trivial application. I have given several talks about the framework, two of them public. I wouldn’t pretend to know everything about it, but I would say that I know enough that these comments are not unfounded.]