## Functional Reactive Programming

David Dao

Technical University Munich

## Refactored CODE

Refactored:

https://github.com/emepyc/tnt.tree (BioJS Tree Component)

https://github.com/pasierb/flickr-gallery (Flickr Gallery)

Some more components ...

FRP Created:

http://daviddao.github.io/functional-vis-example/src/table.html

## AGENDA

### Functional Patterns

- What is Functional Programming?

- Pure Functions / Functionals

- Function Compositions

- Currying

- Partials

### Functional Reactive Programming

- Concept

- Example Applications

### Let's Say we have A, And we Want D.

How do we get there?

### 2. Option: TRANSFORM A -> B, B -> C, C -> D

Turing Machine Style
Lambda Calculus Style

### TRANSFORM A -> B, B -> C, C -> D

Express the result in terms of the inputs, rather than starting from the input and crafting your way to the result

Express what the program should do,
not how

http://www.slideshare.net/ScottWlaschin/fp-patterns-buildstufflt


### What is Functional Programming?

Definition
Functional programming is a programming paradigm, that treats computation as the evaluation of mathematical functions and avoids changing-state and mutable data (Pure functions).

It is a declarative programming paradigm, which means programming is done with expressions.

Source: http://en.wikipedia.org/wiki/Functional_programming

### Loops have bad SIgnal/NOISE RATIO

// Original method
var members = [];
for(var i = 0, len = nodes.length; i < len; i++) {
// up until here all 'how'
// the isMember bit is the only thing specific
// everything else generic to all filters
if(nodes.isMember) {
members.push(node);
}
}

Loops describes HOW not WHAT we have to do to get D.

Result: A lot of boilerplate code!

### The better Loop

// Refactored
var isMember = function(u) { return u.isMember };
var members = nodes.filter(isMember);

Split the filtering code from the filter.

• filter: [A], (A -> Boolean) -> [A]

Takes a data array and a function returning a boolean. Returns a transformed data array.

### MAPPING With FUNCTIONALS

// extracting some data from each node
var nodes_names = nodes.map(function(node) { return node.name });

// a calculation for each node
var distanceFromMeanBranchLength = nodes.map(function(node) {
return Math.abs(node.branchLength - meanBranchLength);
});

Have some As, want some Bs

Common tasks: access all els properties

Map: [A], (A -> B) -> [B]

### REDUCING With FUNCTIONALS

// simple arithmetic
var totalDistance = nodes.reduce(function(sum,node) {
return sum + node.branchLength
},0);

// creating strings
var userList = users.reduce(function(html,user) {
return html + "<li>" + user.name + "</li>"
},"");

Have a list of As, create a single B from them

Reduce: [A], (A -> B) -> B

Recursive, we return a B at every stage

fold: we're folding the list down to one thing

### USAGE: ONE LINE LOOKUP FUNCTION

// Functional method
function index(obj,i) {return obj[i]}

'a.b.c'.split('.').reduce(index, {a: {b: {c: "hello!"}}}) // => "hello"


### MORE FUNCTIONALS!

filter: [A], (A -> Boolean) -> [A]

map: [A], (A -> B) -> [B]

reduce: [A], (A -> B) -> B

some: [A], (A -> Boolean) -> Boolean

every: [A], (A -> Boolean) -> Boolean

forEach: [A], (A -> Any) -> undefined

### FUNCTIONAL COMPOSITION

f (g(x))
$f (g(x))$

### Core Principle in FP #2

Definition
Function composition is the pointwise application of one function to
the result of another to produce a third function.

### FUNCTIONAL COMPOSITION

var compose = function(f,g) {
return function(x) {
return f(g(x));
};
};

var toUpperCase = function(x) { return x.toUpperCase(); };
var exclaim = function(x) { return x + '!'; };
var shout = compose(exclaim, toUpperCase);

shout("functional composition rocks");
//=> "FUNCTIONAL COMPOSITION ROCKS!"
f (g(x))
$f (g(x))$

### FUNCTIONAL COMPOSITION

f (g(x))
$f (g(x))$

More reusable

Like Lego blocks, rather than Jenga tower

### Core Principle in FP #3

Call a function with fewer arguments than it expects. It returns a function that takes the remaining arguments.

### CLOSURES

if(!someThingImportant) {
var someThingImportant = {};
}
// this works due to hoisting and function scope

Scope is only affected by functions, not blocks.

Each function defines new scope and has access to parent's scope

Inside its closure, the function is stored with its initialising environment

(function() {
var c = "now you see me";
(function() {
// can see c here
console.log(c);
})();
})();
// c not set here

### CLOSURES

function makeClosure(name) {
return function () {
return name;
};
}
var description1 = makeClosure("Cloe the Closure");
var description2 = makeClosure("Albert the Awesome");
console.log(description1());
console.log(description2());

### CURRYING

var add = function(a, b, c){ return a + b + c }
add(1, 2, 3) //= 6
add(1, 2, 3, 'IGNORE ME') //= 6
add(1) //= NaN
var curry_add = function(a){
return function(b) {
return function(c) {
return a + b + c;
}
}
}
curry_add1(2)(3) //= 6

### CURRYING

• Little pieces can be configured and reused with ease
• Logic clear and extracted
// Curried get method
var get = function(property, object){
return function(property){
return object[property]
}
}

var obj = [{ id: 1 }, { id: 2 }, { id: 3 }];
obj.map(get('id')) //= [1,2,3]

// Even better with curried map method
var getIDs = map(get('id'));
getIDs(obj); //= [1,2,3]


### Ok enough, show me REAL CODE!

https://github.com/pasierb/flickr-gallery

Great libraries with FP support:

Underscore

Lodash

Ramda

### Core Principle in FP #4

Advantage : Steal some tricks from math to improve performance of your code (and show off)

Disadvantage: Sometimes confusing for non-math wiz

### Partial Pattern

var unCube = Math.pow.partial(___,1/3);

unCube(27); //3
unCube(15); //2.46621207433047

var later = timeOut.partial(___,1000);

later(alert("here I am!"));//... ... "here I am!"

Returning a new function, where partial arguments are fixed.

### BIND - A PARTIAL PARTIAL

function add(a, b) {
return a + b;
}

addOne(2) // => 3

[1, 2, 3].map(addOne) // => [2, 3, 4]

Function.prototype.bind is a pure JS Solution

Takes a function, returns a new version with more context

Sets this context, and some arguments (left to right)

Can be used to flatten callback hells

### USAGE: FLATTENING CALLBACK HELLS

// Original code
function updateData(req,res) {
getUser(res.params.userId,function(err,user) {
if(err) return res.send(404);
getProfile(user,function(err,profile) {
if(err) return res.send(500);
updateProfile(user,profile,req.params.profile,function(err) {
if(err) return res.send(500);
});
})
})
}
// Pure JS Solution
function updateProfile(req,res) {
getUser(res.params.userId,function(err,user) {
// bind the user context, returning a fn that
// just needs err and profile
getProfile(user,updateProfileWithUserAndProfile.bind(null,user));
})
}
function updateProfileWithUserAndProfile(user,err,profile) {}


## Functional Reactive Programming

### Reactive programming is programming with asynchronous data streams (Observables)

https://gist.github.com/staltz/868e7e9bc2a7b8c1f754

Functional

On top of that, you are given an amazing toolbox of functions to combine, create and filter any of those streams.

Event based

Stream based

### Everything can be a stream

https://gist.github.com/staltz/868e7e9bc2a7b8c1f754

### MULTI CLICK LOGIC in FRP

https://gist.github.com/staltz/868e7e9bc2a7b8c1f754

### MULTI CLICK LOGIC in FRP

https://gist.github.com/staltz/868e7e9bc2a7b8c1f754

### Functional Reactive Programming with Visualisations

Everything can be an event stream

Plugin style coding - high abstraction

Declarative style instead of control flow

Functional programming as powerful modification tool to  produce clean code

Requires to think reactively

Radically different from object oriented design

Mathematical instead of understandable code

By David Dao

• 1,199