Ractive.js is a framework developed by TheGuardian, a well-known news organization (http://www.theguardian.com/). It simplifies the DOM interaction and provides features like two-way data binding and custom component creation. We are not going to cover all the capabilities of the framework now. A new feature will be introduced in later chapters.

In complex web applications like ours, it is extremely important to split different logical parts into components. Thankfully, Ractive.js provides an interface for this. Here is how a typical component looks:

var Component = Ractive.extend({
  template: '<div><h1>{{title}}</h1></div>',
  data: {
    title: 'Hello world'
  }
});
var instance = new Component();
instance.render(document.'body);

The template property contains an HTML markup or (as in our case) a precompiled template. The data object is accessible inside our templates. Ractive.js uses mustache (http://mustache.github.io/) as a template language...