Functional Reactive Programming 

Johnny Austin

@recursivefunk

CodePen DC

1/15/15

About Me

Director of Technoloy

Contributor

Reluctant Proponent

Fanboy! (oh-em-gee)

Agenda

• Functional Programming
• Reactive Programming
• Functional Reactive 
  • Demo!

Functional Programming

Functional Programming

• No clear definition
• Contrast with OOP
  • OOP composes objects / methods
  • OOP owns it's data and operations
  • FP just uses functions to perform operations
    • Central data structure are functions
    • Function composition
• Loosely coupled from data
  • Generic operations
    • Data in, data out
    • No side effects

Functional Programming cont.

var bar = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];
var foo = bar

    .filter(function(item) {
        return item > 5;
    })
    
    .map(function(item) {
        return item * 2;
    }); 

log( foo ); // [ 12, 14, 16, 18, 20 ]
log( bar ); // [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]

Reactive Programming

Reactive Programming

• Programming around data streams
• Streams
  • Data over time
  • Old Concept
    • Events 
      • document.addEventListener
      • $('#foo').on('click')
    • Node.js (io.js? hehe) Streams
    • Pub/Sub
  • Signals
• More efficient than polling
• Easier to understand

Reactive Programming cont.

// the dom ---------------------------------
$('#text-input').on('click', function(e){
  var entered = e.target.value;
  $('#output').html( entered );
});


// the server ------------------------------
fs
  .createReadStream( './some/file.txt' )
  .on('data', function(){
    // do something with the data  
  })
  .on('error', function(){
    // :(
  })
  .pipe( anotherStream );


// socket.io --------------------------------
io.sockets.on('connection', function (socket) {
  var payload = {
    msg: 'all your events are belong to us'
  };
  socket.broadcast.emit( 'readMe', payload );
});

Reactive Programming cont.

• Bigger than code
  • System architecture
    • Non-monolithic
    • Distributed

Functional

• Non OO
• Single concern
• No side effects
  • Immutability

Reactive

• Streams of data over time
• Events/PubSub etc
• Signals (error, complete)

Review (so far)

Functional Reactive Programming

DEMO

github.com/jray/tiny-frp

Your Turn