Rx – for beginners (part 12): RxJs

2010/03/30

this post is the 11th in a series of posts about the new Reactive Framework (Rx).

the series TOC can found here.

in this post we will focus on Rx for JavaScript.

 

the recently the Rx team release JavaScript library that capable to

get observable stream from events.

 

for example the syntax for mouse move event will be:

  1. var mouseMove = Rx.Observable.FromJQueryEvent($(document), "mousemove");

 

all you have to do in order of using this library is to rx.js which is less than 7Kb (GZipped).

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

 

you can download the installation from here.

 

the installation include sample code that demonstrate old good JavaScript trick of

attacking sting tail to the mouse move event.

 

to see the effect move the mouse on the gray panel.
Rx on javascriptRx on javascriptRx on javascript

the full code for this trick is:

Code Snippet
  1. <html xmlns="http://www.w3.org/1999/xhtml" >
  2.     <head>
  3.         <title>Rx for JavaScript Rocks!</title>   
  4.             <script src="http://code.jquery.com/jquery-latest.js"></script>
  5.             <script src="rx.js" type="text/javascript"></script>
  6.             <script type="text/javascript">
  7.         $(document).ready(function()
  8.             {
  9.                 var mouseMove = Rx.Observable.FromJQueryEvent($(document), "mousemove");
  10.                 var text = "time flies like an arrow";
  11.                 var container = $("#container");
  12.                 for (var i = 0; i < text.length; i++)
  13.                 {
  14.                     (function(i)
  15.                     {
  16.                         var s = $(document.createElement("span"));
  17.                         s.html(text.charAt(i));
  18.                         s.css({ position: "absolute" });
  19.                         s.appendTo(container);
  20.                         mouseMove.Delay(i * 100).Subscribe(function(mouseEvent)
  21.                         {
  22.                             s.css({ top: mouseEvent.clientY + "px",
  23.                                     left: mouseEvent.clientX + i * 10 + 15 + "px"});
  24.     
  25.                         });
  26.                     })(i);
  27.                 }
  28.             });
  29.         </script>
  30.     </head>
  31.     <body style="font-family: Consolas, monospace; overflow: hidden">
  32.         <div id="container"></div>
  33.     </body>
  34. </html>

line 9, getting observable stream.

line 13, iterate for each of the character of the text.

lines 22-27, subscribe to the event stream (for each of the character).

 

Summary

the Rx framework is now available for web developers.

 

Learn More

 

kick it on DotNetKicks.com Shout it


Add comment
facebook linkedin twitter email

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>