RxJs e JsRender insieme
Cristian Merighi ()
Rivisitazione dell'esempio del Twitter reader, utilizzando RxJs (Reactive Extensions per javascript) al fine di produrre codice più elegante e leggibile.
Questo articolo è da considerarsi obsoleto. Alcune funzionalità potrebbero non essere più disponibili e non è possibile aggiungere commenti.
Perpetuando il pretestuosamente ritrìto esempio del Twitter reader, eccolo stavolta condito con una relativa novità nel mondo dei frameworks javascript: la salsa
Rx-Js!
La nouvelle vague della programmazione di questo momento obbliga ad essere dichiarativi e fluenti, e Rx s'inserisce in questo contesto.
Riprendendo il codice utilizzato nell'ultimo articolo ecco come appare dopo un po' di restyling a botte di Observables e 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
- });
- }
Proponendo la versione riveduta e corretta della solita DEMO...
concludo ricordando che gli scripts del framework RxJs utilizzati nel contesto di quest'articolo sono scaricabili via NuGet:
Take care. Bye.