Scribd
Upload
121 views34 pages

Reactive Programming with Bacon.js

The document discusses functional reactive programming using Bacon.js, a JavaScript library that allows working with time-varying values as streams. It provides examples of how to use Bacon.js to handle events like mouse movements and key presses as streams that can be transformed using functions like map, filter, and fold. The document also mentions other functional reactive programming libraries for JavaScript like Elm and ClojureScript.

Uploaded by

Federico Knüssel
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
121 views34 pages

Reactive Programming with Bacon.js

The document discusses functional reactive programming using Bacon.js, a JavaScript library that allows working with time-varying values as streams. It provides examples of how to use Bacon.js to handle events like mouse movements and key presses as streams that can be transformed using functions like map, filter, and fold. The document also mentions other functional reactive programming libraries for JavaScript like Elm and ClojureScript.

Uploaded by

Federico Knüssel
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Functional

Reactive Programming
with [Link]

Dimitry Solovyov
@dimituri
Imperative Functional
x=x+1 f(x) = … f(x + 1) …
♥ 3
×
val

t
Client-side programming is all about
time-varying values

"#$%
Input Disk Network Timers
(30,30) (50,40) (80,50)
pub/sub

Observer

$.Deferred

Excel cell

…
JavaScript
[Link]

Elm (Haskell-like)
[Link]

ClojureScript
[Link]
map
1 2 3 4 5

map x  =>  x  *  2

2 4 6 8 10
filter*

* I didn’t find a good picture for “filter”, sorry.



However, here is my cat.
1 2 3 4 5

filter x  =>  (x  %  2  ==  0)

× 2 × 4 ×
Mouse move

var  area  =  $('#area');  


var  moveS  =  [Link]('mousemove');
map

Mouse move Coordinates

var  area  =  $('#area');  


var  coords  =  [Link]('mousemove')  
   .map(function(e)  {  
       return  [[Link],  [Link]];  
   });
map filter

Mouse move Coordinates In hitbox

var  area  =  $('#area');  


var  inHitbox  =  [Link]('mousemove')  
   .map(function(e)  {  
       return  [[Link],  [Link]];  
   }).filter(function(coords)  {  
       return  [Link](coords);  
   });
Mouse click

Mouse move

var  area  =  $('#area');  


var  moveS  =  [Link]('mousemove');  
var  clickS  =  [Link]('click');
sampledBy
Mouse click

Mouse move Click info

var  area  =  $('#area');  


var  moveS  =  [Link]('mousemove');  
var  clickS  =  [Link]('click');  
var  clickInfo  =  [Link]()  
   .sampledBy(clickS,  function(moveE,  clickE)  {  
       return  [[Link],  [Link]];  
   });
sampledBy onValue
Mouse click

Mouse move Click info Element text

var  area  =  $('#area');  


var  moveS  =  [Link]('mousemove');  
var  clickS  =  [Link]('click');  
[Link]()  
   .sampledBy(clickS,  function(moveE,  clickE)  {  
       return  [[Link],  [Link]];  
   }).onValue(area,  'text');
fold
1 2 3 4 5

fold (a,  x)  =>  {  a  +  x  }

a= 1 2 4 7 11 16
Key press

var  keyS  =  $(window).asEventStream('keypress');


map

Key press Character

var  keyS  =  $(window).asEventStream('keypress');  


var  charS  =  [Link](function(e)  {  
   return  [Link]([Link]);  
});
map fold

Key press Character Typed text

var  keyS  =  $(window).asEventStream('keypress');  


var  typedText  =  [Link](function(e)  {  
   return  [Link]([Link]);  
}).scan('',  function(s,  chr)  {  
   return  s  +  chr;  
});
filter

Keyboard Arrow keys

sampledBy fold
Arrow keys

Seconds Key info Game state

onValue

Game state Canvas


Juha Paananen
“FRP with [Link]”
[Link]
Bret Victor
“Inventing on Principle”
[Link]
THE END!
SIGN
WITH ALS
DEF
ERR
var  df  =  $.Deferred();   ED
[Link](null,  null,  function(x)  {  
   return  x  *  3;  
}).progress(function(x)  {  
   [Link](x);  
});  
[Link](null,  null,  function(x)  {  
   return  x  *  4;  
}).progress(function(x)  {  
   [Link](x);  
});  
[Link](3);
YOU
WITH R OWN
var  Signal  =  function(value)  {   PUR
   [Link]  =  value;   E JS
   [Link]  =  [];  
};  
   
[Link]  =  function(value)  {  
   if  (value  ==  null)  {  
       return;  
   }  
   [Link]  =  value;  
   for  (var  i  =  0;  i  <  [Link];  i++)  {  
       var  callback  =  [Link][i];  
       callback(value);  
   }  
};
MAP
WITH PING
PUR
E JS
[Link]  =  function(fn)  {  
   var  childS  =  new  Signal();  
   if  ([Link]  !=  null)  {  
       [Link]  =  fn([Link]);  
   }  
   [Link](function(newValue)  {  
       [Link](fn(newValue));  
   });  
   return  childS;  
};

You might also like