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

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:

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!

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.

No Comments