PIcking Your Javascript Mobile Framework: Part 17 - Ractive

Ractive was developed by The Guardian, the UK newspaper. That makes it probably the only framework in this group not created by a technologist (if we don’t want to count out WalMart Labs).

If Mithril is the framework I wanted to love the most, Ractive is the one I wanted to love the least. The performance was not exciting, while the code length was at the far end of what we’d consider acceptable. I didn’t realize it was made by a news organization, but it seemed far removed from the needs of an app developer.

Instead, Ractive captured my attention. It is by far the sanest of all these frameworks, with conventions that are intuitive and plausible. For instance, instead of decoupling templates and data, Ractive brings them together in a visible way: you pick a template, generate the model, and choose the DOM element into which you’ll pour your wisdom. Then you create a Ractive object that contains all that, and tell it to go shakin’ and jivin’ and come back with HTML.

Frankly, that makes a whole lot more sense than ugly ducklings in the DOM tree getting picked up by the Angular fairy and returned as eventful swans. It also makes more sense than the approach of having giant functions with “div” and “input” strewn all over, trying to generate what ultimately is a long string.

The downside to all that is that the index.html file looks like someone barfed template all over it. Maybe it’s just me, but the Handlebars syntax is tragically horrible to look at.

On the app side, things are very comprehensible. Ractive has a neat trick in store, in that it gives the Ractive object the ability to generate and respond to custom events, making it possible for some items to respond not (only) to clicks and key presses, but also to changes in the model.

Routing is handled using Director, persistence is handled as usual by localStorage.

There seems to be a slight hickup in the template, though. Instead of being able to handle the collection of items inline, the repeated item HTML is placed in a separate template and referenced in the main template as “partial”. That’s pretty inelegant, because the logic to build the list is still in the main template. This is the only framework that uses partials. (Maybe it’s just the Todo implementation?)

So, as a whole, Ractive is a solid contender with a few rough edges. It’s been around for just over a year, which means it’s still allowed to have all sorts of potential for improvement. But if you are new to web development, I would probably advise you use this as your primary option. It’s just so much easier to understand what’s going on.