Author: Ben Teese

blindfold I recently did some preliminary work adding accessibility support to an existing Angular application. At the start of this work I knew very little about website accessibility, and I suspect the evolution of my thinking during the process would be common amongst other developers who have been in the same situation. Specifically:
  1. Initial annoyance at having to do it
  2. Slow progress reworking sections of markup
  3. Growing satisfaction that the app was becoming accessible to a broader audience
  4. The realisation that the codebase itself was actually better off for the process
In this post I’ll talk about the 3 things that I’ve done so far during this journey to an accessible Angular app: accessible icons, keyboard navigation and finally, ARIA support.


The best piece of advice I ever got regarding a personal software development process was from a grizzled old Unix developer with a neckbeard. OK, that’s not true - it was actually from a clean-shaven principal consultant and architect at a company I used to work at, but that doesn’t sound nearly as impressive.

Nevertheless, the process went something like this:

  1. Think a bit
  2. Code a bit
  3. Test a bit
  4. Go to Step 1

Having tried all manner of processes over the years, this is the one that has served me best. Let me break it down for you if you’re having trouble understanding it.

stringonfinger In my previous post on getter methods and Angular.js I showed how complex calculations can be hidden behind simple Javascript properties. One downside to this technique is that we can start to get a little blasé about when calculations are actually being executed. This can in-turn lead to performance issues. In this post I'm going to talk about expensive calculations in rich object models - be they hidden behind getter methods or just regular methods - and how we can use memoization to reduce the impact that these calculations have on performance. Memoization isn't something that you should use all the time, but for use-cases involving long chains of calculations it can be an effective optimization technique, especially within a framework like Angular. If you don't feel like reading, you can always jump to the part of my ng-conf presentation that covers memoization, or go straight to the Github project. Either way, I'm assuming that you're familiar with the foundational concepts I introduced in the first post in this series.
[caption id="attachment_5153" align="alignnone" width="384"] Sadly not all getters can be giant robots[/caption] In my earlier posts on Rich Object Models and Angular.js and Angular Identity Maps I've shown how, by introducing a rich object model to your Angular.js application, you can begin to employ more sophisticated techniques for modelling your business domain. In this post I'm going to demonstrate how we can simplify business logic by using getter methods to hide complex calculations behind properties. Furthermore, we'll do it in a way that slots in nicely with our existing rich-object model. If you don't feel like reading, you can check out the section of my ng-conf presentation that covers this or go straight to the Github project.
angularIdentityMap In my previous post on Rich Object Models and Angular.js I introduced a simple strategy for setting up rich object-models in Angular.js. It turns out that once we've introduced the notion of a rich object-model, a number of more advanced object-oriented programming techniques become easy to implement. The first of these that I'm going to discuss is identity maps. In this post I'm going to talk about what an identity map is, why you might need one, and I'll introduce a simple identity map implementation for Angular.js. I'm going to assume you've already read my foundational post. If you'd like to see the portion of my talk at ng-conf devoted to identity maps, jump to the video.
[caption id="attachment_4953" align="alignnone" width="640"]screenshot Another sort of rich model[/caption] Angular.js is deliberately un-opinionated about how you should structure your data models. Whilst it lays out very clear guidelines for directives, controllers and services, it also makes a selling-point of the fact that it can bind to plain-old Javascript objects with plain-old properties. Services are singletons, so it can be unclear as to if and how you can group per-object state and behaviours.  Consequently, people tend to fall back to services that deal in very simple JSON objects - i.e. objects that contain only data, not behaviour. However, building the sorts of rich interfaces that our users demand means that we sometimes need to more fully leverage the MVC pattern. Put differently, for some problems it can be useful to have a rich object model that provides both data and behaviour. Recently at ng-conf, I presented a simple approach I've used for using rich object models with Angular.js. This technique leverages existing frameworks, maintains testability, and opens up a range of possibilities for more succinct and easy-to-understand code. In this post I'll outline the underlying approach, but you can also find some (very simple) helper code here.
200px-Skull_and_crossbones Backbone.js deserves a lot of credit for bringing MVC to mainstream client-side Javascript development. That said, many beginners ask what the 'right way' of doing something with Backbone is. The bad news is that there's not necessarily a 'right way' - it all depends on the problem you are trying to solve. The good news is that there are definitely some 'wrong ways' that you should avoid on your way to finding the right solution for your particular problem. In this post I'll cover some of these anti-patterns, as well as some general advice for the new starter. I've ordered the anti-patterns roughly by significance from the major to the more trivial. Don't be too upset if you've done something on this list - I've made most of these mistakes myself ;)

[caption id="" align="alignnone" width="650"] Shine Principal Adam Kierce and UX Lead Sri Elkins celebrate at the awards ceremony[/caption] We're excited and proud to announce that we've won in two categories at the 2013 Australian Mobile Awards! We won an award in the 'Productivity App' category for Teamstuff, an...

Having spent the last 18 months or so working with Backbone.js, I've formed the following opinion: Backbone is not enough for building large single-page applications (SPAs). Sure, you and your team may be able to get your app across the line, but you'll probably end up with a lot of code and may even reinvent a couple of wheels unless you're extremely diligent about refactoring, code reviews, documentation, testing and keeping up with an ever-evolving suite of best-practices.