Long story short:1 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 backbone2 of our app’s front-end3 because… Well: why not take the developer preview for a test drive? Isn’t that what hackathons are for?
ng.service()boilerplate whatsoever.Grade: A-
- 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,6 beyond that which is strictly academic.) I didn’t want to go learning7 TypeScript on top of diving into AngularJS 2. It’s frustrating that everything is framed this way.
- Annotations? Sure, OK. I suppose I like the idea of the
@Componentannotations, etc.9 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-
- Per-component bootstrapping. This one was confusing at first. Under AngularJS 1, you applied that
ng-appdirective somewhere in the mark-up (and pretty much only once) and the framework magically started up your app. Here, you define your components as directives10 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. 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+
- 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.
- 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.11 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 prototype12 because “oh right that’s not how closures work”.13Grade: C+
- Template locals. AngularJS 2 has this notion of variables that are local to the template. You can annotate a given element with
#someHashPrefixedReferenceright in the mark-up. So say something like
<input #foo />gives you instant access to that
foofrom 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:
#someHashPrefixedReferencewon’t work. Because it’s camelCase. So the mark-up makes it
#somehashprefixedreferenceand 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.14 But: the point is the same:
#somethingLikeThisdidn’t work as I expected and
#somethinglikethisdid, which was not what I expected. But hey… ad hoc local references.Grade: B-
- 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.15 Oh well, live and learn.
- Something something previously scheduled PTO. Something something family commitments. [↩]
- NO PUN INTENDED. [↩]
- WORSE PUN ALSO NOT INTENDED. [↩]
- Or really at all. [↩]
- 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. [↩]
- 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. [↩]
- Re-learning? Refreshing? I can’t remember the state of my TypeScript knowledge when I last looked at. [↩]
- 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.) [↩]
- Maybe I’ve spent too much time with Spring in Java lately? [↩]
- Directives as components? Either way: win! [↩]
- Remember when I said there was a lot less ceremony? Well apparently not with this part. [↩]
- 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. [↩]
- Mostly because I had to head out. And isn’t that always how it works? [↩]
- I guess I’ve just been doing too much work lately on legacy projects that don’t have them? [↩]
- 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. [↩]
Comments are closed.