Resumé

RxJs along with JsRender

Cristian Merighi (Tuesday, March 20, 2012)

Quick article that reviews the twitter reader sample, using RxJs (Reactive Extensions for Javascript) to improve code elegance and readability.

This article is obsolete. Some functionalities might not work anymore. Comments are disabled.

In perpetuating the hackneyed example of the Twitter reader, I want to (re)propose it baked with some relative new stuff coming from the world of js frameworks: Rx-Js!

The programming nouvelle vague coerces to be declarative and fluent in coding, Rx is meant to fave this way of writing code.

Here's how the code extracted from my last article appears after a bit of restyling using Observables and Subscribers:

Rx-Js + Rx bindings for jQuery

function loadTweets() {
// Rx-jQuery ajax (fluent version)
var query = $.ajaxAsObservable({
// be sure to specify dataType jsonp
dataType: "jsonp",
data: { include_entities: true, include_rts: true, screen_name: 'cmerighi', count: 10 },
url: 'https://api.twitter.com/1/statuses/user_timeline.json'
}).selectMany(function (json) {
// sweep out as data get received...
$('#tweets').empty();
//
return Rx.Observable.fromArray(json.data);
}).select(function (tweet) {
return {
img: tweet.user.profile_image_url_https,
text: renderTweet(tweet),
date: timeago(tweet.created_at)
};
}).subscribe(function (tweet) {
// append the new item (JsRender template)
$('#tweets').append($.render.twit(tweet));
},
function (error) {
// handle the error
});
}