Intended to help make the web interactive by default, Ractive.js (www.ractivejs.org) provides developers with next-generation DOM manipulation capabilities by changing the relationship between HTML and JavaScript.
Initially created to tackle the problems of data binding in a more elegant way, Ractive.js features expressions with dependency tracking, animations, two-way binding, SVG support and more.
This kind of surgical DOM manipulation is more efficient than constantly trashing views only to re-render them, and it scales far more elegantly than manually updating elements.
Reportedly backed by the Bill & Melinda Gates Foundation’s support for Guardian Global development, Ractive is used to create interactive journalism at guardian.co.uk, where it reportedly solves some of the biggest headaches in web development, including data binding, efficient DOM updates and event handling, with almost no learning curve.
“HTML is an amazing language for creating static documents, but it was never designed for interactive web apps,” developer Rich Harris states. “Many libraries try to get round HTML’s limitations, but very few tackle them head on.”
Ractive.js works by parsing HTML templates and then creating a lightweight internal representation of the DOM.
“Before, HTML was an inert substance that you would breathe life into,” Harris adds. “Now, it’s a blueprint for an app that’s interactive by default.”
The developers cite the example of traditional templating engines and frameworks that force users to re-render based on data changes, as one reason for using Ractive.js to overcome common limitations.
“So you have to split components up into atomic chunks — list items instead of lists, buttons instead of button panels [and] single data points instead of charts, often each with its own view class, each with its own render method,” Harris explains. “All too often, templating just means replacing one kind of spaghetti code with another!”
According to Harris, the Ractive.js script constructs a parallel DOM representation that is aware of its dependencies and when those values change, it knows exactly which parts of the real DOM need to be updated.
“This kind of surgical DOM manipulation is more efficient than constantly trashing views only to re-render them,” Harris adds. “And it scales far more elegantly than manually updating elements.”
Harris notes that Ractive.js received inspiration from several other projects, such as Knockout.js, Backbone and AngularJS, which is a popular framework by Google. He also notes that Ractive.js excels in its ease of learning, which is aided by interactive tutorials that allow users to master Ractive.js in an hour or two.
On the topic of frameworks, it is important to note that they come at a cost in size and complexity, with steep learning curves.
“Particularly for smaller projects, [frameworks are] often a case of using a sledgehammer to crack a nut,” Harris states. “What should be an incredibly basic task is a snakepit of compromises and ugly code — yet we’re all so used to developing this way that we’re barely even aware of how awkward it is.”
Ractive.js was an important development for the Guardian interactive team as it faces challenges from creating app-like experiences on the web, which require huge amounts of DOM manipulation performed under extremely tight deadlines.
While the developers acknowledge that none of this is something that can’t already be done with standard JavaScript, they say that the real power of Ractive.js is revealed when exploiting the script’s statefulness and dependency tracking — such as complex but easy-to-create animations.
“We’re one step closer to the holy grail of completely declarative, reactive programming,” Harris concludes.
Although Ractive.js is still an early-stage project, it has already seen production use in several interactives and is currently under active development. For developers seeking to stay on the cutting edge, however, it is an interesting project that is worth a closer look.
