Some Backbone History
I’ve been using Backbone for the past two years or so. I loved it from the very first time I’ve used it. Finally there was a good and simple way to structure web apps. From small side projects to large production real-time applications.
All the web stuff I wrote in the past 2 years has been based around Backbone, even on the server side.
Secret: AngularJS scares me
Well, it did. I used to hear people talk about the new hotness and I didn’t really want to let go of Backbone. I took quick looks from time to time and found some stuff I didn’t like in AngularJS:
- There were a lot of TODO lists examples, but nothing bigger.
- Too much “magic” is happening without me needing to understand it.
- It had no way to render on the server side.
The only way I knew to get into this is to create a small project and learn. I created Hinder with AngularJS and was amazed at how easy it was to write it. Much more concise than my Backbone apps.
This was a nice intro into the AngularJS world, but it wasn’t enough. I feel like I only scratched the surface of it. On top of that, I felt there was too much magic happening in the background. I really don’t like that filling of not understand how things actually work.
I found the following amazing blog post titled Make Your Own AngularJS. It explains step by step how AngularJS works and you really should read it.
So now I’m not afraid of AngularJS anymore.
The one thing I really liked is Angular’s directives. The fact you can use expressions for model-view bindings (as in: price.total - vip.discount) just blew me away.
I’ll describe directives as additions to the HTML syntax that allows the browser to do more than it was programmed to. This makes life easier for us developers.
Dropping Backbone and switching to AngularJS?
No, Not Yet. Maybe in future projects, but at this point converting the entire Backbone.js code base isn’t ROI positive.
Doing so will take too much time, effort and introduce new bugs to the system.
Making Backbone apps better
Backbone.js is easily extendable. We’ve seen it happen with the likes of Backbone.Relational, Backbone.Validation and other small but important improvements over the basic Backbone library.
Existing Backbone.js code bases can benefit a lot by adding more power to Backbone itself. I think directives will be a good addition and I’ve set to do it.
As a developer I always want to see something working before I get into the finer details, so here is a Demo you can checkout.
This is currently a proof of concept, but it works quite nicely. It’s not optimized for performance, it lacks testing and has a very small number of implemented directives.
AngularJS directives has the prefix of “ng-“, so for Backbone directives I thought “bb-” would fit nicely.
The basic idea is this:
1. There’s a Backbone.Model with an attribute. Let’s say the attribute is counter:
2. There’s a view that has a DOM element (it either takes control of an element, or creates one itself). The only thing needed to add for Backbone Directives is a call to this.$compile() in the render method:
3. Add directives to your DOM, we will add the bb-bind directive:
This will make sure the text of this span always shows the correct “counter” value of the model and track its changes.
4. We can also use an expression instead of a plain attribute. Here are two examples:
That’s all there is to it.
This is only one directive and anyone can add new directives. It should be pretty simple and straightforward.
At this initial release, there are 3 directives: bb-bind, bb-show and bb-class.
Take a look at the source code. It uses Angular’s parser for expressions, but other than that the code can fit on your screen (if you have a big one). I’m trying to make sure the code stays simple.
There’s a lot I’d want to see in the future:
- Add missing directives
- Match directive syntax with those of AngularJS, to eliminate the need for documentation.
- Performance testing and tuning
- Server side support with node.js
From an outsider look, Backbone still feels more structured than AngularJS. However, the wind is blowing in Angular’s direction and I’m starting to see why.
I hope this project can inject some powers into Backbone. If it is going to be more than a proof of concept, I won’t be able to do it all by myself.
I’d really love to hear what you think of this. Is this something you’d like to use in your own projects? Do you have any suggestions? Would you like to help?
I’d love to talk about this over at Twitter: @ketacode