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 ^{4 5} 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() or ng.service() 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 ⁷ 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. ⁹ But they’re also restricted to TypeScript (vide supra) and the way that these 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 ¹⁰ 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 ¹² because “oh right that’s not how closures work”. ¹³
   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. ¹⁴ But: the point is the same: #somethingLikeThis didn’t work as I expected and #somethinglikethis did, which was not what I expected. But hey… ad hoc 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. ¹⁵ Oh well, live and learn.
   Grade: N/A ¹⁶

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 bridging 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.

1. Something something previously scheduled PTO. Something something family commitments.[↩]
2. NO PUN INTENDED.[↩]
3. WORSE PUN ALSO NOT INTENDED.[↩]
4. Or really at all.[↩]
5. 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.[↩]
6. Total transparency here: I’ve dipped into CoffeeScript before, but it took much cajoling to even do that, and my current feelings on it are An interesting idea that has out-lived its usefulness. And then there’s ClojureScript which I’ll admit to finding fascinating, but that’s mostly because of Clojure itself.[↩]
7. Re-learning? Refreshing? I can’t remember the state of my TypeScript knowledge when I last looked at.[↩]
8. And I don’t believe that I’m being unfair here because it’s one thing to add a compile step for the “next gen” language features. It’s a whole other thing to add a compile step for a “super-set” language. (…says the guy who was trumpeting the benefits of Sass for years. But let’s face it: CSS is entirely to cumbersome to write without variables, functions, and mixins.)[↩]
9. Maybe I’ve spent too much time with Spring in Java lately?[↩]
10. Directives as components? Either way: win![↩]
11. Remember when I said there was a lot less ceremony? Well apparently not with this part.[↩]
12. So much for “just JavaScript”?[↩]
13. 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.[↩]
14. Mostly because I had to head out. And isn’t that always how it works?[↩]
15. I guess I’ve just been doing too much work lately on legacy projects that don’t have them?[↩]
16. This isn’t really AngularJS’s fault… but they could maybe have more of an opinion about this in the docs. I can see why they wouldn’t but… felt like a gap.[↩]

About !undefined

Comments are closed.