Backbone.js and AngularJS at HannoverJS

HannoverJS is a local JavaScript user group that I’ve been attending. We meet once a month in rooms provided by a local school. Founded in August 2011 by Christoph Burgdorf, we now usually have around 10 to 15 attendees and two presentations each month.

Presentations are held by those who volunteer for one. As Christoph was looking for another talk for the November meet-up, I somewhat spontaneously agreed to give an introduction to the Backbone.JS MVC framework. For one, I’ve long been looking for a reason to take a more thorough look at Backbone — it seemed interesting, but I was never able to justify spending time with it.

It sounds good enough: a simple layer for writing client-side JavaScript applications using the MVC pattern, as well as an interchangable persistence strategy that defaults to a simple RESTful CRUD solution. Apart from that, I was also in the mood to practice making slides and giving talks, so I didn’t hesitate for too long — about 18 hours, if I remember correctly.

I thoroughly enjoyed giving my talk, but getting to know Backbone better, I started to notice how intertwingled everything is. Views are provided by static HTML skeletons, templates, as well as a View class. The View class also has some responsibilities that I’d rather see in a controller. While I enjoyed learning about the framework, I doubt I’d choose it for a project. You can find my slides below.

 

After my presentation, however, it was Christoph’s turn with his talk on AngularJS — another MVC framework for JavaScript-heavy web applications. I found that one much more convincing.

You write your view completely in HTML and declaratively add event listeners and variable values. Events get sent to a method of your controller class, while values are read from variables of your controller. In 2001 and 2002 I worked with Apple’s WebObjects, and the approach of AngularJS reminded me a lot of it — except that WO works on the server.

However, WebObjects had a really nice editor for its views, called WebObjects Builder. Wikipedia has a screenshot. I really liked wiring views and controllers together with it, and similar principles are used in Apple’s InterfaceBuilder for Mac OS X and iOS applications today.

I enjoyed it so much, in fact, that I’d really love if someone implemented something like that for AngularJS. I’d definitely want to use it. Make it web-based, write it in AngularJS itself, and integrate it with Cloud9 and GitHub. Or maybe something like that already exists? Definitely drop me a line if you know of an existing project or you’re planning on implementing it yourself. 🙂