JavaScript Observable API’s

Observable objects are core part of my tool kit. Observables let you decouple objects from other objects, models from your UI for example.

I made a little library called microObservables to make normal JavaScript objects into observables. It pretty straight forward to use and you can just copy it into your project. It contains a single function observable. Just pass a reference to an object to it and it will return an observable version of your object.

function MyObject () {
var self = observable(this);
}

Now you can bind to events from that object in a similar way to how you would with jQuery.

var x = new MyObject();
x.on("yourEventName", function () {
// Do something
});

And trigger events in a jQuery like way too.

x.trigger("yourEventName");

I find that with approach I can build applications that with relatively few external components. I have models which contain my business logic, a layer of jquery or zepto to bind the models to the UI using the events triggered by the observable models, and a template library for generating the views, usually mustache.js or micro templates. This lightweight stack is perfect for mobile applications web apps or PhoneGap apps where size matters.

To contrast this to other typical front end development stacks, backbone is over 30kb minified as is jQuery, where as when using microObservables, micro templates and zepto.js a largish application comes in at around 40kb including html and css. Size isn’t everything and I still use MVC frameworks, but when I need to get every last bit of performance out of a mobile or touch device I prefer to role my own.