Clean up your code with RxJS!

Today I would like to talk a bit about the Reactive Extensions for JavaScript (aka LinqToEvents).  From when I heard the first rumors about it, I had a very keen eye on the project because I just felt there was something fascinating about it.

Unfortunatly, I didn’t really “got it right” and never found a real use case to test things out. But with all this noise around the new jQuery deferred API I recognized some common ground between those two technics and started digging into RxJS/Rx .NET again.

Finally, I was able to scratch a bit on the surface which I would like to share with you🙂

So let’s say you have built a web app with a search textbox that fires up an ajax request while the user is typing. This is quite common and I’m sure you have done that before.

You don’t want to fire up the ajax call on every keystroke but only when the user stopped typing instead.  So, you just encountered the first brainer. What does it mean “when the user stopped typing”?

There is no native way to do something like that:

$(“#searchinput”).bind(“StoppedTyping”, function() {console.log(“stopped typing”)};

What you actually mean is, “I want this code only to execute when 500 milliseconds have passed after the last occurrence of the ‘keyup’ event”.

So, maybe u managed this by saving a timestamp inside an outter var. Or you were lucky enough to come up with a solution which doesn’t  rely on an outter var at all.

This is the Rx way to acomplish what I described earlier. How does that look for you? Pretty straight forward, isn’t it?

$(document).ready(function(){
    $('#myInput')
        .toObservable("keyup")
        .Select(function(){ return $('#myInput').val(); })
        .Throttle(500)
        .Subscribe(function(text){ console.log("fire up ajax call"); });
});

There is no outter var, therefore no side effect. I’m not going much into the details because there are better resources to look this up.

So let’s sum things up so far. While you type, nothing fires. The call will fire after you finished typing. But what if you finished typing a word, the call fires, you type again but end up with the same word for which you just fired the ajax call, the moment before. Let’s say we want avoid such a needless call. It’s trivial with RxJS!

$(document).ready(function(){
    $('#myInput')
        .toObservable("keyup")
        .Select(function(){ return $('#myInput').val(); })
        .Throttle(500)
        .DistinctUntilChanged()
        .Subscribe(function(text){ console.log("fire up ajax call"); });
});

Easy, isn’t it?

Or how about avoiding calls, for words with less than three letters?

$(document).ready(function(){
    $('#myInput')
        .toObservable("keyup")
        .Select(function(){ return $('#myInput').val(); })
        .SkipWhile(function(text){ return text.length < 3; })
        .Throttle(500)
        .DistinctUntilChanged()
        .Subscribe(function(text){ console.log("fire up ajax call"); });
});

This is just scratching the surface of what can be down with RxJS. I’m just starting my RxJS journey…but I like what I have seen so far!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s