Introduction aux Reactives extensions for JavaScript

Publié le par

Dans l’un de mes précédents billets j’avais déjà introduit les Réactives extensions for .net, cet API qui permet de faire la programmation parallèle et avec un exemple simple nous avons pu constater la force et la souplesse de cette bibliothèque. Et bien Erik Meijer(mon idole depuis que j’ai découvert Linq ;) ) et toute sont équipe n’en sont pas restés la et après les réactives extensions for .net et réactives extensions for silverlight ils ont sortie une version des réactives extensions for JavaScript après la conférence MIX10 de Las Vegas . Voir les démos sur Channel9.

Depuis la sortie des Réactives extensions for JavaScript je n’ai pas eu le temps de me pencher dessus, un peu bousculé par mon travail et mes travaux rédactionnels qui était beaucoup plus axé SQL ces derniers temps. Mais je me suis promit que des que j’aurais un peu de temps libre évidement je m y métrais et si possible faire découvrir cella à ceux qui ne l’on pas encoure découvert en postant un billet dessus sur ce blog. Et voila ce week-end étant un peu disponible j’ai téléchargé Rx for JavaScript et essayé une petite démo présenté sur channel 9. Ce matin j’ai décidé de partager cella avec vous.

Je ne reviendrais pas sur la présentation des réactives extensions pour cella bien vouloir vous reporter à mon billet sur les réactives extensions for .net, mais déjà il est à signaler que la plupart des méthodes disponible pour réactives extensions for .net et silvergiht sont aussi disponible pour JavaScript. Vous pouvez le télécharger à l’adresse suivante : http://msdn.microsoft.com/en-us/devlabs/ee794896.aspx.

L’exemple sur lequel nous allons nous attarder, fait défiler le texte en fonction de la position de la souris.

1. Dans un premier temps nous devons introduire JQuery et Rx for JavaScript. 

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script src="Rx_JS/rx.js" type="text/javascript"></script>

2. Déclarer nos objets de collection JQuery.

var $container  = $("#container"), 
            $document   = $(document),
            text        = "the motion in the ocean",
            textlen     = text.length,
            i = 0, movement;

3. Ecrire notre requête Linq qui traduit ce que l’on veut faire. 

movement  = Rx.Observable
                        .FromJQueryEvent($container, "mousemove")
                          .Select(function(value) {
                            var offsets   = $container.offset();
                            
                            return { 
                              offsetX : value.clientX - offsets.left + $document.scrollLeft(), 
                              offsetY : value.clientY - offsets.top + $document.scrollTop() 
                            };
                          });

4. Enfin souscrire à notre séquence observable et modifier les positions en fonctions du déplacement de la souris.

for ( ; i < textlen; i++ ) { 
       (function (i) {
         
         var $span = $('<span/>', {
                       text: text[i],
                       css: { 
                         position: "absolute" 
                       }
                     })
                     .appendTo($container);
         
         movement.Delay(i * 100).Subscribe(function(event) {
           $span.css({
             top:    event.offsetY + "px",
             left:   event.offsetX + i * 10 + 15 + "px"
           });       
         });
         
       })(i);
     }

Le script complet

<script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="Rx_JS/rx.js"></script> 
    <script>
    $(function () {
        
        var $container  = $("#container"), 
            $document   = $(document),
            text        = "the motion in the ocean",
            textlen     = text.length,
            i = 0, movement;
             
        movement  = Rx.Observable
                        .FromJQueryEvent($container, "mousemove")
                          .Select(function(value) {
                            var offsets   = $container.offset();
                            
                            return { 
                              offsetX : value.clientX - offsets.left + $document.scrollLeft(), 
                              offsetY : value.clientY - offsets.top + $document.scrollTop() 
                            };
                          });
        for ( ; i < textlen; i++ ) { 
          (function (i) {
            
            var $span = $('<span/>', {
                          text: text[i],
                          css: { 
                            position: "absolute" 
                          }
                        })
                        .appendTo($container);
            
            movement.Delay(i * 100).Subscribe(function(event) {
              $span.css({
                top:    event.offsetY + "px",
                left:   event.offsetX + i * 10 + 15 + "px"
              });       
            });
            
          })(i);
        }    
      });        
    </script>

Et voila vous pouvez visualisez la démo sur http://jsbin.com/ojafu/3.

Nous venons de vous présenter un exemple simple qui vous permet de constater combien cette bibliothèque est intéressante, Nous n’avons effleurer qu’une infirme possibilité que nous offre Rx for JavaScript. Plusieurs exemples sont disponible sur le blog de Matthew Podwysocki’s.

Laisser un commentaire