I've used Ractive for several projects recently. It's been like a breath of fresh air. I've been writing user interfaces of one kind or another for more than a decade, and keeping what's displayed to the user in sync with what's stored in the data structures has often been a source of frustration.

In the javascript world, I've mostly used backbone and jQuery for creating interactive web pages. While these tools are very good at what they do, I still find myself writing a fair amount of code to update data in the model whenever a user interacts with a control, and to update the control displays whenever data in the model changes.

Enter Ractive. It's not the only library to handle 2-way data binding - Angular, Knockout and React all play in this space, but it's my current favourite.

Anyway, here's a little demo....

Given a ractive template like this:

<p>Type in the boxes below.<\p>
<input class="form-control" value="{{var1}}">
<input class="form-control" value="{{var2}}">
<p>Current values are var1:<code>{{var1}}</code>, var2:<code>{{var2}}</p>
<button class="btn btn-primary" on-click="changeme">Set var1</button>

and javascript like this:

var ractive = new Ractive({
   el:"#demo",
   template:template,
   data:{var1:'beeblebrox',var2:'lintilla'}
});

We get:

Neat, huh? I haven't had to write any code to manually react to keyup, or change events in the input controls - Ractive simply takes care of the fact that I refer to var1 in both the output paragraph and the control value, and binds the two elements together, refreshing them whenever needed.

The code for responding to the button click is simply:

ractive.on('changeme',function(){
    ractive.set('var1','zarniwoop');
});

By setting data in the underlying model, the user interface automatically updates, again without any manual intervention.