Tuesday, September 3, 2013

Things that suck in AngularJS

Every once in a while, I find that someone is interested in AngularJS, but not sure if they should stick to their jQuery comfort zone or make the plunge and learn the new thing. It's relatively easy to come across people singing praises to the paradigm shifts that Angular enforces, and there are plenty of tutorials out there showing how to get Angular to do cool stuff without much effort. There's also pretty good explanations out there for some of the more mysterious concepts (like $apply() and transclusions and animations).

The reason I'm writing this is not an attempt to rehash any of those. As it turns out, I've been knee deep doing some pretty neat stuff with AngularJS, RESTful web services, web sockets and other cool HTML5 techs at my job, and I think I've got enough experience to list out some very specific things that aren't that great about Angular. Don't get me wrong, it's a great tool for the stuff I'm doing, but I just feel like complaining a little :)

So, what is sucky in Angular anyways?

Documentation

Docs are a constant complaint in the community: despite being touted as a testable framework, the unit testing guide has been grossly incomplete for ages. Not only that, but most of the API documentation lacks code examples, and makes little to no effort pointing out arbitrary surprises (e.g. ng-selected takes a string instead of a boolean, .bootstrap()'s second parameter is an array, not a string, etc)

The page for directives is another (in)famous part of the docs that, despite relating to one of the most important aspects of the framework, is often derided as being overly dry, and spends more time talking about internals than how to actually create directives.

DOM integration and directives

Many common DOM actions are supported poorly, e.g setting focus on a specific element inside of a repeater, or setting the dimensions/position of an element based on the dimensions/position of another.

Directives - the blessed way of integrating to the DOM - have a lot of optional arguments that don't work well together, and others that break in subtle, hard-to-reason-about ways. For example, ngModelController.$render breaks once you add scope parameters. Transclusion also silently modifies the scope inheritance semantics if scope parameters are added.

Directives can also get stuck in infinite loops when two or more of them act on the same ng-model binding and there are change even handlers.

The problem is aggravated by compiled directives such as ng-repeat and the unstable-only ng-if, since those re-initialize child directives, and can cause event handlers to fire when things haven't really changed.

Another problem with directives nested in ng-repeats is that there's no easy way to control the lifecycle of a directive. Once a list changes (usually due to an ajax call), the redraw performance of a repeater can get unacceptably slow.

The fact that asynchrony is abstracted away in ng-include and the templateUrl argument in directives can also cause difficult to troubleshoot bugs.

I often find that I need to write large comments to explain some subtle side-effect that arises out of an $apply cycle when there are several things happening concurrently in a page.

Business Logic

In addition to the subtle errors that occasionally arise from asynchronous directives, I often run into problems with strictly business-logic ajax as well: for one thing, there's no equivalent to jQuery's $.when, which makes multi-request dependency management difficult (when you hit multiple web services to derive some conjoined information, for example).

It's even more difficult to reason about business logic when your app is big enough to contain nested controllers. You need to carefully manage when controllers are instantiated, what data is ready when, which variables hold promises and when they are resolved, and what is available where; all tied by the scope inheritance mechanism, which is unsettlingly reminiscent of global state.

Bidirectional bindings are two-edged: while they simplify some types of tasks, they make others surprising, e.g. some directives impose types on the variable bound to them, so you sometimes find yourself forced to cast booleans to strings for no seemingly good reason.

Also, I often find myself wrestling against bi-directionality conflicting w/ event-driven programming style, i.e. when calling http methods in response to user actions, as opposed to data changes. This closely relates to the infinite loop problem I mention above and it's a bit of a case of a "pure" system (in the side-effect sense) forgetting to account for the real-life need for non-idempotent actions.

Filter Caching

Repeater filters are not straightforward to cache: if I want to display the length of a filtered list, I have to either re-compute the filtered list (very expensive), or introduce assignment logic into the HTML view (untestable and ugly), or refactor the filter into the controller as part of the data initialization (not desirable for data required to compute derivative metadata).

3rd-Party integration

Calling Angular services, filters and controllers from outside of Angular is verbose and non-intuitive, making it a difficult sell for progressive adoption into a legacy codebase (read: most non-trivial codebases). More importantly, under those circumstances, it sometimes fails in inexplicable undebuggable ways (I'm looking at you, $http, and yes, I called $el.scope().$apply()).

Internal Complexity

I consider myself to be a reasonably good js developer, but the internals of AngularJS are overwhelmingly non-approachable. Even seemingly simple request changes like the ability to abort http requests require massive amounts of design discussion and implementation attempts because of all the levels of abstraction that need to be reconciled. My general feeling is that the API designers don't care much about orthogonality: several features are missing counterpart/complementary mechanisms (e.g. there's a handy `$timeout` but not a `$clearTimeout`, form.setPristine() was added in unstable, but it's not readily available in the controller and it doesn't have per-field equivalents, etc)

A lot of the complexity leaks from the abstraction prominently into developers' day-to-day: most Angular developers have seen the non-helpful "$apply() already in progress" error. Also, in my experience, bugs in AngularJS apps require a relatively intimate knowledge of several layers of abstraction simultaneously, and are much harder to debug than traditional jQuery ones.

Another semi-related note: The unstable branch is rightly named so: it introduces breaking API changes at every release, and new features often have integration problems when combined with other features. It does contain some incredibly useful features, but I'm not even sure how they plan on officially releasing this unstable stuff, since the effort required for developers to migrate from the current stable to the current unstable grows just that much more with every version increment.

Testability

There are no built-in mechanisms for testing directives.

Also, angular-mocks is incompatible with the ng-app directive (and .bootstrap(), for that matter), making in-page testing (using jasmine ConsoleReporter) impossible.

Integration testing can only be done when using ng-app, making multi-application pages untestable. This is a testability showstopper when your project involves a lot of legacy code that is ported gradually (like most legacy-laden projects are).

Parting Thoughts

This is a list of things that could be improved in AngularJS (1.2) from the point of view of someone whose full time job is pretty much to push techonology to the limit. It's not an attempt to promote Ember (which I haven't had the chance to look at) or Backbone/Knockout/jQuery/whatever, all of which have their own merits -- ok, Backbone sucks, but that's for another post :)

Friday, January 4, 2013

Floats and clears in html emails

So I was trying out a new technique (ok more like "so old no one remembers it exists") to see if I could do floating and clearing in emails.

After running a test through Litmus.com, it turns out that it does work in all the major clients (even in Outlook 2010)

The caveat is that you can only float images, but it should make life a bit easier if you develop emails.

To float left:

<img src=”theimage.png” align=”left” />

To float right:

<img src=”theimage.png” align=”right” />

To clear:

<br clear=”left” />

Putting it all together, instead of a using bunch of nested tables, the code would look like this:

<img align="left" src=" bla.png" />

Here's some text beside the image

<br clear="left" />

Here's more text below the image

Thursday, December 13, 2012

The Mathematical Hacker

Interesting essay on programming and mathematics.

A little iPad app for Santa

I had a bit of downtime recently, so I slapped together a little toy app using a few technologies I've been meaning to play around with. The original idea was to create a proof of concept for bringing Telus' (or Rogers or whoever) technician appointment system onto iPads. A customer rep (or a customer via some web interface) would book appointments to the system, and a technician could then see which ones are close by.

That sounds a bit dry, so in the spirit of Christmas, I decided to populated the appointments database with some tasks for Santa.

P.S: Dear Santa. I've been a good kid and I'd like a flamethrower.

If you have an iPad, you can see the app here. Change the radius input to see more pins on the map and feel free to add more if you want to. It works on desktop too, if your browser supports Geolocation, but it might not pinpoint you as accurately.

Technologies: Angular.js, Geolocation, Google Maps, Mongo on the cloud

One thing I wanted to explore was organizing front end code a little better than the common one-giant-file-full-of-random-jQuery-scripts. So, I looked into Angular.js

It's essentially a client-side MVC framework. It does routing:

$routeProvider.when('/', {
  controller: ListCtrl,
  templateUrl: 'list.html'
})

Controllers are just functions, but they have magic arguments: in the example below, the $scope object magically makes its members available as variables in the view. This feature is also used to import modules, making it very terse and elegant to manage dependencies in controllers.

function ListCtrl($scope) {
  $scope.greeting = "hello"
}

Views use plain HTML with extra attributes to provide functionality:

<-- this would say hello -->
<input ng-model="greeting" />

Models make it super easy to integrate to RESTful JSON services, which helps keeping server-side and client-side logic separated.

Check the Appointment module for an out-of-the-box example of connecting to a mongo db RESTful web interface (via mongolab.com, hosted on the EC2 cloud). The Geolocation module connects to the HTML5 Geolocation API, and to MapQuest's Nominatim service to map GPS points to addresses.

One of the neat things about Angular.js is that it does a lot of the heavy lifting for data-binding on the UI. Check the ng-repeat directive in the list.html file and $scope.nearby function in controller.js for an example of filtering the data set by distance to current location.

Google Maps is something I added mostly for eye candy. The code for it is in the controller.js file and it's fairly straightforward.

As always, feedback welcome.




Wednesday, November 28, 2012

HTML 5 iOS App Development

I wrote a presentation on HTML5 application development for iOS. There are also some supporting files up on GitHub for those who would like to play around.

Feedback welcome.

Tuesday, November 13, 2012

Wednesday, October 10, 2012

Tuesday, July 10, 2012

Monday, July 9, 2012