Binding and Model - introducing bimo

Almost every popular JavaScript framework advertises itself with some kind of binding mechanism between an observable model and HTML controls. There are many solutions out there, but in my opinion many come with extra baggage - shiny features I never need, heavy implementations, or twisted philosophies (looking at you, AngularJS).

Binding between a JavaScript model and HTML crosses a boundary, and every framework I’ve seen reflects its writers’ original knowledge:

• A designer will write a framework that distorts the model and rides on top of HTML references.
• A JavaScript-first writer will find it utterly convenient to ruin the HTML.

Knockout, Angular, and countless others all distort markup. This not only makes the framework slower (reading, parsing the DOM for instructions is slow) but also encourages - or even requires - application logic to seep into HTML tags. Those tags become very hard or impossible to debug, and it makes UI designers’ work much harder by obscuring the original markup. In a small “papa-mama” shop with a single full-stack person, this might work. In a large enterprise where tasks are distributed between specialized teams, the problems quickly get out of hand.

So when I needed a small framework (no baggage!) to handle model and control binding, I found none that worked for us. I’d been working on isomorphic web applications using Hapi.js and Dust.js (more on that in another post), and I came to love hapi’s configuration-oriented approach where you activate functionality by composing existing components. In my own component, I wanted to avoid breaking any natural boundary, so binding instructions must not invade the markup tags or the model.

Size mattered. Zero dependencies mattered. The result is bimo - a tiny framework written in 100% pure vanilla JavaScript:

• 2.5 kB compressed
• No dependencies
• An observable model with multiple watch strategies, working on both Node and browser side
• A binder object where configuration is stored outside both model and markup
• Configurable two-way and one-way binding with extra goodies

The package is on npm and Bower. Almost a decade later it’s still in production at Realmonitor.