Pure Magic: Functional Reactive Web Apps

JS

Gleb Bahmutov

@bahmutov

glebbahmutov.com

github.com/bahmutov

slides.com/bahmutov

C / C++ / C# / Java / CoffeeScript / JavaScript / Node / Angular / Vue / Cycle.js / FP FunP

JavaScript ninja, image processing expert, software quality fanatic

@bahmutov

Purdue University

@bahmutov

EveryScape

virtual tours

MathWorks

MatLab on the web

Kensho

finance dashboards

@bahmutov

@bahmutov

Around 50 conference decks at https://slides.com/bahmutov

with videos at https://glebbahmutov.com/videos

OSCON, ng-conf, NodeConf.eu ...

These slides at https://slides.com/bahmutov/pure-magic

https://glebbahmutov.com/blog/

link to more information

@bahmutov

VP of Eng at

Testing, the way it should be

@bahmutov

https://www.cypress.io/about/

Usual E2E runners need delays or run slow in this case ... (Karma, Protractor, Selenium)

https://cycle-cypress-ntrpdvgjte.now.sh

@bahmutov

  1. Click on a button
  2. Action is delayed by 2 seconds

https://www.cypress.io/

beforeEach(() => {
  cy.visit('index.html')
})
it('starts with 0', () => {
  cy.contains('Counter: 0')
})

Cypress.io

it('increments counter 3 times', () => {
  cy.contains('Increment').click()
  cy.contains('Counter: 1')
  cy.contains('Increment').click()
  cy.contains('Counter: 2')
  cy.contains('Increment').click()
  cy.contains('Counter: 3')
})

Not  single "delay" yet it runs in 6 seconds!

https://glebbahmutov.com/blog/web-testing-nirvana-with-cypress/

@bahmutov

https://youtu.be/04L9dpL6I7k

@bahmutov

https://glebbahmutov.com/game-of-github/

@bahmutov

Talk

  1. OO in JavaScript

  2. FP in JavaScript

    1. partial application

    2. pure functions

    3. composition

  3. hyper-app.js

  4. reactive streams

  5. cycle.js

@bahmutov

⏰ 40 min

⏰ 40 min

break

Code always grows

more complex

Company lifetime

Number of engineers

@bahmutov

How do you write a complex application?

A: Write complex code

B: Assemble simple pieces

@bahmutov

Complex code

  • Giant singletons

  • Code is hard to test

  • Code is hard to reuse

@bahmutov

Example problem

var numbers = [3, 1, 7]
var constant = 2
// 6 2 14

given an array of numbers, multiply each number by a constant and print the result.

@bahmutov

Highly recommended

https://github.com/bahmutov/javascript-journey

var numbers = [3, 1, 7]
var constant = 2
// expected output [6, 2, 14]

@bahmutov

Also: comment-value, Quakka

https://github.com/bahmutov/comment-value, https://quokkajs.com/

@bahmutov

procedural / imperative JS

const numbers = [3, 1, 7]
const constant = 2
let k = 0
for(k = 0; k < numbers.length; k += 1) {
  console.log(numbers[k] * constant)
}
// 6 2 14

  • "for" loop is a pain to debug and use

  • mixing data manipulation with printing​

  • code is hard to reuse

@bahmutov

Refactoring helps

const numbers = [3, 1, 7]
const constant = 2

reusable simple functions

complex logic

iteration

function mul(a, b) {
  return a * b
}
function print(x) {
  console.log(x)
}
function processNumber(n) {
  print(mul(n, constant))
}
for(let k = 0; k < numbers.length; k += 1) {
  processNumber(numbers[k])
}
// 6 2 14

@bahmutov

A function should do a single thing

 

No AND / OR / INCLUDING

@bahmutov

OO to the rescue

@bahmutov

https://twitter.com/iamdevloper/status/727854065426804738

@bahmutov

function NumberMultiplier() {}

Object-Oriented JavaScript

NumberMultiplier.prototype.setNumbers = function (numbers) {
    this.numbers = numbers;
    return this;
};
NumberMultiplier.prototype.multiply = function (constant) {
    for (var k = 0; k < this.numbers.length; k += 1) {
      this.numbers[k] = constant * this.numbers[k];
    }
    return this;
};
NumberMultiplier.prototype.print = function () {
    console.log(this.numbers);
};

@bahmutov

Object-Oriented JavaScript

// using NEW keyword
new NumberMultiplier()
  .setNumbers(numbers)
  .multiply(constant)
  .print();
// [ 6, 2, 14 ]

@bahmutov

Object-Oriented JavaScript: 3 parts

function NumberMultiplier() {}

NumberMultiplier.prototype.setNumbers = function() {}
NumberMultiplier.prototype.multiply = function() {}
NumberMultiplier.prototype.print = function() {}

new NumberMultiplier();

constructor function

prototype

"new" keyword

@bahmutov

// NumberMultiplier.prototype object
{
  setNumbers: function () { ... },
  multiply: function () { ... },
  print: function () { ... }
}

OO JavaScript is prototypical

Common Misconceptions About Inheritance in JavaScript

// instance object
{
  numbers: [3, 1, 7]
}

prototype

@bahmutov

var NumberMultiplier = {
  setNumbers: function (numbers) {
    this.numbers = numbers; return this;
  },
  multiply: function (constant) {
    for (var k = 0; k < this.numbers.length; k += 1) {
      this.numbers[k] = constant * this.numbers[k];
    } return this;
  },
  print: function () { console.log(this.numbers); }
};

Prototype is a plain object!

javascript-journey source

var numberMultiplier = Object.create(NumberMultiplier);
numberMultiplier
  .setNumbers(numbers)
  .multiply(constant)
  .print();
// [ 6, 2, 14 ]

plain object

@bahmutov

class NumberMultiplier {
  setNumbers(numbers) {
    this.numbers = numbers;
    return this;
  }
  multiply(constant) {
    for (var k = 0; k < this.numbers.length; k += 1) {
      this.numbers[k] = constant * this.numbers[k];
    }
    return this;
  }
  print() {
    console.log(this.numbers);
    return this;
  }
}
new NumberMultiplier()

ES6 classes: just don't

How to Fix the ES6 `class` keyword

@bahmutov

class NumberMultiplier {
  setNumbers(numbers) {
    this.numbers = numbers;
    return this;
  }
  multiply(constant) {
    for (var k = 0; k < this.numbers.length; k += 1) {
      this.numbers[k] = constant * this.numbers[k];
    }
    return this;
  }
  print() {
    console.log(this.numbers);
    return this;
  }
}
const n = new NumberMultiplier()
n.setNumbers([1, 2, 3])
setTimeout(n.print, 1000) // undefined

this will betray you

🔥🔥🔥

@bahmutov

I ❤️❤️❤️ Vue.js

https://vuejs.org/v2/guide/#Handling-User-Input

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Reverse</button>
</div>
new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message
        .split('').reverse().join('')
    }
  }
})

this

@bahmutov

People ❤️❤️❤️ React

https://facebook.github.io/react/docs/state-and-lifecycle.html

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

this

@bahmutov

Functional React Components

https://facebook.github.io/react/docs/components-and-props.html

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

@bahmutov

Fun.

Programming

@bahmutov

Complex logic assembled from simple parts

@bahmutov

OO

"Smart" objects

Pass data around

Functional

"Dumb" objects

Pass logic around

new NumberMultiplier()
  .setNumbers([3, 1, 7])
  .multiply(2)
  .print()
f(g(numbers))

Object-oriented VS functional

@bahmutov

"Dumb" JavaScript Arrays

typeof [1, 2] // "object"
Array.isArray([1, 2]) // true
Array.prototype
/*
  map
  forEach
  filter
  reduce
  ...
*/

@bahmutov

Arrays: OO + FP

var numbers = [3, 1, 7];
var constant = 2;
function mul(a, b) {
  return a * b;
}
function print(n) {
  console.log(n);
}

clear "multiply then print" semantics

Object-oriented methods

numbers
    .map(x => mul(constant, x))
    .forEach(print);
// 6 2 14

FP features

var numbers = [3, 1, 7];
var constant = 2;
function mul(a, b) {
  return a * b;
}
function print(n) {
  console.log(n);
}
numbers
    .map(x => mul(constant, x))
    .forEach(print);
// 6 2 14

"dumb" object

pass logic as

arguments

@bahmutov

When do we know arguments?

var numbers = [3, 1, 7];
var constant = 2;
function mul(a, b) {
  return a * b;
}
function print(n) {
  console.log(n);
}
numbers
    .map(x => mul(constant, x))
    .forEach(print);
// 6 2 14

known right away

known much later

@bahmutov

Partial application

var numbers = [3, 1, 7];
var constant = 2;
function mul(a, b) {
  return a * b;
}
const mulBy = mul.bind(null, constant)
function print(n) {
  console.log(n);
}
numbers
    .map(x => mulBy(x))
    .forEach(print);
// 6 2 14

Make new function

make code simpler

@bahmutov

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

Super power: partial application

@bahmutov

Partial application from the left

function fn(a, b, c) { ... }
var newFn = fn.bind(null, valueA, valueB);

_.partial, R.partial

// or
var _ = require('lodash');
var newFn = _.partial(fn, valueA, valueB);
// or
var R = require('ramda');
var newFn = R.partial(fn, valueA, valueB);

@bahmutov

Partial application from the right

['1', '2', '3'].map(parseInt); // [1, NaN, NaN]
// function parseInt(x, radix)
// but Array.map sends (value, index, array)
['1', '2', '3'].map(function (x) {
    return parseInt(x, 10);
});
const base10 = _.partialRight(parseInt, 10)
['1', '2', '3'].map(base10); 
// [1, 2, 3]
// radix is bound, 
// index and array arguments are ignored

@bahmutov

Function signature design

Place on the left arguments most likely to be known early 

function savePassword(userId, newPassword) {...}
// vs
function savePassword(newPassword, userId) {...}

@bahmutov

Point-free code

var numbers = [3, 1, 7];
var constant = 2;
function mul(a, b) {
  return a * b;
}
const mulBy = mul.bind(null, constant)
function print(n) {
  console.log(n);
}
numbers
    .map(x => mulBy(x))
    .forEach(print);
// 6 2 14

@bahmutov

Point-free code

var numbers = [3, 1, 7];
var constant = 2;
function mul(a, b) {
  return a * b;
}
const mulBy = mul.bind(null, constant)
function print(n) {
  console.log(n);
}
numbers
    .map(mulBy)
    .forEach(print);
// 6 2 14

single argument

@bahmutov

Prepare for partial application

var numbers = [3, 1, 7];
var constant = 2;
const mul = a => b => a * b
const mulBy = mul(constant)
function print(n) {
  console.log(n);
}
numbers
    .map(mulBy)
    .forEach(print);
// 6 2 14

@bahmutov

These functions are different!

hint: look where the variables are coming from

function mul(a, b) {
  return a * b
}
function print(x) {
  console.log(x)
}

@bahmutov

function mul(a, b) {
  return a * b
}
function print(x) {
  console.log(x)
}

These functions are different!

@bahmutov

Pure functions

function mul(a, b) {
  return a * b
}

only uses its arguments

same arguments => same result

does not modify the outside environment

@bahmutov

Impure functions

function print(x) {
  console.log(x)
}

uses outside variable

modifies the outside environment

function print(console, x) {
  console.log(x)
}

@bahmutov

Pure functions are the best

Simple to write

Simple to read

Simple to test

@bahmutov

Pure functions are the best

Bonus: make perfect callbacks

@bahmutov

Non-pure function red flag: no return value

@bahmutov

Why use JS at all?

  • No other language reaches as widely as JS

  • JS does most of the FP things "well enough"

  • JS is quickly evolving

@bahmutov

https://glebbahmutov.com/blog/my-favorite-es6/

To me functional programming in JS is all about passing and returning functions

@bahmutov

When do you know FP in JS?

['1', '2', '3'].map(parseInt) // [1, NaN, NaN]
// function parseInt(x, radix)
// but Array.map sends (value, index, array)
['1', '2', '3'].map(/* ? */)

Write a FUNCTION that makes parseInt a unary function.

@bahmutov

function unary() {
  return function (x) {
    return parseInt(x)
  }
}
['1', '2', '3'].map(unary()) 
// [1, 2, 3]

unary strips second argument to parseInt

make unary a PURE function.

@bahmutov

function unary(f) {
  return function (x) {
    return f(x)
  }
}
['1', '2', '3'].map(unary(parseInt)) 
// [1, 2, 3]

unary is pure and reusable function

https://glebbahmutov.com/blog/my-favorite-functional-adaptors/

@bahmutov

function unary(f) {
  return function (x) {
    return f(x)
  }
}
['1', '2', '3'].map(unary(parseInt)) 
// [1, 2, 3]

functional JavaScript

Takes function as argument

Returns new function

@bahmutov

Atomization

initial spaghetti code

mul
print
...

 readable code

"atoms"

...

@bahmutov

Atomization

initial spaghetti code

mul
print

short readable code

Clumping

compose

...
...

@bahmutov

for (k = 0; k < numbers.length; k += 1) {
  print(byConstant(numbers[k]))
}

fn

fn

data

@bahmutov

Composition = shorter code

for (k = 0; k < numbers.length; k += 1) {
  print(byConstant(numbers[k]))
}

fn

fn

data

write function that executes `f(g(x))`

mulAndPrint = compose(print, byConstant)
mulAndPrint(numbers[k])
// print ( byConstant ( numbers[k] ) )

@bahmutov

?

"compose" is a function

mulAndPrint = compose(print, byConstant)
mulAndPrint(numbers[k])
// print ( byConstant ( numbers[k] ) )
function compose()

@bahmutov

that takes two arguments

mulAndPrint = compose(print, byConstant)
mulAndPrint(numbers[k])
// print ( byConstant ( numbers[k] ) )
function compose(f, g)

@bahmutov

and returns another function

mulAndPrint = compose(print, byConstant)
mulAndPrint(numbers[k])
// print ( byConstant ( numbers[k] ) )
function compose(f, g) {
  return function() {
  
  }
}

@bahmutov

that expects a single argument

mulAndPrint = compose(print, byConstant)
mulAndPrint(numbers[k])
// print ( byConstant ( numbers[k] ) )
function compose(f, g) {
  return function(x) {
  
  }
}

@bahmutov

and applies original functions to it

mulAndPrint = compose(print, byConstant)
mulAndPrint(numbers[k])
// print ( byConstant ( numbers[k] ) )
function compose(f, g) {
  return function(x) {
    return f(g(x))
  }
}

@bahmutov

const mulPrint = compose(print, byConstant)
for (k = 0; k < numbers.length; k += 1) {
  mulPrint(numbers[k])
}

fn

data

Composition

function compose(f, g) {
  return function(x) {
    return f(g(x))
  }
}

@bahmutov

const mulPrint = compose(print, byConstant)
for (k = 0; k < numbers.length; k += 1) {
  mulPrint(numbers[k])
}

fn

data

@bahmutov

How do you write a complex application?

B: Assemble simple pieces

Note: since JavaScript functions return single result, it is easier to compose unary functions

@bahmutov

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

pure

pure

Note: composition of pure functions is a pure function

@bahmutov

mulAndPrint = compose(print, byConstant)

pure

print "pollutes" the composed function

@bahmutov

function app(window) {
  return function () {
    window.title = 'Hello'
  }
}
const run = app(window)
run()

Note: a pure function can return impure function

@bahmutov

pure

impure

impure

pure

@bahmutov

// cannot declare argument const
function foo (a) {
  a = 'whatever'
}

function foo (a) {
  delete a.important
}
const b = {...}
foo(b) // 😎😎😎

@bahmutov

ES6 helps a little

http://facebook.github.io/immutable-js/

@bahmutov

For heavy lifting see

map(fn, list) vs map(list, fn)

@bahmutov

Order of arguments

function cb(item, index, array) { ... }
// ES5 method
Array.prototype.map(cb)
// Lodash method
_.map(array, cb)

Place on the left arguments that are likely to be known first 

https://glebbahmutov.com/blog/user-friendly-api/

@bahmutov

Order of arguments

_.map(array, cb)

Place on the left arguments that are likely to be known first 

https://glebbahmutov.com/blog/user-friendly-api/

@bahmutov

Ramda library

var R = require('ramda')
// callback is first argument!
R.map(cb, array)

https://glebbahmutov.com/blog/lodash-to-ramda-example/

// all functions are curried
var by5 = R.multiply(5)
by5(10) // 50

@bahmutov

Multiply all numbers by 5

var R = require('ramda')
R.map(R.multiply(5), array)
// same as
R.map(R.multiply(5))(array)

@bahmutov

Multiply then print

const printAll = R.forEach(console.log)
printAll(multiplyAll(numbers))
const numbers = [3, 1, 7]
const constant = 2
const R = require('ramda')
const multiplyAll = R.map(R.multiply(constant))

@bahmutov

Composition

const multiplyAll = R.map(R.multiply(constant))
const printAll = R.forEach(console.log)
printAll(multiplyAll(numbers))

https://glebbahmutov.com/blog/refactoring-to-compose/

fn

fn

data

@bahmutov

Compose

// printAll(multiplyAll(numbers))
const computation = R.compose(printAll, multiplyAll)
computation (numbers)

Static logic

Dynamic data

@bahmutov

R.pipe is like R.compose

const {pipe, map, 
  multiply, forEach} = require('ramda')
const mulPrint = pipe(
  map(multiply(constant)),
  forEach(console.log)
)
mulPrint (numbers)

Try to make JavaScript read just like English

@bahmutov

Ramda + pointfree code makes my code simpler to read and modify

http://ramdajs.com/#introductions

@bahmutov

If you want to know more:

Presentations

https://slides.com/bahmutov/remove-the-boilerplate-confoo

https://slides.com/bahmutov/fun-javascript-workshop

My videos at

https://glebbahmutov.com/videos

https://glebbahmutov.com/blog/getting-good-at-fp/

@bahmutov

If you want to know more:

Professor Frisby https://github.com/MostlyAdequate/mostly-adequate-guide

https://egghead.io/courses/professor-frisby-introduces-composable-functional-javascript

Awesome list of resources

https://github.com/xgrommx/awesome-functional-programming

https://leanpub.com/javascript-allonge

https://glebbahmutov.com/blog/javascript-books/

@bahmutov

Arrays

Pure Funcs

Composition

Immutable

Web Apps?

@bahmutov

HyperApp.js

https://github.com/hyperapp/hyperapp

<body>
<script src="https://unpkg.com/hyperapp@0.7.1"></script>
<script src="https://wzrd.in/standalone/hyperx"></script>
<script>
  const {h, app} = hyperapp
  const html = hyperx(h)
  app({
    model: 'World!',
    view: (model) => html`<h2>Hello, ${model}</h2>`
  })
</script>
</body>

pure view function

ES6 templates to VDOM

@bahmutov

Actions change model

https://github.com/hyperapp/hyperapp

app({
  model: 0,
  actions: {
    click: model => model + 1
  },
  view: (model, actions) => html`
    <div>
      <h2>${model}</h2>
      <button onClick=${actions.click}>click</button>
    </div>
  `
})

pure view function

 pure action functions

@bahmutov

Subscriptions: external events

app({
  model: 0,
  actions: {
    tick: model => model + 1,
    reset: () => 0
  },
  subscriptions: [
    (model, actions) =>
      setInterval(actions.tick, 1000)
  ],
  view: (model, actions) => html`
    <div>
      <h2>${model}</h2>
      <button onClick=${actions.reset}>reset</button>
    </div>
  `
})

pure

pure

pure

not pure

Model

View

User

Actions

Subscriptions

H

https://github.com/hyperapp/hyperapp

@bahmutov

Queue of pure actions

view: (model, actions) => {
  const queue = []
  const schedule = queue.push.bind(queue)
  const go = _ => {
    queue.forEach(f => f())
    queue.length = 0
  }
  return html`
  <div>
    <h2>${model}</h2>
    <button onClick=${_ => schedule(actions.click)}>
      schedule</button>
    <button onClick=${go}>go</button>
  </div>
  `
}

@bahmutov

Frameworks like HyperApp are nice, but

@bahmutov

  1. Side effects!

  2. Linking components is too hard

We need "better" variables for async

Arrays cannot deal with dynamic data

Promises are single-shot

@bahmutov

observables

are like infinite arrays

var numbers = [1, 2, 3]
numbers.forEach(print) 
// 1, 2, 3

numbers.push(100)
// nothing happens

@bahmutov

numbers = Rx.Observable.create(observer => {







})

Rx.Observable.create

numbers.subscribe(print)
  observer.onNext(1)
  observer.onNext(2)
  observer.onNext(3)
  // ... after long delay
  observer.onNext(100)
  observer.onCompleted()
// 1, 2, 3
// ...
// 100

@bahmutov

observables are like  functions that can return multiple values

Observables are almost like Functions

// creation
var fn = function () { ... }
var ob = Rx.Observable.create(...)
// running
fn() // or fn.call()
numbers.subscribe(...)

@bahmutov

success, error, end

var ob = Rx.Observable.create(...)
numbers.subscribe(onNext, onError, onEnd)
// stream with error
// ----1---2---3----X

// stream with end event
// --1---2-3----|

@bahmutov

diagrams

// ----1---2------3----|
//    .map(double) 
// ----2---4------6----|
//  .filter(x => x > 4)
// ---------------6----|

@bahmutov

diagrams: marbles

rxmarbles.com

@bahmutov

operators

[1, 2, 3]
    .map(double)        // [2, 4, 6]
    .filter(x => x > 4) // [6]
    .forEach(print)     // 6
Rx.from([1, 2, 3])       // Observable 1
    .map(double)         // Observable 2 
    .filter(x => x > 4)  // Observable 3
    .subscribe(print)    // 6

must subscribe to cold 

stream to start the event flow!

@bahmutov

~175 RxJS operators

Rx.from([1, 2, 3])
    .map(double)
    .buffer(3)
    .delay(5)
    .subscribe(print)    
// pause of 5 seconds
// [2, 4, 6]

@bahmutov

User events

var numbers = Rx.from([1, 2, 3])
var clicks = Rx.Observable.fromEvent(
    document.querySelector('#btn'), 'click')
// -1-2-3-|             numbers 
// --c-------c-c------  clicks
//  zip((number, c) => number)
// --1-------2-3-|
numbers
    .zip(clicks, (number, t) => number)
    .subscribe(print)

@bahmutov

function searchWikipedia (term) {
    return $.ajax({
        url: 'http://en.wikipedia.org/w/api.php',
        dataType: 'jsonp',
        data: {
            action: 'opensearch',
            format: 'json',
            search: term
        }
    }).promise();
}

Write autocomplete

Hard problem: need to throttle, handle out of order returned results, etc.

@bahmutov

var keyups = Rx.Observable.fromEvent($('#input'), 'keyup')
    .map(e => e.target.value)
    .filter(text => text.length > 2)

Autocomplete with RxJs

keyups.throttle(500)
    .distinctUntilChanged()
    .flatMapLatest(searchWikipedia)
    .subscribe(function (data) {
        // display results
    });

How?

@bahmutov

var keyups = Rx.Observable.fromEvent($('#input'), 'keyup')
    .map(e => e.target.value)
    .filter(text => text.length > 2)

display results

keyups.throttle(500)
    .distinctUntilChanged()
    .flatMapLatest(searchWikipedia)
    .subscribe(function (data) {
        $('#results').innerHTML = '<ul>' +
            data.map(x => `<li>${x}</li>`) +
          '</ul>'
    });

Slow if only part of data changes

@bahmutov

var keyups = Rx.Observable.fromEvent($('#input'), 'keyup')
    .map(e => e.target.value)
    .filter(text => text.length > 2)

use virtual dom

keyups.throttle(500)
    .distinctUntilChanged()
    .flatMapLatest(searchWikipedia)
    .subscribe(function (data) {
        var vtree = vdom.ul(data.map(vdom.li))
        vdom.patch($('#results'), vtree)
    });

virtual-dom, snabdom

@bahmutov

reactive streams

@bahmutov

RxJs

Bacon.js

Kefir

Most.js

xstream

your choice

widely used, fast

light

fastest

tiny

@bahmutov

remember pure functions?

cycle.js makes your application pure

@bahmutov

factor out side effects

function main() {
  var keyups = Rx.Observable.fromEvent(
        $('#input'), 'keyup')
    .map(e => e.target.value)
    .filter(text => text.length > 2)
  keyups.throttle(500)
    .distinctUntilChanged()
    .flatMapLatest(searchWikipedia)
    .subscribe(function (data) {
        var vtree = vdom.ul(data.map(vdom.li))
        vdom.patch($('#results'), vtree)
    });
}
main()

Input from DOM

Output to DOM

@bahmutov

step 1: separate output

function main() {
  var keyups = Rx.Observable.fromEvent(
        $('#input'), 'keyup')
    .map(e => e.target.value)
    .filter(text => text.length > 2)
  return keyups.throttle(500)
    .distinctUntilChanged()
    .flatMapLatest(searchWikipedia)
    .map(data => vdom.ul(data.map(vdom.li))
}
function run(fn) {
  fn().subscribe(function (vtree) {
    vdom.patch($('#results'), vtree)
  });
}
run(main)

Input from DOM

Output to DOM

step 2: separate input

function main(dom$) {
  var keyups = dom$('#input', 'keyup')
    .map(e => e.target.value)
    .filter(text => text.length > 2)
  return keyups.throttle(500)
    .distinctUntilChanged()
    .flatMapLatest(searchWikipedia)
    .map(data => vdom.ul(data.map(vdom.li))
}
function run(fn) {
  var dom$ = (sel, event) 
    => Rx.Observable.fromEvent(...) }
  fn(dom$).subscribe(function (vtree) {
    vdom.patch($('#results'), vtree)
  });
}
run(main)

Input and Output

pure app

step 3: profit! (Cycle.js)

function main(dom$) {
  var keyups = dom$('#input', 'keyup')
    .map(e => e.target.value)
    .filter(text => text.length > 2)
  return keyups.throttle(500)
    .distinctUntilChanged()
    .flatMapLatest(searchWikipedia)
    .map(data => vdom.ul(data.map(vdom.li))
}
function run(fn) {
  var dom$ = (sel, event) 
    => Rx.Observable.fromEvent(...) }
  fn(dom$).subscribe(function (vtree) {
    vdom.patch($('#results'), vtree)
  });
}
run(main)

cycle.js framework

pure app

cycle.js is a tiny layer for controlling side effects ON TOP OF REACTIVE STREAMS 

@bahmutov

function main({DOM}) {
    const decrement$ = DOM.select('.decrement')
      .events('click').map(ev => -1);

    const increment$ = DOM.select('.increment')
      .events('click').map(ev => +1);

    const action$ = Observable.merge(decrement$, increment$);
    const count$ = action$.startWith(0).scan((x,y) => x+y);

    const vtree$ = count$.map(count =>
      div([
        button('.decrement', 'Decrement'),
        button('.increment', 'Increment'),
        p('Counter: ' + count)
      ])
    );
    return { DOM: vtree$ };
  }

counter example

ui to intent

intent to model

model to view

Intent - Model - View

@bahmutov

bahmutov/draw-cycle

function main({DOM}) {
    const decrement$ = DOM.select('.decrement')
      .events('click').map(ev => -1);

    const increment$ = DOM.select('.increment')
      .events('click').map(ev => +1);

    const action$ = Observable.merge(decrement$, increment$);
    const count$ = action$.startWith(0).scan((x,y) => x+y);

    const vtree$ = count$.map(count =>
      div([
        button('.decrement', 'Decrement'),
        button('.increment', 'Increment'),
        p('Counter: ' + count)
      ])
    );
    return { DOM: vtree$ };
  }

Functional Reactive Programming

every function

including 'main'

is pure

https://glebbahmutov.com/blog/is-framework-pure-or-not/

learning cycle.js

Cycle docs are fantastic

cycle.js.org/getting-started.html

A couple of presentations and videos at

https://slides.com/bahmutov

Cycle.js fundamentals at Egghead

CycleConf2017 videos https://vimeo.com/album/4578937 

@bahmutov

Pure functions are the best

Simple to write

Simple to read

Simple to test

Learn to use Observables

Great for async data flow

Factor out side effects

Some modern frameworks help with that

https://github.com/hyperapp/hyperapp

http://meiosis.js.org/

https://cycle.js.org/

The end

JS

👏 thank you 👏

slides.com/bahmutov/pure-magic

@bahmutov