Matthew Podwysocki's Blog

Introduction to the Reactive Extensions for JavaScript – Conditionals

Fri, 18 Jun 2010 23:33:00 GMT

After spending the past couple of posts talking about how we integrate and why, let’s get back to the basic operators of the Reactive Extensions for JavaScript. This time, we’ll cover conditional logic that we can do with RxJS (which also applies to Rx.NET as well). With traditional LINQ, we have the Where operator which allows us to filter operations, but it doesn’t allow us to do one operation or another easily. Instead, the Reactive Extensions team has included two operators, If and Case which allow us some flexibility on how we want to execute conditional logic.

Before we get started, let’s get caught up to where we are today:

Conditional Branching with Observable.If

The first conditional operator we’ll cover is the Observable.If function. This function acts as a normal if statement would in that it allows us to specify a conditional function and then have a branch for the “then” logic and another branch for the “else” logic. The signature of the function is below:

// condition  : () -> bool
// thenSource : Observable
// elseSource : Observable

// returns : Observable

Rx.Observable.If(
    condition,
    thenSource,
    elseSource);

For example, I could determine whether I want to use the cached value of an observable or start a fresh request to get some data based upon some setting.

var cachedObservable = new Rx.Subject();

...

Rx.Observable.If(
    function() { return shouldCache; },
    cachedObservable
    Rx.Observable.Defer(
        function() {
            return $.getJSONAsObservable("someurl");
        })
    );

You’ll notice that I deferred the getJSONAsObservable and there’s a very good reason for that. Such AJAX calls as this one are hot observables which mean that they fire immediately instead of waiting for the Subscribe call being made. We’ll get into the whole hot versus cold observables in another post.

So, you might be thinking, what’s the difference then between this and if I had written it the old fashioned way using an if statement?

var cachedObservable = new Rx.Subject();

...

if (shouldCache) {
    return cachedObservable;
}
else {
    return Rx.Observable.Defer(
        function() {
            return $.getJSONAsObservable("someurl");
        });
}

Well, the difference between the two is that the Rx.Observable.If function will evaluate the condition on subscription, whereas the if statement will evaluate eagerly for example on a hot observable. The if statement is nice, but what if we have more than just a simple binary case?

Conditional Branching with Observable.Case

Another mechanism we have for branching logic is be being able to handle a switch statement. What we want to give is the ability to write your traditional switch statement, but have it lazily execute just as we have the If function above. We can take the following as an example where based upon n, return the appropriate Observable value.

switch(n)
{
    case 1:
        return Rx.Observable.Return(1);
    case 2:
        return Rx.Observable.Return(2);
    default:
        return Rx.Observable.Return(3);
}

In order to make this happen, we need to use the Rx.Observable.Case function which allows us to specify a condition, such as checking for the value of n, a hash object which contains key/value pairs with the key and their Observable value, and finally an optional default case.

// selector : () -> Key
// sources  : Dictionary<Key, Observable>
// defaultSource : Observable

// returns : Observable

Rx.Observable.Case(
    selector,
    sources,
    defaultSource);

In the case of our above switch statement, we’ll first want to create the hash of our sources. Basically, the property name is the key and its value is the value of the key/value pair.

var sources = {
    1 : Rx.Observable.Return(1),
    2 : Rx.Observable.Return(2)
};

Now that we have the sources, let’s finish off the implementation. First, for our selector, we’ll need to provide a function which takes no parameters and returns our desired key. Next, we’ll provide the sources from above, and finally we’ll provide a default case if no others match.

var cased = Rx.Observable.Case(
    function() { return n; },
    sources,
    Rx.Observable.Return(3));

So, in the case of n being 1, then the first source will be selected, and so on for those along the line. If n does not match either 1 nor 2, the defaultSource will be selected. Let’s run through a quick example where we check if the detected language is a language we support, either French or Spanish, and if we do, then we translate. Else, we will go ahead and throw an exception via the Rx.Observable.Throw function as part of the workflow to say that the given language isn’t supported.

// The variables could be something like:
// var detected = "fr";
// var text = "Nous allons traduire un texte";

var sources = {
    es : Rx.Observable.Defer(
            function() { return translateFromSpanish(text);
         }),
    fr : Rx.Observable.Defer(
            function() { return translateFromFrench(text);
         })
};

Rx.Observable.Case(
        function() { return detected; },
        sources,
        Rx.Observable.Throw("Not supported!"))
    .Subscribe(
        function(data) {
            alert(data);
        },
        function(err) {
            alert("An error occurred: " + err);
        });

And there you have it, you now have two ways of dealing with lazy conditional logic within your observable workflow.

Back to .NET

Even though my examples here are primarily in JavaScript, we have the exact same functionality in the Reactive Extensions for .NET and Silverlight. For example, the If function is implemented as well with the signature as follows:

public static IObservable<TResult> If<TResult>(
    Func<bool> condition,
    IObservable<TResult> thenSource,
    IObservable<TResult> elseSource
)

And a simple example of using this, such as an even/odd scenario:

Observable.If<string>(
    () => n % 2 == 0,
    Observable.Return("even"),
    Observable.Return("odd"));

Just as well, we can use the Case statement, which has the following signature:

public static IObservable<TResult> Case<TValue, TResult>(
    Func<TValue> selector,
    IDictionary<TValue, IObservable<TResult>> sources,
    IObservable<TResult> defaultSource
)

And then we could walk through a simple example of creating our cases and then call the case with our variable n which could be either our 1, 2 or anything else.

var sources = new Dictionary<int, IObservable<int>>
{
    { 1, Observable.Return(1) },
    { 2, Observable.Return(2) }
};

var cased = Observable.Case<int>(
    () => n,
    sources,
    Observable.Return(3));

As with most examples I give on this blog, most of the core operators work nicely when going back and forth from RxJS to RxNET.

Conclusion

When we start creating more advanced workflows through the Reactive Extensions, we need powerful ways of expressing such concepts as conditional logic outside of the Where function we’re already accustomed to. With the If and Case functions, we have two powerful pieces at our disposal to make those more complicated pieces a reality.

So with that, download it, and give the team feedback!

Introduction to the Reactive Extensions for JavaScript – MooTools Integration

Sat, 05 Jun 2010 03:03:00 GMT

In the previous post, I covered a bit about how we’ve integrated the Dojo Toolkit into the Reactive Extensions for JavaScript (RxJS) where we can leverage Dojo’s eventing and AJAX programming model. Following onto that post, I wanted to move onto a different framework and show how we integrated it into RxJS. This time, it’s MooTools up to the plate.

Now the question comes, why then if the given framework works as well as it does, why would we care to integrate it into RxJS? What does it buy us? What if we want to combine two mouse moves together, one offset from the other so that we get a delta from the previous? Or how about throttling the values coming from our events, either the first value only or a delay between each value? Between all the callbacks, setTimeouts and the global state that you need to track, it becomes very hand to manage. That’s the reason why we’ve created this layer where we can go seamlessly from MooTools and other JavaScript frameworks to RxJS. We can either hop out of the world of our framework and into RxJS, or integrate it underneath the covers to manage the composable nature of your framework. Both are great options…

Before we get started, let’s get caught up to where we are today:

Diving Into MooTools Events

Once again the first part of our journey is to cover the eventing model of MooTools. MooTools has the ability through any number of classes to be able to listen to events. We’ll start with the Element class method addEvent, which attaches an event listener to a given DOM element.

someElement.addEvent(
    type, 
    fn);

Each parameter is described below:

type (string) – the name of the event to monitor such as click, mousemove, etc.
fn (function) – the callback function to execute when the event is fired.

The fn callback as noted above gives us a Event which has any number of properties including page and client position, keys used, the target and related targets as well as some methods to stop propagation.

Conversely to our addEvent, we can remove our handler from the Element by using the removeEvent method.

someElement.removeEvent(
    type, 
    fn);

Each parameter is described below:

type (string) – the name of the event to remove
fn (function) – the callback function to remove

We can then listen to events in MooTools such as a keyup event on a given input element.

$("someInput").addEvent("keyup", 
    function(event) {
        $("whatkey").set("html", key);
    });

We can wrap these events by using the Rx.Observable.Create function which hands us an observer to use and then we return a disposable which allows us to remove our listener. Inside the Create function, we’ll create a handler which takes the event object from MooTools and passes it to the observer.OnNext. After we’ve defined the handler, we call addEvent on our MooTools Element with the event type and we’ll pass in the handler as the method to invoke. Finally, we return a function which is invoked when we call Dispose on our subscription. Below is a wrapped version called Rx.Observable.FromMooToolsEvent.

Rx.Observable.FromMooToolsEvent = function(obj, eventType) {
    return observable.Create(function(observer) {
    
        // Create handler for OnNext
        var handler = function(eventObject) {
            observer.OnNext(eventObject);
        };
        
        // Subscribe to event
        obj.addEvent(eventType, handler);
        
        // Return function used to remove event handler
        return function() {
            obj.removeEvent(eventType, handler);
        };
    });
};

What this allows is for us to use a MooTools element to attach an event much like the following:

var element = $("someElement");

Rx.Observable.FromMooToolsEvent(element, "mousemove")
    .Where(
        function(event) {
            return event.client.x === event.client.y;
        })
    .Subscribe(
        function(event) {
            $("mousePosX").set("html", event.client.x);
        });

That’s all well and good, but I think it’s better to live and breathe within MooTools itself. In order to do so, we need to extend a few objects that expose adding and removing event handlers, such as Element, Elements, Window, Document as well as any other class which inherits from the Event class. To do that, we’ll use the Class method implement in which we pass in properties which alters the base class so that we can modify existing classes. For example, I can extend the Element and all other classes mentioned above by doing the following:

var fromMooToolsEvent = function(type) {
    return fromMooToolsEvent(this, type);
}

Window.implement({
    addEventAsObservable : fromMooToolsEvent
});

Document.implement({
    addEventAsObservable : fromMooToolsEvent
});

Element.implement({
    addEventAsObservable : fromMooToolsEvent
});

Elements.implement({
    addEventAsObservable : fromMooToolsEvent
});    

Events.implement({
    addEventAsObservable : fromMooToolsEvent
});

By doing this, we can take the above example of hooking a mouse move listener to report the x position relative to the viewport when both the x and y values are the same:

$("someElement").addEventAsObservable("mousemove")
    .Where(
        function(event) {
            return event.client.x === event.client.y;
        })
    .Subscribe(
        function(event) {
            $("mousePosX").set("html", event.client.x);
        });

Now that we have the basics down here, what about the AJAX APIs?

Diving into the Request

Another area where the Reactive Extensions for JavaScript can integrate well is with AJAX APIs. MooTools exposes three such classes in the Core library, Request, Request.HTML and Request.JSON. Each of those do as you suspect with one handling general requests such as text, whereas the HTML and JSON classes handle their respective data types. But the one I’m going to focus on is in the More MooTools library called Request.JSONP, which allows me to make cross-domain JSON calls.

new Request.JSONP(options);

The documentation for options is as follows:

url - (url) the url to get the JSON data
callbackKey - (string) the key in the url that the server uses to wrap the JSON results. So, for example, if you used callbackKey: 'callback' then the server is expecting something like http://..../?q=search+term&callback=myFunction; defaults to "callback". This must be defined correctly.
data - (object) additional key/value data to append to the url
retries - (integer; defaults to zero) if this value is a positive integer, the JSONP request will abort after the duration specified in the timeout option and fire again until the number of retries has been exhausted.
timeout - (integer; defaults to zero) the duration to wait before aborting a request or retrying.
injectScript - (mixed; defaults to document head) where to inject the script elements used for the calls
log - (boolean) if true, sends logging messages to Log (to console if it's defined). Defaults to false.

For example, should we want to search on Twitter once again, we can pass in our URL, the data for the query string, the callback and a function used for the callback. We can then create the Request.JSONP instance with our options and send our request.

var options = {
    url: 'http://search.twitter.com/search.json',
    data: { rpp: "100", q: "4sq.com" }
    callbackKey: "callback" 
    onComplete: 
        function(data) {
            $("results").set("html", data.results[0].text);
        }
};
var req = new Request.JSONP(options);
req.send();

We could also cancel our request as well should we need to by using the cancel function. Once again, the issue arises of composability as well as error handling. How could we integrate with key up events and throttle our request? Sooner or later when we start composing things together via callbacks, our code could walk right off the screen. Instead, RxJS could allow us some flexibility to compose events and AJAX calls together. To make this happen, we can wrap the API once again like we did with Dojo and jQuery, but this time we’ll take a different approach.

As before, we’ll create an AsyncSubject, which is used for asynchronous communication that happens once and then caches the value. Next, we need to handle both the success and error conditions by adding the functions load and error respectively to the options object. The load function simply passes the data where we call the subject’s OnNext with the data and then mark it as complete with the OnCompleted call. The error function simply is given an error object so that we can see what went wrong and act accordingly. Now what’s different between the two approaches is that we’re supporting a cancel option. If we should call Dispose on our subscription before the request is complete, we want to have the ability to cancel our request. To make this happen we’ll create a RefCountDisposable which allows us to cancel our request should we need to. And finally we’ll return a CompositeDisposable which takes the Disposable from the AsyncSubject and from the cancel together so that if one ends before the other, then we can continue with the second.

observable.MooToolsJSONPRequest = function(options) {

    var subject = new root.AsyncSubject();
    var request = null;
    
    try {
        options.onSuccess = function(html) {
            subject.OnNext(html);
            subject.OnCompleted();
        };
    
        options.onFailure = function(xhr) {
            subject.OnError({ kind: "failure", xhr: xhr });
        };
    
        options.onException = function(headerName, value) {
            subject.OnError({ kind: "exception", headerName: headerName, value: value });
        };
        
        request = new Request.JSONP(options);
        request.send();
    }
    catch(err) {
        subject.OnError(err);
    }
    
    var refCount = new root.RefCountDisposable(root.Disposable.Create(function() {
        if(request) {
            request.cancel();
        }
    }));
    
    return observable.CreateWithDisposable(function(subscriber) {
        return new root.CompositeDisposable(subject.Subscribe(subscriber), refCount.GetDisposable());
    });    
}

We can also extend the Request.JSONP class (and thanks for the assistance from Sebastian Markbåge) by using the implement function once again. We’ll create a toObservable function to implement this same functionality. There is a difference though that the options are private to the class. So, we can either use the setOptions function to set the options or since the Request.JSONP class inherits from the Events class, we can call addEvents directly to add properties for success, failure and exception cases.

Request.JSONP.implement({
   
    toObservable: function () {
        var subject = new root.AsyncSubject();
        var request = this;
        try {
            
            request.addEvents({
    
                success: function(data) {
                    subject.OnNext(data);
                    subject.OnCompleted();
                },
    
                failure: function(xhr) {
                    subject.OnError({ kind: "failure", xhr: xhr });
                },
    
                exception: function(headerName, value) {
                    subject.OnError({ kind: "exception", headerName: headerName, value: value });
                }
    
            });
            
            request.send();
        }
        catch (err) {
            subject.OnError(err);
        }
    
        var refCount = new root.RefCountDisposable(root.Disposable.Create(function () {
            request.cancel();
        }));
    
        return observable.CreateWithDisposable(function (subscriber) {
            return new root.CompositeDisposable(subject.Subscribe(subscriber), refCount.GetDisposable());
        });
    }        
});

Once we’ve implemented this, we’re able to redo example where we query Twitter for those who are posting to FourSquare and has geolocation turned on and get the maximum user ID and then print their text.

window.addEvent("domready", function() {
    var options = {
        url: "http://search.twitter.com/search.json",
        data: { rpp : "100", q : "4sq.com" },
        callbackKey: "callback"
    };

    new Request.JSONP(options)
        .toObservable()
        .SelectMany(
            function(data) {
                return Rx.Observable.FromArray(data.results);
            })
        .Where(
            function(result) {
                return result.geo != null;
            })
        .Max(
            function(result) {
                return result.from_user_id;
            })
        .Subscribe(
            function(result) {
                alert(result.text);
            },
            function(error) {
                alert("An error!" + error.description);
            });
});

You can find the complete MooTools integration here and will be available in the next release of RxJS.

Instead of this example where we go from MooTools to RxJS, we could also extend a number of classes to create an API totally in MooTools with RxJS underneath the covers. With this, we could implement behavior similar to that of Towel.js, an extension to MooTools for reactive programming.

Conclusion

One important aspect of the Reactive Extensions for JavaScript is how well we play with other frameworks. By giving out of the box extensions points, this allows for you to still use your framework of choice along with the Reactive Extensions to take care of the event-based and asynchronous behavior.

So with that, download it, and give the team feedback!

Introduction to the Reactive Extensions for JavaScript – Wrapping the Dojo API

Sat, 29 May 2010 01:43:00 GMT

Recently in some of the comments I’ve received (keep them coming BTW), I get questions about taking existing APIs and moving them towards using the Reactive Extensions for JavaScript (RxJS). How can we get away from constant callback hell and move towards composable asynchronous and event-based blocks instead? In this post, I’m going to walk through how we wrapped the Dojo Toolkit APIs to provide both event handling and AJAX functionality.

Before we get started, let’s get caught up to where we are today:

Wrapping Dojo Events

The first part of connecting the Dojo Toolkit to RxJS is by wrapping the eventing model. The Dojo Toolkit has the dojo.connect function which allows us to listen in on the execution of either DOM events or even function calls with a listener to be invoked when it is fired. Conversely, if we wish to stop listening, we can call dojo.disconnect to remove the listener. The connect method is as follows:

dojo.connect(
    obj, 
    event, 
    context, 
    method, 
    dontFix);

Each parameter is described below:

obj – the source object for the event function
event – the name of the event, such as “click”
context – the object that the listener will receive as “this”
method – a listener function to invoke when the event is fired
dontFit – prevent the delegation of this connection to the DOM event manager

And the connect function returns a handle for which we can use to disconnect. The disconnect function takes this handle for us to stop listening to the event.

dojo.disconnect(handle);

We can wrap these events by using the Rx.Observable.Create function which hands us an observer to use and then we return a disposable which allows us to disconnect our listener. Inside the Create function, we’ll create a handler which takes the event object from Dojo and passes it to the observer.OnNext. After we’ve defined the handler, we call connect with the parameters and we’ll pass in the handler as the method to invoke. That function returns to us a handle which we can then use to disconnect the listener. Finally, we return a function which is invoked when we call Dispose on our subscription. Below is a wrapped version called Rx.Observable.FromDojoEvent.

var fromDojoEvent = Rx.Observable.FromDojoEvent = 
    function(obj, event, context, dontFix) {
    
    return Rx.Observable.Create(function(observer) {
   
        // Handle on next calls
        var handler = function(eventObject) {
            observer.OnNext(eventObject);
        };
       
        // Connect and get handle for disconnecting
        var handle = dojo.connect(obj, event, context, handler, dontFix);
       
        // Return disposable used to disconnect
        return function() {
            dojo.disconnect(handle);
        };
    });
};

If we want to make it look and feel more like it belongs in Dojo itself, we could also alias it as dojo.connectAsObservable as we so wish. This part isn’t actually in the codebase just yet, but if the feedback is positive, then it can be.

dojo.connectAsObservable = function(obj, event, context, dontFix) {
    return fromDojoEvent(obj, event, context, dontFix);
};

Below is an example to connect to a given button and then listen for one out of every four clicks.

var obj = dojo.byId("someButton");

var sub1 = Rx.Observable.FromDojoEvent(obj, "click")
    .Sample(4)
    .Subscribe(function() { alert("Fourth click!"); });

// Or

var sub2 = dojo.connectAsObservable(obj, "click")
    .Sample(4)
    .Subscribe(function() { alert("Fourth click!"); });

Wrapping Callback Scenarios

Another part of an API we can wrap is around asynchronous behavior with callbacks, especially for such things as AJAX calls and effects. For this part, we’re going to cover taking the dojo.io.script.get function and creating an observable from it. The dojo.io.script.get function is an alternate IO mechanism to dojo.xhrGet that has the capability of doing cross-site data access by dynamically inserting a <script> tag into your web page. This mechanism also supports JSONP for named callback scenarios. Let’s look at the signature for the get function.

dojo.io.script.get = function(
    options);

The options takes the following properties:

url – The URL to request data
callbackParamName – The callback string used for JSONP
checkString – A type of check to ensure the script has been loaded. Not used in
preventCache – True to apply a unique parameter to prevent the browser from caching
content – A JavaScript object of key/value pairs for parameter names and values

For example, we can create the options much like the following:

var jsonpArgs = {
    url: "http://search.twitter.com/search.json",
    callbackParamName: "callback",
    content: { rpp: "100", q: "4sq.com" } };

In order to use the get function, we also have to ensure that we’ve reference the dojo.io.script module such as the following:

dojo.require("dojo.io.script");

Now we can get down to how we’d wrap the functionality. First, we’ll create an AsyncSubject, which is used for asynchronous communication that happens once and then caches the value. Next, we need to handle both the success and error conditions by adding the functions load and error respectively to the options object. The load function simply passes the data where we call the subject’s OnNext with the data and then mark it as complete with the OnCompleted call. The error function simply is given an error object so that we can see what went wrong and act accordingly. We can then call the get function with our options and then finally return our AsyncSubject.

Rx.Observable.FromDojoScriptGet = function(options) {
    // Create subject
    var subject = new Rx.AsyncSubject();
    
    // Handle success
    options.load = function(data) {
        subject.OnNext(data);
        subject.OnCompleted();
    };
    
    // Handle failure
    options.error = function(error) {
        subject.Error(error);
    };
    try {
        // Load the script
        dojo.io.script.get(newOptions);
    }
    catch (err) {
        subject.OnError(error);
    }
    
    return subject;        
};

This pattern applies to any callback scenario where we have one value to yield and then we want to cache it. And now we can query Twitter with the Reactive Extensions with Dojo underneath the covers. For example, we could query Twitter for those who are posting to FourSquare and has geolocation turned on and get the maximum user ID and then print their text.

dojo.addOnLoad(function() {

    var jsonpArgs = {
        url: "http://search.twitter.com/search.json",
        callbackParamName: "callback",
        content: { rpp: "100", q: "4sq.com" } };

    Rx.Observable.FromDojoScriptGet(jsonpArgs)
        .SelectMany(
            function(data) {
                return Rx.Observable.FromArray(data.results);
            })
        .Where(
            function(result) {
                return result.geo != null;
            })
        .Max(
            function(result) {
                return result.from_user_id;
            })
        .Subscribe(
            function(result) {
                alert(result.text);
            },
            function(error) {
                alert("An error!" + error.description);
            });
});

These two patterns for wrapping events and asynchronous operations doesn’t stop at Dojo, but also applies to the other frameworks out there including YUI3, Prototype, ExtJS, jQuery and so forth. For the AJAX calls, MooTools is different and we’ll get into that in the next post.

Conclusion

So with that, download it, and give the team feedback!

Talking Reactive Extensions

Fri, 21 May 2010 21:18:00 GMT

There has been a lot of movement around the Reactive Extensions lately and I thought I’d round them up for you in an easy to find location. Between the new release and various interviews, there’s a bit to cover.

New Release

Last Friday there was a release of the Reactive Extensions for both .NET and JavaScript for which the release notes can be found here. On the .NET side of the house, the biggest addition is the addition of IQbservable, which is short of IQueryableObservable. Just as IObservable is the mathematical dual of IEnumerable, IQbservable is the dual of IQueryable. Bart de Smet, of the Cloud Programmability Team, explains it in full detail in his Channel 9 white boarding sessions here.

On the JavaScript side of things, there were a few more items of note. This includes some additional bindings for Dojo, Ext JS, jQuery, MooTools, Prototype and YUI3. We ship the debug versions of these integrations so that you get an idea of how we did it, but just as well, how you could add more integration points yourself. One new integration point that I’m very excited about is the Raphael bindings. If you’re not familiar with Raphael, it is a JavaScript library for simplifying interaction with vector graphics on the web. I hope to cover more of that shortly on what it is and how we did it. Lastly, there have been quite a few new operators that have been added in the form of Case, DoWhile, If, For, Let and While. Each of these will be covered as well coming up. But by no means are we even close to being done!

JSConf

A few weeks ago, I, along with Jeffrey Van Gogh, attended the preeminent JavaScript conference, JSConf here in Washington, DC. There, we got to meet some of the best and brightest in the JavaScript community and share ideas, and in our case around event-based and asynchronous patterns in JavaScript. What was interesting was the talk breakdown between server side and client side JavaScript seemed about a 50-50 split, with a lot of focus on Node.js. Noticing this trend, Jeffrey presented in the B Track on the Reactive Extensions where he announced our bindings for Node.js. Rey Bango caught up with us on Sunday to talk to us about the Reactive Extensions for JavaScript which you can view here. Also, there was a great wrap-up of JSConf on Herding Code with the organizer, Chris Williams, Rey Bango and myself on Herding Code you might want to check out.

Overall, it was a great event and I’d highly recommend attending the upcoming JSConf.EU if you get the chance (although I hear it did sell out).

Interviews and More

As if you hadn’t heard enough already, we’ve had a few interviews on various podcasts where we dig into the Reactive Extensions for .NET and JavaScript.

With that, download the Reactive Extensions and give the team feedback!

Introduction to the Reactive Extensions for JavaScript – The Final Countdown Timer

Mon, 17 May 2010 22:56:00 GMT

In the previous couple of posts, I’ve talked about asynchronous method chaining and creating custom schedulers so I can repeatedly hit a data source for its data, transform it and then display the results. Instead of just setting a custom interval between the results and querying the system, so this time, I want to stick a timer where I can monitor the time between queries.

Before we get started, let’s get caught up to where we are today:

Creating Countdowns with GenerateWithTime

In previous posts, the goal was to repeatedly query a system with a given interval so that we could see what is going on in the world of Twitter. The goal of this post is to take this idea a step further to have a timer display how long we have until the system refreshes itself, and when the timer is exhausted, we requery and reset the timer. To do this, we’ll need to make use of the GenerateWithTime function. This function takes five parameters:

The initial state of the timer
The condition of the timer of whether to continue
The result selector which takes the state and you return what you want from it
The time selector which says how much time you want between calls
The iterate function which takes the state and increments it

Below is the signature of the GenerateWithTime function:

// initialState : State
// condition : State -> bool
// resultSelector : State -> Result
// timeSelector : State -> int
// iterate : State -> State

Rx.Observable.GenerateWithTime = function(
    initialState, 
    condition, 
    resultSelector, 
    timeSelector, 
    iterate);

Now that we have some clue on what it’s expecting, let’s go ahead and put it to some good use. What we’re going to do is create a timer that counts down from 90 seconds while setting the countdown element to the current value at each second interval. You’ll notice the initial state is set to 90, the condition is while the state is greater than or equal to zero, our time selector is one second and our iterate decrements the state by one.

function countdownUI() {
    return Rx.Observable.GenerateWithTime(
        90,
        function(x) { return x >= 0; },
        function(x) { return x; },
        function(x) { return 1000; },
        function(x) { return x - 1; })
        .Do(function(x) { $("#countdown").html(x); });
}

Our ultimate goal is to have something happen at the front end, such as query Twitter, count down from 90 seconds and then query again. To facilitate that need, I’ll create the updateUI function which queries Twitter and pulls the first record that matches and then displays the result in our content area.

function updateUI() {
    var url = "http://search.twitter.com/search.json?q=4sq.com&rpp=1";
    return $.getJSONAsObservable(url)
        .Select(function(d) { return d.data.results[0].text; })
        .Do(
            function(result) {
                $("#content").html(result);
            });
}

Once we’ve defined both our countdownUI and updateUI functions, let’s compose them together in such a way that it fires the updateUI, counts down to zero, then rinse and repeat. To make use of that, we must first defer the Twitter search until we’ve subscribed which allows us to repeatedly call it and have it requery. The Defer function is a static function which takes a function which takes no arguments and you must return an observable sequence.

// observableFactory : () -> Observable

Rx.Observable.Defer = function(
	observableFactory);

Then once we have deferred our UI update, then we need to add it on to our existing observable using Concat so that we count down to zero before repeating.

Rx.Observable.prototype.Concat = function (
	o1);

And once we Concat, we repeat it all over again to keep querying and counting down. We can now run our observable sequence by calling Subscribe with no arguments (since we’re not doing anything with the results).

$(document).ready(function() {
    Rx.Observable.Defer(function() { return updateUI(); })
        .Concat(countdownUI())
        .Repeat()
        .Subscribe();
});

Putting the code all together, we’re able to watch this in action where it queries Twitter for mentions of 4sq.com and displays the first result every 90 seconds.

You can find the entire code for this example here.

Side Note

Just as a side note, many of these scenarios that I’ve been doing for this series apply to the Reactive Extensions for .NET as well. For example, we could do something similar in C# that we had above. For example, we could have our two services, each of which return nothing (Unit in this case), but do their actions as a side effect instead.

IObservable<Unit> UpdateResults() 
{
    return SearchTwitter()
        .Select(data => data.results[0])
        .ObserveOnDispatcher()
        .Do(result => Item.Result = result)
        .Select(_ => new Unit());
}

IObservable<Unit> Countdown()
{
    return Observable.GenerateWithTime(
            90,
            time => time >= 0,
            time => time,
            _ => TimeSpan.FromSeconds(1),
            time => time - 1)
        .ObserveOnDispatcher()
        .Do(time => Item.Refresh = TimeSpan.FromSeconds(time))
        .Select(_ => new Unit());
}

And then we can listen much like before with our JavaScript example with complete parity between the two examples.

Observable.Defer(() => UpdateResults)
    .Concat(Countdown())
    .Repeat()
    .Subscribe();

The difference between the two is quite small, except for the observing on the dispatcher as well as making sure that our observable sequences have the same signature of IObservable<Unit>. In the JavaScript land, we don’t have to care since we’re dealing with a weakly typed dynamic language. Hopefully that’ll give you a bridge between the two worlds. In the future, I’ll make sure how to bridge the gap between the two worlds more often.

Conclusion

Dealing with asynchronous programming has been in the forefront of many minds in the JavaScript community. At JSConf, there were several examples of frameworks trying to get around the idea of callbacks and instead lean more towards composition. By utilizing the Reactive Extensions for JavaScript, we’re able to compose together asynchronous and event-based operations together and transform the results in interesting ways. One such example is querying a system and having a public countdown until the next refresh is going to be done. That’s just one of the many things you can do with RxJS.

So with that, download it, and give the team feedback!

Introduction to the Reactive Extensions for JavaScript – Custom Schedulers

Mon, 17 May 2010 22:53:00 GMT

In the previous post, I talked a little bit about asynchronous method chaining and extending jQuery in a fluent style to fetch tweets from Twitter and append them to a given element. This time I want to expand upon that post, instead of taking only one tweet, I want to take one hundred of them and then cycle through each of them at a given interval. In order to do that, I must make use of something that I alluded to in earlier posts, and that is a custom scheduler.

Before we get started, let’s get caught up to where we are today:

Custom Schedulers

Another variation on a theme from our last post could be to take instead of just one tweet, but instead, take 100 of them and then fade each one out in turn by a specified interval. To do this, we’ll have to make use of a custom scheduler. To create a scheduler, we need three parameters, a schedule, a schedule with time and a now parameter. The schedule parameter provides an implementation function to the scheduler that runs an action at the scheduler’s convenience. The schedule with time parameter provides an implementation function to the scheduler to schedule the given action at the specified time from now. Finally, we provide a now function which provides an implementation function to the scheduler with the timer’s notion of the current time.

// schedule : action -> disposable
// scheduleWithTime : action -> due time -> disposable
// now : () -> time

Rx.Scheduler = function(
    schedule,
    scheduleWithTime,
    now);

With this new found knowledge, we can create our own custom scheduler which takes a delay in milliseconds to create a scheduler. We can create our Rx.Scheduler by passing in our three functions, the schedule, the schedule with time and the notion of now. Let’s break each function parameter down one by one.

The schedule function takes a given action and then makes a call to window.setTimeout with our action and our delay which allows us to evaluate the action after the given span. We then return a Disposable which then gives us the ability to cancel the timeout with our given id from our setTimeout should we need to.

function(action) {
    var id = window.setTimeout(action, delay);
    return Rx.Disposable.Create(function() { 
        window.clearTimeout(id); });
},

The schedule with time function takes given action and a due time, and like before, it makes a call to window.setTimeout but this time with the action and the given due time. And just as before, we create a Disposable to allow us to clean up and cancel the timeout should we need to.

function(action, dueTime) {
    var id = window.setTimeout(action, dueTime);
    return Rx.Disposable.Create(function() { 
        window.clearTimeout(id); });
},

Finally, the now parameter takes no arguments and we’ll simply return the current time.

function() {
      return new Date().getTime();
});

When we put these together we can create our custom DelayedScheduler such as the following:

var delayedScheduler = Rx.DelayedScheduler = function(delay) {

     return new Rx.Scheduler(
        function(action) {
            var id = window.setTimeout(action, delay);
            return Rx.Disposable.Create(function() { 
                window.clearTimeout(id); });
        },
        function(action, dueTime) {
            var id = window.setTimeout(action, dueTime);
            return Rx.Disposable.Create(function() { 
                window.clearTimeout(id); });
        },
        function() {
            return new Date().getTime();
        });
};

Now that we’ve defined our custom scheduler, it’s time to put it to use. What we’re going to do is take the array of our tweets from Twitter and put the delay between them. To do that, we’ll make use of the Rx.Observable.FromArray method which takes not only the array we want to turn into an observable, but also a custom scheduler should we need one. We’ll create an extension to the Array class which allows us to turn our arrays easily into observables.

Array.prototype.toObservable = function(scheduler) {
    return Rx.Observable.FromArray(this, scheduler);
}

Once the extension has been defined, let’s do something useful with it. We’ll take the approach once again from the previous post to get tweets, but this time, we’ll take the maximum we can, which is 100 and then space each one out accordingly, and then rinse and repeat after we’ve exhausted our 100 tweets. In our subscription, we’ll fade in and fade out our text as we append it to the content to give ourselves a rolling feel to it.

var url = "http://search.twitter.com/search.json?q=4sq.com&rpp=100";
var customScheduler = new Rx.DelayedScheduler(5000);

$.ajaxAsObservable({
            url: url,
            type: "get",
            dataType: "jsonp",
        })
    .SelectMany(
        function(d) {
            return d.data.results.toObservable(customScheduler);
        })
    .Repeat()
    .Subscribe(
        function(result) {
            $("<p/>")
                .fadeTo(1000, 1.0)
                .html(result.text)
                .fadeTo(1000, 0.1)
                .appendTo("#content");
        });

When we fire up our browser of choice we can see the fruits of our labor such as the following with proper spacing between the two and nice effects fading in and out.

And there you have it, using a custom scheduler to take data we already have and spread it out over time. The idea here is to not tax the remote server, but instead query the system once, display all the results and then hit the server again once we’ve exhausted the data source. You can find the complete example of this code here.

Conclusion

Dealing with asynchronous programming has been in the forefront of many minds in the JavaScript community. At JSConf, there were several examples of frameworks trying to get around the idea of callbacks and instead lean more towards composition. By utilizing the Reactive Extensions for JavaScript, we’re able to compose together asynchronous and event-based operations together and transform the results in interesting ways. For example, we can query a system for the data, space it out over time and then requery the system for more as we need it. That’s just one of the many things you can do with RxJS.

So with that, download it, and give the team feedback!

Introduction to the Reactive Extensions for JavaScript – Async Method Chaining

Tue, 11 May 2010 04:40:00 GMT

Recently, there was a blog post by Dustin Diaz about method chaining over asynchronous operations. This topic, of course is near and dear to my heart as it strikes the exact chord of what the Reactive Extensions for JavaScript (RxJS) is trying to solve. The ability for us to take asynchronous operations and events and treat them as push collections, we are able to then compose functions together as if they were normal pull collections like arrays. In this post, I’ll walk through the example that was posted on Dustin’s site and show how it can be done using RxJS.

Before we get started, let’s get caught up to where we are today:

Asynchronous Method Chaining

To show off some of the power of the Reactive Extensions for JavaScript, let’s take the example of creating a paragraph, populating it from a single tweet from Twitter, adding a class and finally appending it to a div element. Just as well, we want to optionally give you a way to gracefully handle errors should the data source not be available. And when has that ever happened to Twitter, I mean really??!!

$("<p/>")
    .fetch("http://search.twitter.com/search.json?q=4sq.com&rpp=1")
    .addClass("loading")
    .appendTo("#content");
    
// Or
var errHandler = function(exn) {
    // Do something with the exception
}

$("<p/>")
    .fetch("http://search.twitter.com/search.json?q=4sq.com&rpp=1", errHandler)
    .addClass("loading")
    .appendTo("#content");

This is fairly simple to do through the use of a little jQuery and RxJS knowledge. First, we’ll extend the jQuery fn with a function called fetch which takes a URL and an optional onError handler which is a function that takes an exception and returns no value. Depending on whether the error handler was supplied or not, we’ll create an observer from the onNext which sets the tweet into the innerHTML of the jQuery selector. We’ll then call the ajaxAsObservable extension which comes with RxJS to turn the ajax function into an observable, and subscribe with our observer. Finally, we return the context of the selector as the result of the function which allows us to continue chaining calls.

(function($) {

    $.fn.fetch = function(url, onError) {
        var collection = this;

        var onNext = function(d) { 
            $(collection).html(d.data.results[0].text); 
        }
        
        var observer = onError ? Rx.Observer.Create(onNext, onError) : onNext;

        $.ajaxAsObservable({
            url: url,
            type: 'get',
            dataType: 'jsonp',
        })
            .Subscribe(observer);

        return this;
    };

})(jQuery);

That’s a fairly simple scenario for using this, so, how about something a bit more complex like fetching the results at a given interval? We could then create a function called fetchEvery which takes a specified interval to call the AJAX service and populate the selector by using the Interval method with our desired interval.

$.fn.fetchEvery = function(url, interval, onError) {
    var collection = this;

    var onNext = function(d) { $(collection).html(d.data.results[0].text); }
    var observer = onError ? Rx.Observer.Create(onNext, onError) : onNext;

    Rx.Observable.Interval(interval)
        .Select(function() {
            return $.ajaxAsObservable({
                url: url,
                type: 'get',
                dataType: 'jsonp',
            }); })
        .Switch()
        .Subscribe(observer);

    return this;
};

And then we could use it much like the following where we fetch the results every 5 seconds.

$("<p/>")
    .fetchEvery("http://search.twitter.com/search.json?q=4sq.com&rpp=1", 5000)
    .addClass("loading")
    .appendTo("#content");

But what about further transforming the data as it comes back, such as the example of censoring the swear words and create links from the text? Well, instead of living inside jQuery and sprinkling in RxJS like we have been doing for the past couple of examples, we can then decide that instead we’ll live inside RxJS and sprinkle in jQuery. We’ll create functions to censor the text, linkify it, handle any exceptions and finally handle the text as it comes in so that we can add it to the content.

function handleText(text) {
    $("<p/>").html(text).addClass("loading").appendTo("#content");
}

function errHandler(exn) {
    // handle exception
}

function censorTweet(uncensored) {
    // handle censoring
}

function linkify(tweet) {
    // linkify tweet
}

$(document).ready(function() {

    $.ajaxAsObservable({
        url: "http://search.twitter.com/search.json?q=4sq.com&rpp=100",
        type: "get",
        dataType: "jsonp",
    })
        .Select(function(d) { return d.data.results[0].text; })
        .Select(censorTweet)
        .Select(linkify)
        .Subscribe(handleText, errHandler);
});

This gives us the ability now to get the data from Twitter, censor it if necessary, create real links from the text, and finally put the results into our content in a fluent style while mixing in jQuery where we need to. Just as well, I could have used any other library including Dojo, ExtJS, YUI, Prototype, Moo Tools or whatever I felt like, so I’m not particularly tied here to a certain library and I get the same win from each.

Conclusion

Dealing with asynchronous programming has been in the forefront of many minds in the JavaScript community. At JSConf, there were several examples of frameworks trying to get around the idea of callbacks and instead lean more towards composition. By utilizing the Reactive Extensions for JavaScript, we’re able to compose together asynchronous and event-based operations together and transform the results in interesting ways. We can also live well inside the given frameworks such as jQuery and sprinkle in RxJS, or we can live in RxJS and sprinkle in the calls to the various libraries such as jQuery, Moo Tools, Prototype, and so forth.

So with that, download it, and give the team feedback!

Introduction to the Reactive Extensions for JavaScript – Refactoring a Game

Tue, 04 May 2010 23:29:00 GMT

We’ve covered a lot of ground so far in this series including a lot of the combinators as well as the integration into third party libraries. Most of these examples have been from a green field mindset where we have an idea and then walk through how you would accomplish it using the Reactive Extensions for JavaScript (RxJS). This time, we’re going to take a game that’s already been written and take parts of it and migrate it to use RxJS.

Before we get started, let’s get caught up to where we are today:

Refactoring Pong

During this series, I’ve been asked to take examples from other sources and show how those ideas can be expressed using RxJS. In this series, I’m going to take an existing game from an article entitled “An Introduction to Game Programming with JavaScript” where the pong example is written in plain ol’ JavaScript and involves some events and callback scenarios. What I will do is take this example and walk through step by step how to think differently about the application and how RxJS, with the addition of jQuery, can help. After all, just sprinkling in a little jQuery everywhere can’t hurt, right? Even for the simple case of adding two numbers together…

Anyhow, let’s start with the beginning to understand how this application works. We have a simple page with a paddle and a ball and a place to display the score.

<body onLoad="init()">
    <h1>Rebound</h1>
    <div id="playingArea">
        <div id="paddle">
            <img src="paddle.gif">
        </div>
        <div id="ball">
            <img src="ball.gif">
        </div>
        <div id="score">
            Score: 0
        </div>
    </div>
</body>

As you may notice, we have a body.onLoad defined which calls in init function. This init function initializes the elements for the paddle, ball and score, registers the event handler for the keydown event and then starts the main loop.

function init(){
    //instantiate HTML object instance vars
    ball = document.getElementById('ball');
    paddle = document.getElementById('paddle');
    score = document.getElementById('score');
    //register key listener with document object
    document.onkeydown = keyListener;
    //start the game loop
    start();
}

Let’s refactor this a little bit so that we use jQuery selectors, as well as refactoring how the keydown events are handled. You’ll notice we created a function to initialize our handlers which I’ll cover shortly.

$(document).ready(function() {

    ball = $("#ball");
    paddle = $("#paddle");
    score = $("#score");
    
    initializeHandlers();
    
    start();
}

Previously, we hooked our keydown event handlers on our document by using the keyListener function. This function listened for either the left or right arrow and then moved the paddle appropriately by four pixels depending on the direction desired.

function keyListener(e){
  if(!e){
      //for IE
      e = window.event;
  }
  if(e.keyCode==37 && paddleLeft > 0){
      //keyCode 37 is left arrow
      paddleLeft -= 4;
      paddle.style.left = paddleLeft + 'px';
  }
  if(e.keyCode==39 && paddleLeft < 436){
      //keyCode 39 is right arrow
      paddleLeft += 4;
      paddle.style.left = paddleLeft + 'px';
  }
}

Instead, what we’re going to do is separate the concerns of each key, the left and right arrow, into different observables and then when we subscribe, we modify the location of the paddle in the appropriate direction. To do this, we’ll get the keyDown observable by taking our document and calling toObservable. Then for the left arrow handler, we’ll filter out all keys but the left arrow while we’re still in bounds, and then in the Subscribe, we move the paddle to the left by 4 pixels. The same applies to the right arrow as well, but the difference is that we move the paddle to the right by 4 pixels.

function initializeHandlers() {
    var keyDown = $(document).toObservable("keydown");
    
    // Left arrow
    keyDown
        .Where(
            function(ev) { 
                return ev.keyCode===37 && paddleLeft > 0; 
            })
        .Subscribe(
            function() {
                paddleLeft -= 4;
                paddle.css("left", paddleLeft + "px");
            });

    // Right arrow
    keyDown
        .Where(
            function(ev) { 
                return ev.keyCode===39 && paddleLeft < 436; 
            })
        .Subscribe(
            function() {
                paddleLeft += 4;
                paddle.css("left", paddleLeft + "px");
            });
        
}

Next, let’s look at the overall game loop. This sets the ball in motion so that we can react with our paddle to ensure that we hit it and continue the game until we miss and the game ends. This function first detects if there are collisions, then renders our movement and then increases the difficulty of the game (hint: the ball moves faster). If by the end of this, the ball is still in play, then we wait for 50 milliseconds and then start the loop all over again, else we say that the game is over.

function start() {
    //game loop
    detectCollisions();
    render();
    difficulty();
    
    //end conditions
    if(ballTop < 470){
        //still in play - keep the loop going
        timer = setTimeout('start()',50);
    }
    else {
        gameOver();
    }
}

Now when it comes to porting this to the Reactive Extensions for JavaScript, we have to turn the problem on its ear a little bit. What are we doing anyways? At specified intervals, we’re doing a certain action which modifies our environment while our ball is in play and if it somehow isn’t, we end the game. And just as easily as I described it above, we can write this in RxJS. First, we start out at an interval of 50 milliseconds by calling Rx.Observable.Interval, and at each interval, we want to perform some actions, like detecting collisions and so forth that we did above. We can accomplish that with the Do function which handles those three function calls. Now we need to check if we’re still in bounds, so we can use the TakeWhile function to specify what is in bounds, and in this case, the top of the ball is less than 470. And finally, once our TakeWhile no longer returns true, we’ll want to end the game, and we can do that by using the Finally function to invoke the gameOver function.

function start() {
    //start the game loop
  Rx.Observable.Interval(50)
      .Do(
            function() {
              detectCollisions();
              render();
              difficulty();
          })
      .TakeWhile(function() { return ballTop < 470; })
      .Finally(function() { gameOver(); })
      .Subscribe();
}

And there you have it, we can react just the same as we did above, although we did tack on an additional 50 ms to the front end. I’ll cover more of how we can use RxJS to break the problem into smaller building blocks and using the combinators of RxJS, put it back together.

Conclusion

What we’re able to do now is to break our problems into logical pieces and by using the Reactive Extensions for JavaScript functions, we can glue them together to create composable solutions. At some points, it can be a little difficult, just as it was for many to move from imperative looping over collections to declarative composable actions over these collections, but the reward is just as great.

So with that, download it, and give the team feedback!

Introduction to the Reactive Extensions for JavaScript – Going Parallel with ForkJoin

Fri, 23 Apr 2010 21:17:00 GMT

This past week there was a new release of the Reactive Extensions for JavaScript which includes many of the changes I’ve been talking about lately including the third-party library integration, aggregates and joins which I covered in the previous posts. This time, I’m going to look at how we can run some observable sequence using the fork/join pattern in JavaScript, to attain some cooperative multi-tasking.

Before we get started, let’s get caught up to where we are today:

Going Parallel with ForkJoin

One common asynchronous pattern that is often used is called fork/join where we start with a specified number of tasks and later we join together all the work. Let’s first take a look at a simple model of what we’re trying to do. Say we want to have the ability to load a few scripts in JavaScript? Typically, we’d have an array of sources we want to visit and then we’d process each in turn and then return the overall result as an array.

var results = [];
var urls = [url1, url2, url3];

for(var task in tasks) {
    results.push(loadScript(tasks[task]));
}

The problem with this approach is that it is a blocking scenario in that we must wait for each one to execute in turn, so the browser can do nothing else in the mean time. Just as well, each of our operations do not depend on the other, so we could, hypothetically, run them in cooperation with each other if we had a good way of doing so. This would easily qualify as an embarrassingly parallel solution.

But how do we do it? After all, we want to run these as non-blocking calls and we want to run them in parallel. With the asynchronous behavior, that brings any number of issues such as error handling, cancellation checking and so forth. Luckily, with the Reactive Extensions for JavaScript, we have that part covered with the ability to compose asynchronous operations together. But, what about running them in parallel? That’s where the function ForkJoin comes into play.

The ForkJoin function in the Reactive Extensions for JavaScript allows us to take all observable sequences and run them in a cooperative fashion and return their first values in an array. This function takes a variable amount of arguments, depending on how many observable sequences you have.

Rx.Observable.ForkJoin = function(
    obs1,
    ...
    obsx);

Just as well, in a future version that is not out yet as of this writing will also support an array as the first argument such as:

Rx.Observable.ForkJoin = function(
    observableArray);

Now, let’s run through a quick example of using ForkJoin. In this example, I’m going to check the flight status of a given number of flights, in case I have to coordinate a bunch of people coming into town. To do this, I can use the Bing Instant Answer API to do that and return the answers in JSON format.

function flightStatus(flight) {
    var serviceUrl = "http://api.bing.net/json.aspx";

    return $.getJSONAsObservable(
        serviceUrl,
        { appId : appId,
          Query : flight,
          Sources : "InstantAnswer",
          Market : "en-us",
          Version : "2.2" })
        .SelectMany(
            function(d) {
                return d.data.SearchResponse.InstantAnswer.Results.toObservable();
            });

}

Once we’ve defined our function to get the flight status, let’s start with a few flight numbers.

var flights = ["UA123","UA124","UA125"];

Now, we need to take those flight numbers and then turn them into observable sequences by using the jQuery map function which takes the sequence and applies a function to each element.

var flightsAsObservables = $.map(flights, function(flight) { 
    return flightStatus(flight); })

And now we can call ForkJoin to run these in parallel and return them in the order in which we sent them. We’ll then iterate over the array of results and output the departure and arrival airport and associated times.

Rx.Observable.ForkJoin(flightsAsObservables)
    .Subscribe(function(results) {

        $.each(results, function(_,result) {
            var status = result.InstantAnswerSpecificData.FlightStatus;

            $("#translatedText")
                .append("<li>Flight: "+ status.FlightName +
                    " from " + status.OriginAirport.Name +
                    " to " + status.DestinationAirport.Name +
                    " departs at " + status.ScheduledDeparture +
                    " arrives at " + status.ScheduledArrival + "</li>");

        });
    });

And there you have it, we’re now able to run computations in a cooperative multi-tasking environment and return the result as an array, and in this case, getting the flight schedules for a number of flights we wish to track.

Conclusion

Using the Reactive Extensions for JavaScript, we’re able to run observable sequences together and get the result as an arry using a well defined pattern of fork/join in JavaScript. That’s just one of the many things we can do with it that I’ll hopefully cover more in the near future. So, download it, and give the team feedback!

[ANN] DC ALT.NET – 4/27/2010 – What has Mono done for the .NET developer lately?

Tue, 20 Apr 2010 19:25:00 GMT

As of late I haven’t posted the DC ALT.NET meetings here and instead have kept them to the Yahoo Groups mailing list. But this month’s topic is worth sharing in that we’re going to cover everything Mono related with a member of the Mono Team, Jackson Harper.

If you’re not familiar with Mono, it is an open-source, cross-platform implementation of the .NET framework based on the ECMA standards for C# and the Common Language Infrastructure. With Mono, users can run .NET applications written and compiled in Visual Studio on Windows, Linux, and Mac OS X. This session will provide an introduction to cross-platform development and deployment with Mono. Participants will see how they can leverage their existing skills and tools to write .NET applications that will run on multiple platforms and architectures with Mono. The presentation will also include a discussion of cross-platform considerations for leveraging Mono, and demonstrate how to use MoMA, the Mono Migration Analyzer, to determine how ready an application is for cross-platform deployment. Additional demonstrations will examine how best to leverage Visual Studio to develop and deploy to Linux and OS X, and take a peek at the current state of Moonlight 3 and 4.

Hope to see you there!

Introduction to the Reactive Extensions for JavaScript – New Release and Joins

Tue, 20 Apr 2010 03:07:00 GMT

This past week there was a new release of the Reactive Extensions for JavaScript which includes many of the changes I’ve been talking about lately including the third-party library integration, aggregates which I covered in the previous posts, and joins which is the subject of today’s post.

Before we get started, let’s get caught up to where we are today:

Joins

When we talk about joins in the Reactive Extensions for JavaScript, and for that matter in the .NET version as well, we’re not talking about the kind that we find in LINQ to Objects which matches two sequences on a given key. Instead, what we’re talking about is to define some complex synchronization patterns between multiple event sources where we create composite events based upon combinations of other events. In the Reactive Extensions for JavaScript, there is an implementation of Join calculus over observable sequences which allows for us to create a set of patterns that match based upon which notifications come in.

Rx.Observable.Join = function(
    one to many plans);

So, that brings us to the point, what is an execution plan exactly and what does it look like? Well, an execution plan consists of a pattern of two functions, an And function and Then function. Let’s first take a look at the And function, which matches when all observable sequences have a value.

Rx.Observable.And = function(
    other); // The other observable to match

We can then follow this And with the Then function which matches when all observable sequences have their value available and then projects its value to another structure.

Rx.Observable.Then = function(
    selector); // Projects the match value

Let’s create a simple example to show how this works. In this example, we’ll listen for certain keys and when both of them are pressed in any given order, then we’ll bubble up and event. We’ll listen to the keyup event and check for the C and O characters in the respective observable collections.

var cKey = $("#textBox")
    .toObservable("keyup")
    .Where(function(key) { 
        return String.fromCharCode(key.keyCode) === "C"; });
        
var oKey = $("#textBox")
    .toObservable("keyup")
    .Where(function(key) { 
        return String.fromCharCode(key.keyCode) === "O"; });

Next, we’ll create a pattern which will fire when the combination of C and O has been fired by using the Rx.Observable.Join function. Inside the Join function, we’ll create a pattern of the cKey and the oKey together, and then project those two events together to return a string indicating it fired.

var keyJoin = Rx.Observable.Join(
    cKey.And(oKey).Then(function(c, o) { return "CO pressed!"; }));

Then we can subscribe to the results of this join to alert when I’ve typed the letters C and O in the textbox. Note that the two keys don’t have to be in a certain order and there can be keys in between.

keyJoin.Subscribe(function(event) { alert(event); });

We can extend this example to add another pattern in which we listen for the letters D and E in our textbox and fire a different notification. To make that happen, we simply add another pattern to the Join method. We can add as many Join patterns as we wish to get the right behavior our application needs.

var dKey = $("#textBox")
    .toObservable("keyup")
    .Where(function(key) { 
        return String.fromCharCode(key.keyCode) === "D"; });
        
var eKey = $("#textBox")
    .toObservable("keyup")
    .Where(function(key) { 
        return String.fromCharCode(key.keyCode) === "E"; });
        
var keyJoin = Rx.Observable.Join(
    cKey.And(oKey).Then(function(c, o) { return "CO pressed!"; }),
    dKey.And(eKey).Then(function(d, e) { return "DE pressed!"; }));        
    
keyJoin.Subscribe(function(event) { alert(event); });

Let’s look at another example, this time let’s take an example where we have three pending transactions, but only really care if two of them succeed. In this case, we’ll port one of Erik’s Microsoft Translator examples where those transactions will be going to the Microsoft Translator and then translating a given sentence into three languages, but we only care if two returns and we don’t care which. Let’s first start off by defining our translate function using the integration with jQuery and the Reactive Extensions for JavaScript to translate some text from one language to another.

function translate(from, to, text) {
    var appId = "someappid";
    var serviceUrl = "http://api.microsofttranslator.com/V2/Ajax.svc/Translate";

    return $.getJSONAsObservable(
        serviceUrl,
        { appId : appId,
          from : from,
          to : to,
          text : text });
}

Now we’re going to kick off the action when our translate button has been clicked.

$("#translateButton")
    .toObservable("click")
    .Subscribe(function() {

Then we’re going to get the text and call the translate in the three different languages, Dutch, Spanish and French.

var text = $("#textToTranslate").val();

// Let's do some translating!
var from = "en";
var dutch = translate(from, "nl", text);
var spanish = translate(from, "es", text);
var french = translate(from, "fr", text);

Now comes the interesting part of the post. In order for us to check for any two of our language translations to complete, we need three different execution plans, one for Dutch and Spanish, another for Dutch and French and finally one for Spanish and French. To create those execution plans, we’ll take our first translation observable and call And, passing in the other translation observable, and then finally call the Then function which projects the first and second language. In the Then function, we’ll project a structure which contains properties for all three languages but two get the translation and the other gets a failure message.

// Joins
var fail = "FAIL!";
var results = Rx.Observable.Join(
    dutch.And(spanish).Then(function(d, s)  { 
        return { dutch : d.data, spanish : s.data, french : fail };}),
    dutch.And(french).Then(function(d, f)   { 
        return { dutch : d.data, spanish : fail, french : f.data};}),
    french.And(spanish).Then(function(f, s) { 
        return { dutch : fail, spanish : s.data, french : f.data};}));

Now that we created this set of patterns, we can then subscribe via the aptly named Subscribe method which passes our structure with the properties for all three languages. We’ll take that structure and print out the value of each translation, whether it succeeded or not.

results.Subscribe(function(result) {
    $("#spanish").html("Spanish: " + result.spanish);
    $("#french").html("French: " + result.french);
    $("#dutch").html("Dutch: " + result.dutch);
});

Now, let’s take our code and check it out in the browser. Once I enter a phrase I wish to translate and click the Translate! button, you can see that both Spanish and Dutch return their value, but French does not.

And then I could press the button again, and sure enough, this time Spanish fails while both Dutch and French translations return a proper value.

So, as you can see, this gives us some pretty interesting possibilities to create execution plans

Conclusion

As you can see, with the Aggregates library addition of the Reactive Extensions for JavaScript, we have yet another tool in our belt for handling our data. That’s just one of the many things we can do with it that I’ll hopefully cover more in the near future. So, download it, and give the team feedback!

Introduction to the Reactive Extensions for JavaScript – Aggregation Part 2

Thu, 15 Apr 2010 02:08:00 GMT

So far we’ve come a long way in this series on the Reactive Extensions for JavaScript, starting with some of the basics, and then going deeper with composition with such things as the Bing Maps and Twitter Mashup, Drag and Drop, asynchronous programming among others. In the previous post, we talked about separating our concerns between the base functionality, DOM events and third-party library integration. This time, let’s follow onto our last post which started talking about the Aggregates library of the Reactive Extensions for JavaScript

Before we get started, let’s get caught up to where we are today:

Aggregation Operators

In the initial release of the Reactive Extensions for JavaScript, you may have noticed there was a lack aggregation operators. By aggregation operators I mean those which require us to iterate over the collection with some sort of accumulated value to produce a final answer. The Reactive Extensions for JavaScript have included a number of operators which we’ll go through one by one including:

Aggregate
Any
All
Contains
Count
Sum
Average
Final
Min/MinBy
Max/MaxBy

To use these, simply add a reference to the Rx.aggregates.js library like the following:

<script src="rx.aggregates.js" type="text/javascript"></script>

Now to cover some of the functions. We’ll start with the Contains function, picking things up where we left off last time.

Contains

The first method we’ll cover is the Contains function, which determines whether a given observable sequence contains the item, and optionally with a comparer which allows us to compare values for equality.

Rx.Observable.Contains = function(
    value,     // Value to locate in the sequence
    comparer); // Optional comparer to compare values

If you fail to include a comparer, the default comparer used looks like the following:

var defaultComparer = function(a, b) { 
    return a === b 
};

In this example, I’ll have an observable collection of employees and I wish to check whether Bob is an employee. In this case, I’ll provide a comparer which checks the name property on our object for equality.

Array.prototype.toObservable = function() {
    return Rx.Observable.FromArray(this);
}

var employees = [{ name : "Bob", age : 30 },
                 { name : "Billy", age : 32 }]

employees.toObservable()
    .Contains({ name : "Bob" }, 
        function(a, b) { return a.name === b.name; })
    .Subscribe(function(contains) {
        $("#result").html("Contains Bob?: " + contains);
    });

This of course produces that it can in fact find an employee named Bob in the collection. Moving on to the next function, Count.

Count

The count function in the Reactive Extensions for JavaScript simply returns the number of items in our observable collection. The signature of this method is as follows:

Rx.Observable.Count = function();

As an example, we can take an array of numbers, get the distinct values, count them and display the results.

var factors = [ 2, 2, 3, 5, 5 ];

factors
    .toObservable()
    .DistinctUntilChanged()
    .Count()
    .Subscribe(function(count) {
        $("#result").html("Distinct factors: "+count);
    });

This then gives us the result of 3 distinct factors as shown below.

Distinct factors: 3

Next up, we’ll talk about the Sum function.

Sum

This rather self-explanatory method simply computes the sum of all items in the observable collection. As JavaScript is a dynamic language, this method supports anything that supports the + operator, typically integers and doubles, although oddly enough it does work for strings (which is not recommended). The signature of the function is as follows:

proto.Sum = function();

In this example, we’ll simply take some floating point numbers and sum them together.

var numbers = [ 25.78, 5.72, 1.5, 3.2 ];

numbers
    .toObservable()
    .Sum()
    .Subscribe(function(summed) {
        $("#result").html(summed);
    });

And the result of our action then puts the 36.2 into the result div element.

36.2

Next, we’ll tackle the Average function.

Average

Just as you’d expect, we have the Average function which does as you expect, averages numbers. This function takes no arguments and simply returns the average.

Rx.Observable.Average = function();

We can take our above example and instead of summing the values, this time we’ll average them.

var numbers = [ 25.78, 5.72, 1.5, 3.2 ];

numbers
    .toObservable()
    .Average()
    .Subscribe(function(average) {
        $("#result").html(average);
    });

Which then yields the result of:

9.05

Moving on, let’s talk about the Final method.

Final

The aptly named Final method gives us the ability, much like the Last method in LINQ to Objects, to retrieve the final value from the observable sequence. The signature of this method is as follows:

Rx.Observable.Final = function();

Moving away from our same numbers example we had from above, instead we can turn our attention to Twitter and more in particular, FourSquare users. In this example, I’ll search Twitter for 4sq in their tweet, take the results array and split each one into its own observable sequence and then get the last one and display the text.

var term = "4sq";
var url = "http://search.twitter.com/search.json";

$.getJSONAsObservable(url, { rpp : 100, q : term })
    .SelectMany(function(d) { 
        return d.data.results.toObservable(); })
    .Final()
    .Subscribe(function(final) {
        $("#result").html(final.text);
    });

Let’s move on to our last two functions, Min and Max.

Min

The next function, which should also look familiar to LINQ to objects users is the Min function. This function, which optionally takes a key selector and min comparer, computes the minimum value in the sequence.

Rx.Observable.Min = function(
    keySelector, // Optional key selector 
    comparer);   // Optional min comparer

If a comparer is not provided, the default comparer uses the standard less than operator.

comparer = function(current, key) { 
    return key < current; 
};

To put this one to the test, let’s search Twitter again, this time, let’s look for the minimum user ID in this batch of tweets. We’ll use the JSON jQuery integration with the Reactive Extensions for JavaScript, extract the results and then return the minimum by the from_user_id property.

$(document).ready(function() {

var term = "4sq";
var url = "http://search.twitter.com/search.json";

$.getJSONAsObservable(url, { rpp : 100, q : term })
    .SelectMany(function(d) { 
        return d.data.results.toObservable(); })
    .Min(function(result) { 
        return result.from_user_id; })
    .Subscribe(function(min) {
        $("#result").html(min.from_user_id+" "+min.text);
    });

Finally, we come to the Max function.

Max

The Max function is the inverse of the Min function and allows us to calculate the maximum value in our observable sequence. Optionally, we can give a key selector and a max comparer.

proto.Max = function(
    keySelector, // Optional key selector
    comparer);   // Optional max comparer

If a max comparer is not provided, the default should work just fine.

comparer = function(current, key) { 
    return key > current; 
};

In our last example, let’s look for the maximum Twitter user ID that someone is responding to. Much like above we’ll use the jQuery integration with the Reactive Extensions for JavaScript to get the JSON data, we’ll then filter by whether there is a person the user is responding to, and then get that max value of that user ID.

var term = "4sq";
var url = "http://search.twitter.com/search.json";

$.getJSONAsObservable(url, { rpp : 100, q : term })
    .SelectMany(function(d) { return d.data.results.toObservable(); })
    .Where(function(result) { return result.to_user_id != null; })
    .Max(function(result) { return result.from_user_id; })
    .Subscribe(
        function(min) {
            $("#result").html(min.from_user_id+" "+min.text); });

And there you have it, the complete set of operators handled in the aggregates library for the Reactive Extensions for JavaScript.

Conclusion

What can I say? I love JavaScript and very much looking forward to the upcoming JSConf 2010 here in Washington, DC where the Reactive Extensions for JavaScript will be shown in its full glory with Jeffrey Van Gogh (who you can now follow on Twitter). For too many times, we’ve looked for the abstractions over the natural language of the web (HTML, CSS and JavaScript) and created monstrosities instead of embracing the web for what it is. With libraries such as jQuery and indeed the Reactive Extensions for JavaScript gives us better tools for dealing with the troubled child that is DOM manipulation and especially events.

Introduction to the Reactive Extensions for JavaScript – Aggregation Part 1

Wed, 14 Apr 2010 05:49:00 GMT

So far we’ve come a long way in this series on the Reactive Extensions for JavaScript, starting with some of the basics, and then going deeper with composition with such things as the Bing Maps and Twitter Mashup, Drag and Drop, asynchronous programming among others. In the previous post, we talked about separating our concerns between the base functionality, DOM events and third-party library integration. This time, let’s look at another separation which comes in the form of aggregates.

Before we get started, let’s get caught up to where we are today:

Aggregation Operators

Aggregate
Any
All
Contains
Count
Sum
Average
Final
Min/MinBy
Max/MaxBy

To use these, simply add a reference to the Rx.aggregates.js library like the following:

<script src="rx.aggregates.js" type="text/javascript"></script>

Now to cover some of the functions. Let’s start off with the Aggregate function.

Aggregate

The aggregate function gives us the ability to apply an accumulator function over our observable sequence and the seed acts as the initial accumulator value and then yields to us a single value. For those coming from the functional programming world, one could think of this as a left fold. For a quick refresher on what a fold is, take a look at Bart de Smet’s post on the matter.

This function should be familiar to you who already use LINQ and the semantics are exactly the same. Except, there is one large difference in that all of these aggregation functions don’t return just a value as they do in LINQ to objects, but instead an IObservable<someObject>, so in order for us to get at the value, we must subscribe to it.

Below is the signature of the Aggregate function.

Aggregate = function(
    seed,             // Initial value
    accumulator);     // Function to be invoked on each element

We can then use this function, for example, to count the number of vowels in a given piece of text. We have an initial seed of an object with properties for each vowel, a e i o u. Then we have an accumulator function when then compares our letters and increments the accumulator properly by incrementing the right property should there be a match on a given vowel.

Array.prototype.toObservable = function() {
    return Rx.Observable.FromArray(this);
}

function countVowel(state, letter) {
    var l = letter.toLowerCase();
    if(l === "a") return $.extend(state, { a : state.a + 1 });
    if(l === "e") return $.extend(state, { e : state.e + 1 });
    if(l === "i") return $.extend(state, { i : state.i + 1 });
    if(l === "o") return $.extend(state, { o : state.o + 1 });
    if(l === "u") return $.extend(state, { u : state.u + 1 });

    return state;
}

var initial = {
    a : 0,
    e : 0,
    i : 0,
    o : 0,
    u : 0 };

var sentence = "Are you ready to hack some JavaScript";

sentence.split("").toObservable()
    .Aggregate(initial, countVowel)
    .Subscribe(function(counted) {
        $("#result").html("Number of E's: " + counted.e);
    });

The result of our labor gives us that it found three E’s in the sentence.

Number of E's: 3

We also have another version of the Aggregate function which takes no seed at all and instead just an accumulator.

Aggregate = function(
    accumulator);      // Function to be invoked on each element

In this example, we’ll take a sentence and reverse it by splitting it by whitespace and then inside of our accumulator function, we put the word in front of the rest of the sentence as we go along.

var sentence = "Are you ready to hack some JavaScript";

sentence.split(" ").toObservable()
    .Aggregate1(function(acc, word) {
        return word + " " + acc; })
    .Subscribe(function(reversed) {
        $("#result").html(reversed);
    });

This should then render the following:

JavaScript some hack to ready you Are

Now that we’re familiar with Aggregate, let’s move on to determining whether we satisfy a given condition

Any

The next LINQ operator that is in the Aggregates library is the Any function. This function has two overloads, the first determines whether there are any items in the collection. This function takes no arguments and looks like the following.

Any = function();

We can then use this to then determine if we have any items in our collection.

var items = Rx.Observable.FromArray([1,2,3]);

items.Any().Subscribe(function(any) {
    alert(any); // alerts true
});

Just as well, we could use the overload of the Any operator to determine whether any item in the observable sequence match a given predicate. The predicate function takes in the item from list and then returns a boolean to determine whether there is a match.

Any = function(
    predicate); // predicate to determine if any satisfies

In this example, we’ll determine whether any of the strings inside of an array have the letters “ie” in them.

var words = Rx.Observable.FromArray(
    [ "belief", "height", "yield", "cashier" ]);

words
    .Any(function(word) { return word.indexOf("ie") != -1; })
    .Subscribe(function(any) {
        alert(any); // yields true
    });

All

The last one we’re going to cover today is the All function. This function determines whether all elements of an observable sequence satisfy a given predicate.

All = function(
    predicate); // predicate to determine if all satisfy

To show you quickly how it works, I’ll take the example from above and rewrite it to use the All function instead of the Any and this time because not all the words have the “ie” letter combination, I should have false returned to me when I subscribe.

var words = Rx.Observable.FromArray(
    [ "belief", "height", "yield", "cashier" ]);

words
    .All(function(word) { return word.indexOf("ie") != -1; })
    .Subscribe(function(any) {
        alert(any); // yields false
    });

Conclusion

I think that’s enough for now, and we have a bit to cover including:

Contains
Count
Sum
Average
Final
Max
Min

Introduction to the Reactive Extensions for JavaScript – A Separation of Concerns

Fri, 09 Apr 2010 05:02:00 GMT

So far we’ve come a long way in this series, starting with some of the basics, and then going deeper with composition with such things as the Bing Maps and Twitter Mashup, Drag and Drop, asynchronous programming among others. In the previous post, we covered a bit about jQuery AJAX integration into the Reactive Extensions for JavaScript. This time, we’re going to step back just a little bit to talk about de-cluttering the libraries and separating our concerns.

Before we get started, let’s get caught up to where we are today:

A Clear Separation of Concerns

In an earlier post, we talked a bit about jQuery event integration using bind/unbind as part of the first release of the Reactive Extensions for JavaScript. Since that time, we’ve also added the Live Events and AJAX among other features. Just as well, we’ve looked at other libraries such as Dojo, Prototype, YUI3, Moo Tools, ExtJS among others and sought integration points as well. The question then comes up, how do we arrange the libraries in an easy manner so that we have the core functionality in one library, and then the integration points with both the DOM and third-party libraries integrations?

What the team has decided to do is split among just those lines to have a separation between the core Rx functionality of Observers, Observables, and the various combinators, and then split out anything DOM or third-party library related into their own respective packages. What you can expect are the following then in the next release of the Reactive Extensions for JavaScript, in no particular order:

DOM Events (IE and DOM) and XmlHttpRequest
jQuery
Dojo
ExtJS
Prototype
YUI3
Moo Tools

In addition to the integration points, the library will also ship with samples on how you can integrate the Reactive Extensions for JavaScript with your library of choice. For example, here is a quick demo of using Dojo and the Reactive Extensions together to bind and unbind events to buttons. The intent of this example is to have two buttons that control whether a third button can in fact listen to events. The first button hooks the events and changes the text of the button, whereas the second button unhooks the listener from the third button. To do this, we’ll need a MutableDisposable which allows us to replace the disposable at any time with a new one. In this case, we’ll replace a blank disposable with one that comes from the subscription to the third button’s click event. Then in the second button handler, we’ll dispose our MutableDisposable and then initialize it again to a new one. There are plenty of built-in Disposable instances that we’ll cover in the near future. Below is the full implementation using Dojo and RxJS together.

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojo/dojo.xd.js" 
            type="text/javascript"></script>
        <script src="..\rx.js"></script>
        <script src="..\rx.dojo.js"></script>
        <script>

        dojo.addOnLoad(function() {

            var liveEvent = new Rx.MutableDisposable();
            Rx.Observable.FromDojoEvent(dojo.byId("bind"),"click")
                .Subscribe(function () {
                    dojo.byId("theone").value = "can click...";

                    liveEvent.Replace(
                        Rx.Observable.FromDojoEvent(dojo.byId("theone"),"click")
                        .Subscribe(function() {
                            alert("hello");  }));
                    });

            Rx.Observable.FromDojoEvent(dojo.byId("unbind"), "click")
                .Subscribe(function () {
                        dojo.byId("theone").value = "Does nothing...";
                        liveEvent.Dispose();
                        liveEvent = new Rx.MutableDisposable();
                    });
        });
    </script>

</head>
<body>
    <button id="theone">Does nothing...</button>
    <button id="bind">Bind Click</button>
    <button id="unbind">Unbind Click</button>
</body>
</html>

By providing not only the libraries as well as the samples, the team is able to show you how you can hook up RxJS into your own libraries as well and not be limited to what has already been provided out of the box.

Conclusion

By separating the concerns of the core functionality of RxJS and DOM and third party library integration, the team has given fine grained control on how you can integrate it into your libraries. And if there are other libraries that you think should be integrated out of the box, do give feedback! That’s just one of the many things we can do with it that I’ll hopefully cover more in the near future. So, download it, and give the team feedback!

Introduction to the Reactive Extensions for JavaScript – Extending jQuery AJAX

Fri, 02 Apr 2010 23:17:00 GMT

One of the nicest aspects so far is the ease of integration into jQuery. For the first release, we have Observable.FromJQueryEvent, but we didn’t cover such things as Live Events, which are coming soon as well as other such calls that we’ll get into in today’s post. But adding all of this could tend to clutter up the main Reactive Extensions for JavaScript core functionality, so instead, we’ll break out the functionality into the core library and then have extensions in other files to cover DOM events, jQuery integration and so on. We’ll go into more details about what those other libraries are in subsequent posts.

Before we get started, let’s get caught up to where we are today:

Extending jQuery AJAX Calls

In the previous post, we covered not only the jQuery event integration with the bind and unbind, but also support for integration with live events. Outside of events and live events, there are other ways we could integrate the Reactive Extensions for JavaScript and jQuery, including all functions which take some form of a callback.

For example, we could look at wrapping the jQuery AJAX API to take advantage of RxJS and that’s precisely what we’ve done is to include the AJAX wrappers in an upcoming Reactive Extensions for JavaScript release. To give you an idea of what we’ve done, let’s first look at the jQuery function getJSON, which allows us to load JSON encoded data from a given URL using an HTTP GET request. This function takes in a URL, an optional map or string of data to be sent with the request, and finally a callback with the data and the text status should it succeed.

jQuery.getJSON( 
    url, 
    [ data ], 
    [ callback(data, textStatus) ] )

We can use this function to, for example, to call the Twitter search API to look for users of FourSquare, iterate through the results and put each result in an unordered list.

var url = "http://search.twitter.com/search.json";
var term = "4sq";

$.getJSON(url, { rpp : 100, q : term }, function(d) {

    $.each(d.results, function(_, result) {
        $("#twitterList")
            .append("<li>" + result.created_at + "-" + 
                             result.from_user + " : " + 
                             result.text + "</li>");
    });
});

When we’re using the getJSON function though, what we’re really doing is calling the underlying ajax function which takes a settings map which contains our URL, the data and a success continuation.

$.ajax({
  url: url,
  dataType: 'json',
  data: data,
  success: success
});

This is great for simple examples, but what about error handling? Unfortunately, as written, it does not handle such scenarios. Instead, we could, through the use of the Reactive Extensions for JavaScript, rewrite the AJAX functionality so that we get composable behavior with these callback scenarios. To do this, we could wrap not only the success function, but the error as well and handle each appropriately. We’ll concern ourselves with two functions on our settings maps, the success and the error.

The success function is a function which is called upon the successful completion of the AJAX operation. This function gets passed three arguments, the data, the text status and the XMLHttpRequest object and looks much like the following:

success(
    data, 
    textStatus, 
    XMLHttpRequest)

On the other side of the story, we have the error function which is called when our AJAX call fails. This function gets passed three arguments as well, the XMLHttpRequest object, the text describing the error, and optionally the error object itself.

error(
    XMLHttpRequest, 
    textStatus, 
    errorThrown)

Now that we have a basic understanding of the two functions we’re interested in as part of our settings object, let’s look how we rewrote the ajax function as an observable, in this case calling it ajaxAsObservable. We’ll take the take a settings map much like the original ajax function does, copy out the values into a new map and add the success and error handlers.

$.ajaxAsObservable = function(settings)
{
    var internalSettings = {};
    for (var setting in settings) {
        internalSettings[setting] = settings[setting];
    }
   
    var subject = new Rx.AsyncSubject();
    internalSettings.success = function(data, textStatus, xmlHttpRequest) {
        subject.OnNext({ 
            data: data, 
            textStatus: textStatus, 
            xmlHttpRequest: xmlHttpRequest });
       subject.OnCompleted();
    };
   
    internalSettings.error = function(xmlHttpReuqest, textStatus, errorThrown) {
        subject.OnError({ 
            xmlHttpRequest: xmlHttpRequest, 
            textStatus: textStatus, 
            errorThrown: errorThrown });
    };
   
    $.ajax(internalSettings);
   
    return subject;
};

As you can see, it’s a fairly common approach for us to use the AsyncSubject to wrap a lot of these APIs. We also defined a shorthand function just as jQuery did with getJSON aptly named getJSONAsObservable.

$.getJSONAsObservable = function(url, data)
{
    return $.ajaxAsObservable({ 
        url: url, 
        dataType: 'json', 
        data: data });
};

Now to show this in action, we could create an observable which searches Twitter for FourSquare users and only those with geolocation enabled, display the tweeted text as well as their latitude and longitude.

Array.prototype.toObservable = function() {
    return Rx.Observable.FromArray(this);
}

var url = "http://search.twitter.com/search.json";
var term = "4sq";

$.getJSONAsObservable(url, { rpp : 100, q : term })
    .SelectMany(function(d) { return d.data.results.toObservable(); })
    .Where(function(result) { return result.geo != null; })
    .Subscribe(function(result) {
        var lat = result.geo.coordinates[0];
        var lon = result.geo.coordinates[1];

        $("#twitterList").append("<li>" +
            result.created_at + "-" +
            result.from_user + " : " +
            result.text + "<br />" +
            "at " + lat + " - " + lon + "</li>");
    });

As you may have noticed, not once did we actually use naming of Rx.Observable naming, and instead we’re focusing more on integrating naturally with jQuery including the naming as well as extending the jQuery object itself. Your thoughts and feedback on these designs are always appreciated.

Conclusion

Combining jQuery and the Reactive Extensions for JavaScript gives us even more options to deal with not just events but AJAX callbacks as well. That’s just one of the many things we can do with it that I’ll hopefully cover more in the near future. So, download it, and give the team feedback!

Time Flies Like An Arrow in F# and the Reactive Extensions for .NET

Mon, 29 Mar 2010 02:28:00 GMT

In the past week, I had the pleasure of speaking on Reactive Programming in F# with Brian McNamara at a conference out in Seattle. The point of this talk was to cover the what and why of using F# in reactive programming on both the client and the server and showed quite a few examples. One of the samples Brian alluded to, the “Time Flies Like An Arrow” example, which is an example of having a stream of text, each character delayed behind the previous, follow the mouse around the screen. Brian’s version used a combination of both the asynchronous workflows which are a standard part of F#, as well as first class events/observables. For my version, I’m going to strictly use F# first class events and the integration with the Reactive Extensions for .NET to show you how it can be done.

Implementing Using F#

Let’s take a look at what would be required for us to make the Time Flies Like an Arrow example work in F# using first class events and the Reactive Extensions for .NET on top of WPF. I’ll write it in a pseudo-code to give you an idea of how it should be done.

text = "F# Reacts to First Class Events!"

for character in text

  textbox = TextBox with text = character
  Add textbox to canvas
  
  MouseMove
  - Get Position relative to canvas
  - Delay by character position * 100
  - Observe on the dispatcher thread
  - Set the textbox top to the y position of the mouse
  - Set the textbox left to x position of the mouse
    plus character position * 10

Luckily, using F#, our code shouldn’t be much more complicated than that. With this pseudo-code in mind, let’s get started. First, we’ll need an additional two combinators that the F# Observable module does not include, which is the ability to delay and observe on the dispatcher thread. These combinators are simple pass-throughs to the Reactive Extensions which allow us to have a nice pipelining for creating our events.

module Observable =
  let delay (span : TimeSpan) (observable : IObservable<'T>) =
    observable.Delay(span)

  let observeOnDispatcher (observable : IObservable<'T>) =
    observable.ObserveOnDispatcher()

Next, we’ll need to be able to get the position of our mouse in relation to a given UIElement, and this case, it will be the main canvas.

let getPosition (element : #UIElement) (args : MouseEventArgs) =
  let point = args.GetPosition(element)
  (point.X, point.Y)

Now that we have some of the helpers defined, we can define our WPF Window. In this code, I’ll create a canvas and add it as the content to our Window. Then I’ll implement the pseudo-code from above into F# to iterate through the characters, create a textbox for each and then set the mouse move to move our text box when there is a reaction.

type TimeFliesWindow() as this =
  inherit Window()

  do this.Title <- "Time files like an arrow"

  let canvas = Canvas(Width=800.0, Height=400.0, Background = Brushes.White) 
  do this.Content <- canvas

  do "F# can react to first class events!"
   |> Seq.iteri(fun i c ->  
          let s = TextBlock(Width=20.0, 
                            Height=30.0, 
                            FontSize=20.0, 
                            Text=string c, 
                            Foreground=Brushes.Black, 
                            Background=Brushes.White)
          canvas.Children.Add(s) |> ignore

          this.MouseMove
          |> Observable.map(getPosition canvas)
          |> Observable.delay (TimeSpan.FromMilliseconds(float i * 100.0))
          |> Observable.observeOnDispatcher
          |> Observable.subscribe(fun (x, y) ->
                 Canvas.SetTop(s, y) 
                 Canvas.SetLeft(s, x + float ( i * 10)))
          |> ignore)

And there you have it, a rather simple example of using F# First Class Events which shows off the composable nature of events and what interesting things we can do with them.

Conclusion

Some point in the near future, I’ll come back to explain asynchronous workflows on the client to give further examples on where F# fits. F# is a great language for writing non-blocking I/O computations. Using the rich F# First Class events, which are also IObservable<T> instances, we can use both what F# has to offer as well as the integration with the Reactive Extensions for .NET to create even richer experiences.

Introduction to the Reactive Extensions for JavaScript – jQuery Live Event Integration

Mon, 22 Mar 2010 03:16:00 GMT

So far we’ve come a long way in this series, starting with some of the basics, and then going deeper with composition with such things as the Bing Maps and Twitter Mashup, Drag and Drop, asynchronous programming among others. One of the nicest aspects so far is the ease of integration into jQuery. For the first release, we have Observable.FromJQueryEvent, but we didn’t quite cover live events and the integration points that we can extend. Let’s cover that today and what is coming in a future release of the Reactive Extensions for JavaScript.

Before we get started, let’s get caught up to where we are today:

jQuery Live Event Integration

In an earlier post, we covered the existing jQuery event integration with the bind and unbind scenario. This is the primary way in jQuery to attach an event handler to existing matched elements such as the following:

$("#someButton").bind("click", function() {
    $(this).attr("disabled", "disabled");
});

And then we could disable the binding such as the following:

$("#someButton").unbind("click");

And then we added a nice abstraction over this to enroll it as an observable via the Rx.Observable.FromJQueryEvent method and the extension to the jQuery fn itself of a ToObservable method.

// FromJQueryEvent
Rx.Observable.FromJQueryEvent($("#someButton"), "click"))
    .Subscribe(function(event) {
        $("#someButton").attr("disabled", "disabled");
    });    


// Or extending jQuery object
$("#someButton")
    .ToObservable("click")
    .Subscribe(function(event) {
        $("#someButton").attr("disabled", "disabled");
    });

But what about if we want to attach a handler to an event for all elements which match the selector both now and in the future? For example, if we add elements after we have called bind on a matching selector, those will not be bound to the handler, and instead would have to rebind. In order for us to get the behavior of attaching to all matching selectors both now and in the future, we’ll use the live function which does exactly that. In this case, we’ll add a a click event handler to all present and future items that have the formButton class which disables the element.

$(".formButton").live("click", function() {
     $(this).attr("disabled", "disabled");
});

$("body")
    .append('<input type="button" class="formbutton" value="Click me!"/>');

Now that we’ve covered how to live bind handlers to events, what about unbinding live events? To do that, we’ll use the die function which removes all event handlers that we’ve attached using the live function. This example, taking from the documentation, shows a button bound to click which then live binds to the click handler of the main button. We also bind the click handler of the unbind button which then unbinds the live handler from the main button.

function aClick() {
    $("div").show().fadeOut("slow");
}

$("#bind").click(function () {
    $("#theone").live("click", aClick)
        .text("Can Click!");
});

$("#unbind").click(function () {
    $("#theone").die("click", aClick)
        .text("Does nothing...");
});

So, how do we capture live events in the Reactive Extensions for JavaScript. The answer is much like before when we integrated bind and unbind to the Rx.Observable.FromJQueryEvent function. We’ll take the FromJQuery event and simply replace the calls to bind and unbind with live and die.

Rx.Observable.FromJQueryLiveEvent = function(jQueryObject, eventType, eventData) {

    return Rx.Observable.Create (function(observer) {
        var handler = function(eventObject) {
            observer.OnNext(eventObject);
        };
        jQueryObject.live(eventType, eventData, handler);
        return function() {
            jQueryObject.die(eventType, handler);
        };
    });
};

And we’ll also update the jQuery plugin to be able extend the jQuery object to have a ToLiveObservable method which will look like the following:

jQuery.fn.ToLiveObservable = function(eventType, eventData) {
    return Rx.Observable.FromJQueryLiveEvent(this, eventType, eventData);
}

Now I can rewrite the above sample which uses live and die to use the Reactive Extensions for JavaScript instead. Instead of calling die explicitly to detach our handlers, we can call Dispose() on our subscription which underneath the covers calls the die function.

var liveEvent = null;

$("#bind")
    .ToObservable("click")
    .Subscribe(function () {
        $("#theone").text("can click...");

        liveEvent = $("#theone")
            .ToLiveObservable("click")
            .Subscribe(aClick);
        });

$("#unbind")
    .ToObservable("click")
    .Subscribe(function () {
            $("#theone").text("Does nothing...");
            
            if (liveEvent != null)
                liveEvent.Dispose();
        });

In addition to this example, we can show off the live aspect of this to show that in fact our observable is live. This example will enlist the live click event on all paragraphs, timestamp our values, and then add a new paragraph with the associated timestamp.

$("p")
    .ToLiveObservable("click")
    .Timestamp()
    .Subscribe(function(event) {
        $("p").after("<p>Item created " + event.Timestamp + "</p>");
    });

We’re using the Timestamp method to append a timestamp to our value to keep track of time.

Conclusion

Combining jQuery and the Reactive Extensions for JavaScript gives us even more options to deal with events. In addition to the standard bind and unbind, we now have the ability to connect and disconnect live events as well. That’s just one of the many things we can do with it that I’ll hopefully cover more in the near future. So, download it, and give the team feedback!

Introduction to the Reactive Extensions for JavaScript – Drag and Drop

Fri, 19 Mar 2010 17:35:00 GMT

We’ve covered a bit of ground in this series on the Reactive Extensions for JavaScript, covering the basics, jQuery integration, blocking to asynchronous and further composition. One way I’ve found to really get your hands dirty using this library is to take examples from other libraries and translate them into using our library of choice. In this case, I’m taking examples written in the Flapjax language, and translating them into the Reactive Extensions for JavaScript and jQuery.

Before we get started, let’s get caught up to where we are today:

Drag and Drop Example

Some of the comments made during my initial introduction to the Reactive Extensions for JavaScript mentioned the Flapjax language and whether I had heard of it. I had indeed, having translated some of the samples from the language to the Reactive Extensions for JavaScript with some assistance with jQuery. Today, we’ll step through a simple drag and drop scenario.

For those unfamiliar with Flapjax, it’s a programming language built on top of JavaScript which deals with event-driven reactive design, much like RxJS. By reading the APIs, you can very much see a Haskell influence in not only the design, but the naming and even down to the notation they use to describe the functions. Not to mention of course that the actual compiler for Flapjax is written in Haskell. Interestingly enough, Erik Meijer hosted an Expert-to-Expert on Channel9 with one of the Flapjax creators, Shriram Krishnamurthi.

Before we move onto the actual drag and drop scenario, let’s look at the most basic example, tracking the mouse movement. In Flapjax, you could write some inline code which gets compiled to native JavaScript such as the following:

<p>The mouse coordinates are 
&lt; {! mouseLeftB(document) !}, {! mouseTopB(document) !} &gt;
</p>

Then, when compiled with Flapjax, will produce real JavaScript like the following which allows us to track the mouse movement:

    <p> 
      The mouse coordinates are 
&lt; 
      <script lang="text/javascript" type=""> 
        function fxcode0()
        {
          compilerInsertDomB(mouseLeftB(compilerUnbehavior(document)),
                             "flapjaxsuid0");
        }
        fxcode.push(fxcode0)
      </script><!--
      --><span id="flapjaxsuid0"> 
           
         </span> 
      , 
      <script lang="text/javascript" type=""> 
        function fxcode1()
        {
          compilerInsertDomB(mouseTopB(compilerUnbehavior(document)),
                             "flapjaxsuid1");
        }
        fxcode.push(fxcode1)
      </script><!--
      --><span id="flapjaxsuid1"> 
           
         </span> 
      &gt;
 
    </p>

Not exactly the prettiest, yet quite effective on what it’s trying to do. What I’d rather do, however, is live in native JavaScript to make this happen instead of some of these more interesting abstractions. In some sense, I like tools that stay true to the language and focus on libraries such as jQuery, Moo Tools, etc, although I do find CoffeeScript oddly fascinating.

To back up my argument for a second with an example in native JavaScript, we could do similar using the Reactive Extensions for JavaScript and a little bit of jQuery. In this case, we’ll take the document’s mousemove event and in our Subscribe method call, we set the coords <span> element with our pageX and pageY values from the mousemove event.

$(document).ready(function() {

    var mouseMove = $(document)
        .ToObservable("mousemove")
        .Subscribe(function(event) {
            $("#coords").html(event.pageX + ", " + event.pageY);
        });

});

And then we get to our actual HTML which displays our initial values of 0, 0 inside a span before our mouse starts moving.

<div>The mouse coordinates are &lt; <span id="coords">0, 0</span> &gt;</div>

We could of course have tackled this in any number of ways with any number of frameworks, but it is interesting how they differ in tackling the same problem. Let’s take their example of dragging an object around the screen. You can check their code sample here.

Let’s double up our approach and create two <div> elements that we want to drag around the screen.

<div id="dragTarget1"
     style="background-color: #000000; border: 1px solid #666666;
            color: #ffffff; padding: 10px; position: absolute;
            font-family: sans-serif; cursor: move">
Drag Me!
</div>
<div id="dragTarget2"
     style="background-color: #0000FF; border: 1px solid #666666;
            color: #ffffff; padding: 10px; position: absolute;
            font-family: sans-serif; cursor: move; left: 150px">
Drag Me Too!
</div>

Now, let’s do something interesting with it. We’ll create a function called drag which takes a jQuery element and we’ll return the different between our image offset and the position of the mouse. Let’s first define the function and get our mouse up and mouse move events bound.

function drag(dragTarget) {

    var mouseUp = dragTarget
        .ToObservable("mouseup");

    var mouseMove = dragTarget
        .ToObservable("mousemove");

Next, on our mouse down, we’ll need to calculate the difference between the mouse position and the offset of our drag target. We will return an object with a left and top properties calculated with the difference between the mouse position and the element’s offset.

    var mouseDown = dragTarget
        .ToObservable("mousedown")
        .Select(function(event) {
            return { left : event.clientX - dragTarget.offset().left,
                     top  : event.clientY - dragTarget.offset().top }; });

Finally, we need to take our mouse down and bind it to our mouse down with the SelectMany method passing in our image offset. With our mouse move, we need to prevent the default action of the event from happening, which in this case is the text from being selected. We’ll then project the position of the mouse move and create a delta between that and the image offset coming from the mouse down along with returning our drag target for ease of access. And finally, we’ll do all of this until the mouse up event.

    return mouseDown
        .SelectMany(function(imageOffset) {
            return mouseMove
                .Do(function(event) { event.preventDefault(); })
                .Select(function(pos) {
                    return { target : dragTarget,
                             left   : pos.clientX - imageOffset.left,
                             top    : pos.clientY - imageOffset.top }; })
                .TakeUntil(mouseUp); });

Below is the drag function in its entirety.

function drag(dragTarget) {

    var mouseUp = dragTarget
        .ToObservable("mouseup");

    var mouseMove = dragTarget
        .ToObservable("mousemove");

    var mouseDown = dragTarget
        .ToObservable("mousedown")
        .Select(function(event) {
            return { left : event.clientX - dragTarget.offset().left,
                     top  : event.clientY - dragTarget.offset().top }; });

    return mouseDown
        .SelectMany(function(imageOffset) {
            return mouseMove
                .Do(function(event) { event.preventDefault(); })
                .Select(function(pos) {
                    return { target : dragTarget,
                             left   : pos.clientX - imageOffset.left,
                             top    : pos.clientY - imageOffset.top }; })
                .TakeUntil(mouseUp); });
}

Now to hook up the two <div> elements to the drag function and then set the top and left appropriately. To do this, we’ll create an Observer which takes the mouse position and sets the CSS property top and left accordingly. We’ll then call Subscribe on our two elements using the Observer.

$(document).ready(function() {

    var observer = Rx.Observer.Create(
        function(pos) {
            pos.target.css("left", pos.left);
            pos.target.css("top",  pos.top);
        });

    drag($("#dragTarget1")).Subscribe(observer);
    drag($("#dragTarget2")).Subscribe(observer);
});

You can find the source in its entirety here.

Conclusion

Taking lessons from other frameworks gives us some good practice on how to do things with our current library and with the Reactive Extensions for JavaScript and some jQuery, we’re able to do some pretty interesting things such as this simple drag and drop example. That’s just one of the many things we can do with it that I’ll hopefully cover more in the near future. So, download it, and give the team feedback!

The Reactive Extensions for JavaScript Released

Thu, 18 Mar 2010 03:39:00 GMT

The long awaited day has come as the Reactive Extensions for JavaScript have been released on DevLabs in conjunction with the talk given by Erik Meijer at Mix 2010. Jeff Van Gogh, one of the principal developers on this project has more details and a detailed look at the sample application of “Time Flies Like an Arrow”. I’d like to also give a detailed explanation of another sample application, the Bing Maps and Twitter mashup.

Before we get started, let’s get caught up to where we are today:

Mashing Bing Maps and Twitter

One of the demos I’ve created is a mashup of Bing Maps and Twitter so that if the tweet has geolocation information attached that I’d display it on a map in near real time. What that means is that at a specified interval, we query the Twitter search API for something such as FourSquare, which has a higher probability of having some geolocation information attached and then display those results. So, how could we do this? Let’s walk through the example step by step.

First, we need to focus on the Bing Maps AJAX API which gives us the two main features we’re looking for, displaying a map and putting pushpins on it with some detailed information. In order to make use of it, we’ll need to link the Bing Maps AJAX library such as the following:

<script type="text/javascript" 
  src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2">
</script>

Next, we’ll need a place to put our map, so, let’s create a simple <div> to host it.

<body>
    <div id="veMap" 
         style="position:relative; width: 1000px; height: 600px;"></div>
</body>

And then we’ll need our global map object that we can manipulate.

<script type="text/javascript">

    var map = null;
    
    // More code goes here

Once we’ve defined that, we need a way to show the pushpin on the page. For this I’ll use the tweet ID for the overall pushpin ID, and I’ll take the date, latitude, longitude, their user icon URL, the user name and the text. From there, I’ll create a pushpin in that exact spot with the associated data. I have a try/catch block here where if I’ve seen that tweet before, the Bing Maps API doesn’t allow me to have multiple pushpins with the same ID, so I just ignore the failure.

function addPushPin(
    id, 
    date, 
    latitude, 
    longitude, 
    imageUrl, 
    text, 
    details) {

    try {
        var pinPoint = new VELatLong(
            latitude,
            longitude, 
            0, 
            VEAltitudeMode.RelativeToGround);
        var detailText = date + "-" + details
        var pin = new VEPushpin(id, pinPoint, imageUrl, text, detailText);
        map.AddPushpin(pin);
    } catch(err) {
        // Seen it, don't worry
    }
}

Moving onto the Twitter aspect of this, we’ll need a way to query Twitter using the Search API. In this case, we’ll once again use the XmlHttpRequest method with our URL which contains our text and a total request of 100 records per page.

function searchTwitter(text) {
    var url = 
        "http://search.twitter.com/search.json?rpp=100&q=" 
            + encodeURIComponent(text);

    return Rx.Observable.XmlHttpRequest(url);
}

Once the page loads, we need to load the map, so in my document’s ready function, I initialize the VEMap with the ID of my <div>, load the map and set my zoom level to a nice globe shot.

$(document).ready(function() {

    map = new VEMap("veMap");
    map.LoadMap();
    map.SetZoomLevel(2);

Now we get to the interesting part. How do we reload the data every so often without running into the Twitter API limit? We can use the Interval method which we can set a due time before it invokes the action again. In this case, our action is going to be searching for FourSquare which returns an IObservable<IObservable<JSONData>> in C# parlance which we need to flatten and take the first one, so we’ll need the Switch method to do that.

Rx.Observable
    .Interval(10000)
    .Select(function() { 
        return searchTwitter("foursquare"); })
    .Switch()

Realizing that we’re dealing with JSON data, we need to safely parse it and in this case, I’m using the JSON2 library to do that. We’ll then take the JSON array and split it apart and turn each record into an observable with the SelectMany method. And since we’re only interested in those with geolocation, I check if they have any with my Where method.

    .Select(function(result) {
            return JSON.parse(result.responseText); })
        .SelectMany(function(data) {
            return data.results.toObservable(); })
    .Where(function(data) {
        return data.geo != null; })

Finally, we can subscribe to the resulting observable. Our subscribing action is going to be adding a push pin with the JSON data as well as handle any potential errors.

    .Subscribe(
        function(data) {

                var lat = data.geo.coordinates[0];
                var lon = data.geo.coordinates[1];
                
                addPushPin(
                    data.id, 
                    data.created_at, 
                    lat, 
                    lon, 
                    data.profile_image_url, 
                    data.from_user, 
                    data.text);
        },
        function(error) {
            alert(error);
        });

The code in its entirety can be found here. And below is the result of our code where we see the icons of the Twitter users who mention FourSquare after we leave it running for just a few short minutes…

We could take this example further to expire the pushpins over time, but I think overall, it’s a great example of asynchronous programming in JavaScript and how you can integrate it into your APIs.

Conclusion

Through the use of the Reactive Extensions for JavaScript, we’re able to mash two APIs together through AJAX and refresh them at a certain interval, keeping a near real-time feel to it. That’s just one of the many things we can do with it that I’ll hopefully cover more in the near future. So, download it, and give the team feedback!

Introduction to the Reactive Extensions for JavaScript – Composing deeper

Wed, 17 Mar 2010 14:07:00 GMT

We’ve covered a bit of ground already in this series on the Reactive Extensions for JavaScript (RxJS) from the basic information, creating observers and observables, jQuery integration, composing asynchronous methods with callbacks and in the last post, turned blocking calls into asynchronous calls. Now that we have some more fundamental building blocks, let’s see what else we can do with it. Before moving to FlapJax examples, I want to revisit the Microsoft Translator to take a piece of text and translate into all languages except the currently detected.

Also, if you’re at Mix this year, you’ll notice that Erik Meijer is giving a talk on the Reactive Extensions for JavaScript. I highly recommend that you go to this session, especially if you’ve been interested in this series. Prepare for some pretty slick demos to show off the functionality of the library.

Before we get started, let’s get caught up to where we are today:

Composing and Filtering

As I stated earlier, the goal of this post was to take our piece of text, detect the language and then translate it to all other languages other than the detected. We’ll make use of the detect, getLanguages and translate methods as we’ve talked about earlier, but with some slight changes. Since the time I wrote these posts, the Microsoft Translator has released a new API for us to call which gets away from the JavaScript library approach and to the URL based approach instead. You can read more about the APIs in their documentation. Let’s get started taking our old code and porting it to the new APIs. First, I’ll need the base URL and an AppID that you can apply for. And next, I’ll need to handle making an XmlHttpRequest, getting the value and then evaluating the response. Yes, I realize that eval might be used for malicious purposes, but in this case, this is simple text being returned.

var url = "http://api.microsofttranslator.com/V2/Ajax.svc/";
var appId = "someappid";

function getResponse(url) {
    return Rx.Observable.XmlHttpRequest(url)
        .Select(function(result) {
            return eval(result.responseText);
        });
}

Now we can turn our attention once again to the getLanguages function which gives us all of the language codes that are currently supported by the Translator. To do this, we build up a URL for our request, send it to the getResponse function, and then project each language array of our observable sequence to an observable sequence, in this case our resulting array turned into an observable, and flattens the resulting observable sequences into one observable sequence.

function getLanguages() {
    var serviceUrl = url +
        "GetLanguagesForTranslate?appId=" +  appId;

    return getResponse(serviceUrl)
        .SelectMany(function(result) {
            return result.toObservable(); });
}

Our detect follows the same pattern of building up a URL and gets the response from the XmlHttpRequest as an observable sequence.

function detect(text) {

    var serviceUrl = url + 
        "Detect?AppId=" + appId + 
        "&text=" + encodeURIComponent(text);
        
    return getResponse(serviceUrl);
}

And translate follows the very same pattern as well.

function translate(text, from, to) {

    var serviceUrl = url +
        "Translate?appId=" +  appId +
        "&from=" + from +
        "&to=" + to +
        "&text=" + encodeURIComponent(text);

    return getResponse(serviceUrl);
}

We’ll start first at creating a subscription for the translation button to listen for clicks:

$("#translateCommand")
    .ToObservable("click")
    .Subscribe(function(event) {
    
    // More stuff here
    
});

Inside of the Subscribe method, we need to clear out the last results as well as get the value of the text to be translated.

$("#translatedText").empty();
var textTotranslate = $("#translateText").val();

Next, we need to add more code to do the actual translation. What we’re going to do is first detect the text and before we get to combining this with another function.

var translator = detect(textTotranslate)

I’m going to need to take the detected language and then translate it into all the other languages. In order to do that, I need to use the SelectMany method which lets you project our detected text to another observable sequence, which in this case will be the languages.

.SelectMany(function(detectedLanguage) {
    // Code goes here
});

Once we get to the languages, we want to filter out the language that equals our detected language, and then once again, project our language to the translate method observable sequence.

return getLanguages()
    .Where(function(language) { return language != detectedLanguage; })

I’ll take the result of the translated text and then project to return an object with a translated property with our translated text, and the associated language property.

.SelectMany(function(language) {
     return translate(translatedText, detectedLanguage, language)
        .Select(function(translatedText) {
            return { translated : translatedText, language : language };
 });

All together, the code to take the piece of text, detect its language, and translate it into all other supported languages looks like the following.

var translator = detect(textTotranslate)
    .SelectMany(function(detectedLanguage) {
        return getLanguages()
            .Where(function(language) { return language != detectedLanguage; })
            .SelectMany(function(language) {
                return translate(translatedText, detectedLanguage, language)
                    .Select(function(translatedText) {
                        return { translated : translatedText, language : language };
                });
        });
});

Then we could subscribe to this observable sequence and for example, take a sentence “Do you know what time it is?” and translate it into 29 other languages.

What’s really interesting about this example is the true asynchronous behavior. If I press the button again with the same sentence, the order of their return is not always the same each and every time.

Conclusion

Through the use of the Reactive Extensions for JavaScript, we’ve been able to compose together asynchronous behavior of detecting a piece of text’s language, and translating it into 29 different languages all at once. This could apply to any number of scenarios where we need to compose together one asynchronous call after another, but only when certain things happen. And better yet, to use code in a fluent API style, you don’t have this logic scattered throughout all of your functions.

This of course is only scratching the surface of what capabilities this library has and there is much more yet left to cover. The question you’re probably asking now is where can I get it? Well, for that you’ll have to stay tuned to Erik Meijer and his Reactive Extensions for JavaScript session at Mix on Wednesday.