Functional Reactive JavaScript

Functional Reactive JavaScript

Slides from a talk at the SF JavaScript meetup: http://www.meetup.com/jsmeetup/events/199214912/

code examples from the talk: http://frp-talk-examples.thepete.net/

Fe6b81005d1553accd6b2a28f6a2bef1?s=128

Pete Hodgson

August 26, 2014
Tweet

Transcript

  1. 3.

    variable
 snapshot of a value 
 at a specific time

    stream
 all future values over time
  2. 5.

    UI elements produce streams of values. Functions combine and transform

    those streams into new streams. Streams can be assigned to UI attributes 
 to effect UI output.
  3. 11.

    slider <div> var wireUpSliderToLabel = function ( $slider, $label ){

    var sliderValue = $slider.asEventStream('input', eventToVal); sliderValue.assign( $label, "text" ); }; ! var eventToVal = function(e){ return $(e.target).val(); };
  4. 12.

    slider <div> var wireUpSliderToLabel = function ( $slider, $label ){

    var sliderValue = $slider.asEventStream('input', eventToVal); sliderValue.assign( $label, "text" ); }; ! var eventToVal = function(e){ return $(e.target).val(); };
  5. 13.

    slider <div> var wireUpSliderToLabel = function ( $slider, $label ){

    var sliderValue = $slider.asEventStream('input', eventToVal); sliderValue.assign( $label, "text" ); }; ! var eventToVal = function(e){ return $(e.target).val(); };
  6. 14.

    slider <div> 5 5 var wireUpSliderToLabel = function ( $slider,

    $label ){ var sliderValue = $slider.asEventStream('input', eventToVal); sliderValue.assign( $label, "text" ); }; ! var eventToVal = function(e){ return $(e.target).val(); };
  7. 15.

    slider <div> 5 5 5 var wireUpSliderToLabel = function (

    $slider, $label ){ var sliderValue = $slider.asEventStream('input', eventToVal); sliderValue.assign( $label, "text" ); }; ! var eventToVal = function(e){ return $(e.target).val(); };
  8. 16.

    5 5 5 2 var wireUpSliderToLabel = function ( $slider,

    $label ){ var sliderValue = $slider.asEventStream('input', eventToVal); sliderValue.assign( $label, "text" ); }; ! var eventToVal = function(e){ return $(e.target).val(); };
  9. 17.

    5 5 5 2 2 var wireUpSliderToLabel = function (

    $slider, $label ){ var sliderValue = $slider.asEventStream('input', eventToVal); sliderValue.assign( $label, "text" ); }; ! var eventToVal = function(e){ return $(e.target).val(); };
  10. 20.

    formatFn var wireUpSliderToFormattedLabel = function ( $slider, $label ){ var

    sliderValue = $slider.asEventStream('input', eventToVal); var formattedValue = sliderValue.map( ratioToPercentage ); formattedValue.assign( $label, "text" ); }; ! var ratioToPercentage = function(ratio){ return "" + Math.round(ratio*100) + "%"; } ! var eventToVal = function(e){ return $(e.target).val(); };
  11. 21.

    formatFn 0.05 var wireUpSliderToFormattedLabel = function ( $slider, $label ){

    var sliderValue = $slider.asEventStream('input', eventToVal); var formattedValue = sliderValue.map( ratioToPercentage ); formattedValue.assign( $label, "text" ); }; ! var ratioToPercentage = function(ratio){ return "" + Math.round(ratio*100) + "%"; } ! var eventToVal = function(e){ return $(e.target).val(); };
  12. 22.

    “5%” formatFn 0.05 0.05 var wireUpSliderToFormattedLabel = function ( $slider,

    $label ){ var sliderValue = $slider.asEventStream('input', eventToVal); var formattedValue = sliderValue.map( ratioToPercentage ); formattedValue.assign( $label, "text" ); }; ! var ratioToPercentage = function(ratio){ return "" + Math.round(ratio*100) + "%"; } ! var eventToVal = function(e){ return $(e.target).val(); };
  13. 23.

    “5%” 5% formatFn 0.05 0.05 var wireUpSliderToFormattedLabel = function (

    $slider, $label ){ var sliderValue = $slider.asEventStream('input', eventToVal); var formattedValue = sliderValue.map( ratioToPercentage ); formattedValue.assign( $label, "text" ); }; ! var ratioToPercentage = function(ratio){ return "" + Math.round(ratio*100) + "%"; } ! var eventToVal = function(e){ return $(e.target).val(); };
  14. 27.
  15. 35.

    variable
 snapshot of a value 
 at a specific time

    stream
 all future values over time
  16. 36.

    var a = 12 var b = a + 10

    // b == 22 a = 20 // b == 22
  17. 37.

    var a = 12 var b = a + 10

    // b == 22 a = 20 // b == 22 var a = aStreamWith(12) var b = a.map( -> + 10 ) a.updateTo(20)