RxJs along with JsRender
Cristian Merighi ()

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
- });
- }
Presenting the updated version of the usual DEMO...
I end this article by suggesting NuGet as the optimal RxJs repository:
Take care. Bye.