MVC to FRP

Gleb Bahmutov

My evolving approach to the front end application development

@bahmutov

github.com/bahmutov

glebbahmutov.com

Gleb Bahmutov

JavaScript ninja, image processing expert, software quality fanatic

#CycleConf

work: Kensho

event analysis and statistics for financial markets

Boston and New York

Kensho dashboard app

Kensho dashboard app

Kensho dashboard app

finished?

Kensho dashboard app

finished?

$http.get(...).then(...)

Kensho       Angular!

var outer = { foo: 'bar' }
var inner = Object.create(outer)

JavaScript prototypes

Angular scopes

<div ng-controller="inner">
  {{ foo }}
</div>

Angular scopes are plain objects

<div ng-controller="inner"
  ng-click="setFoo(10)">
  {{ foo }}
</div>

Methods without "this"

function inner($scope) {
  $scope.foo = 42
  $scope.setFoo = function (v) {
    $scope.foo = v
  }
}

Methods that use "this"

Promise.resolve(42).then(console.log)

I want a framework that:

• Builds on JavaScript strength
• Avoids using object context "this"
• Can manage async events

Kensho dashboard app

stream

* times

stream

RxJS for the win!

stream

stream

RxJS like a boss

Journey from procedural to reactive JavaScript

Start with ES5 Array operations: map, filter, some, reduce

synchronous callbacks, finite list

ES5 Arrays

synchronous callbacks, finite list

const out = [1, 2, 3]
    .map(x => x * 2)
    .filter(x > 3)
console.log(out) // [4, 6]

synchronous callbacks, finite list

const out = [1, 2, 3]
    .map(x => x * 2)
    .filter(x > 3)
console.log(out) // [4, 6]

ES5 Arrays

Reactive stream

asynchronous callbacks, infinite

Rx.Observable.from(...)
    .map(x => x * 2)
    .filter(x > 3)
    .buffer(...)
    

If a tree falls in the forest and no one subscribes to tree_falls$

Rx.Observable.from(...)
    .map(x => x * 2)
    .filter(x > 3)
    .buffer(...)
    

egghead.io: RxJS Beyond the Basics: Creating Observables from scratch

Some callback functions are better than others

[1, 2, 3].map(x => x * 2)
  .forEach(console.log)

Error: Illegal invocation

Extra FP for RxJS

Pure functions make the best callbacks

function double(x) {
  return x * 2
}

1. Given the same input, will always return the same output.
2. Produces no side effects.
3. Relies on no external state.

Pure functions make the best callbacks

function double(x) {
  return x * 2
}

Pure functions are the best

Simple to write

Simple to read

Simple to test

Pure functions are the best

function add(a, b) {
  return a + b
}
....
   ....
   const result = add(10, 4)
   ....
....

Referencial transparency 

Pure functions are the best

function add(a, b) {
  return a + b
}
....
   ....
   const result = 10 + 4
   ....
....

Referencial transparency 

Pure functions are the best

function add(a, b) {
  return a + b
}
....
   ....
   const result = 14
   ....
....

Referencial transparency 

Pure functions are the best

function expensive(x) {
  // do something that takes a while
}
....
   ....
   [1, 2, 3, 2, 2]
     .map(R.memoize(expensive))
   ....
....
// expensive(1), expensive(2), expensive(3)

Memoization

Pure functions are better than methods

var o = foo()
// hmm
o<method name>()

Using a method requires knowing about the object's structure (its API)

Is fn pure?

function foo(a, b, c) {
   **** a *** {
     if (b < ****) {
     }
     *** x
   }
}

Is fn pure?

function foo(a, b, c) {
   var x = 3
   **** a *** {
     if (b < ****) {
     }
     *** x
   }
}

Is fn pure?

const x = 10
function foo(a, b, c) {
   **** a *** {
     if (b < ****) {
     }
     *** x
   }
}

Is fn pure?

function x(...) {} // pure
function foo(a, b, c) {
   **** a *** {
     if (b < ****) {
     }
     *** x
   }
}

Pure functions almost always use the input arguments only

function foo(a, b, c) {
   **** a *** {
     if (b < ****) {
     }
     *** c
   }
}

Pure functions make new pure functions really quickly

function foo(a, b, c) { ... }
var fooA = foo.bind(null, valueA)
fooA(valueB, valueC)

Binding vs partial application

Function signature design

function foo(a, b, c) { ... }
// (a, b, c) or (b, c, a) or ...

?

?

?

Partial appliction

function mul(a, b) { return a * b }
const by10 = mul.bind(null, 10)
by10(8) // 80

Curry: make any function unary

const R = require('ramda')
const mul = R.curry((a, b) => a * b)
// by10 = mul.bind(null, 10)
const by10 = mul(10)
by10(8) // 80

Other partial application types

• From the right
• Selective (leaving unfilled positions)
• By name (like AngularJS)
• Property inside options object

slides.com/bahmutov/remove-the-boilerplate-boscc25

Lodash to Ramda example

Pure unary functions are very simple to compose

slides.com/bahmutov/remove-the-boilerplate-boscc25

f(g(h(x)))
// same as
const F = compose(f, g, h)
F(x)

const F = compose(f, g, h)
F(x)

Getting dirty

function main() {
  window.title = title
}

Pure function cop out

function main() {
  const title = 'hi'
  return function foo() {
    window.title = title
  }
}

A little cleaner

function main(win) {
  const title = 'hi'
  return function foo() {
    win.title = title
  }
}

Looks like CycleJs

function main({DOM}) {
  const stream$ = DOM.select(...)
  return {
    DOM: stream$
  }
}

Looks like CycleJs

function main({DOM}) {
  const stream$ = DOM.select(...)
  return {
    DOM: stream$
  }
}

Cycle.run(main, {
  DOM: makeDomDriver... 
})

we have created streams from DOM to DOM - but they are NOT running yet

Is framework pure or not?

Back to Kensho ng+Rx app

function inner($scope) {
  $scope.foo = 42
  $scope.setFoo = function (v) {
    $scope.foo = v
  }
}

+ plain objects without "this"

- very impure behavior

- performance, learning curve

Angular MVC code

Vue

Aurelia

Ractive

Solve the reactivity part of the data flow a little, but not the app's purity

React

Solves the efficient DOM update problem, but not the (async) data flow

New realtime backends: feathers, horizon need real time frontends

CycleJs wraps around realtime feeds perfectly

Making drivers: example

Community CycleJs drivers

Watch my web app being used

function makeCodeCoverageDriver(serverUrl) {
  const ws = new WebSocket(serverUrl)
  return (outgoing$) => {
    outgoing$.subscribe(outgoing => ws.send(outgoing))
    return Rx.Observable.fromCallback(ws.onmessage)()
  }
}

Uses WebSocket or WebRTC data channel

Links are coming ...

MVC to FRP

JS => FP => Reactive => Pure => Realtime

Thank you

@bahmutov

#CycleConf

these slides: slides.com/bahmutov/mvc-frp

all links: glebbahmutov.com/blog/cycle-conf