Home > Features > Dev Depot: Relying on Ractive for Interactivity • Bookmark   • Newsletters   • Register Search Options


Dev Depot: Relying on Ractive for Interactivity

Dev Depot: Relying on Ractive for Interactivity

November 8, 2013
Text size: 
View in Digital Mag
Get XBIZ News
XBIZ Research
Will virtual reality boost the paysite market?
Yes, it will soon
Yes, but in a few years
Out of 151 votes. Results based on votes submitted by members of XBIZ.net social network.

" 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. "

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.

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.


How to Buy Google and Facebook Traffic

‘Wait a minute! Isn’t this an adult industry publication?” Of course, your eyes don’t deceive you. “Why are you talking about buying mainstream traffic with Google and Facebook?... More »

Creating a Top-Notch, Lucrative Adult Website

If there’s one thing I’ve seen consistently over the 10 years I’ve been running Elevated X and working exclusively with paysite owners it’s that no matter how competitive the paysite... More »

Artificial Intelligence Treats Risk Like Cancer

An embarrassing thing happened to me in Amsterdam. I’d just finished dinner with a new partner at a nice restaurant. OK … more expensive than nice, but you know what I mean. I grade food in... More »
Stay informed of the latest industry developments. Get XBIZ newsletters delivered to your inbox. Subscribe today!
Enter email address:

* To manage existing subscriptions click here.

Submit your press release to
multiple news outlets with 1 click.
Subscribe to RSS news feeds or
add free content to your website.
Access XBIZ news and articles
with your mobile device.
Subscribe to XBIZ World magazine, the industry's leading e-commerce trade publication, delivering in-depth coverage of the online, mobile and ancillary digital markets.



Nov 04 - Nov 06
Edison, New Jersey

2016 Inked Awards

Nov 05 - Nov 05
Edison, New Jersey

XBIZ 2017

Jan 09 - Jan 13
Hollywood, CA

XBIZ Awards 2017

Jan 12 - Jan 12
Los Angeles, CA
Everyday thousands of business professionals browse XBIZ's industry directory for quality products and services. Not listed yet? Your company could be losing potential new business. Submit your company today!
Use XBIZ RSS feeds to stay informed of the latest industry developments or as a content syndication tool for your website!