Functional

Reactive
Programming

with
Cycle.js

https://slides.com/artfuldev/frp-with-cycle-js/live/

Functional
Reactive
Cycle.js

Functional?
Reactive
Cycle.js

Functional?
Reactive?
Cycle.js

Functional?
Reactive?
Cycle.js?

How to write great apps?

Simplicity

How to write great apps?

Simplicity
Clarity

If I can read the source code and understand what happens

Then most likely it will work

const todos = getTodos();
const updatedTodos = addNewTodo(todos, newTodo);
saveTodos(updatedTodos);

const todos = getTodos();
const updatedTodos = addNewTodo(todos, newTodo);
saveTodos(updatedTodos);

Where does this get data from?

const todos = getTodos();
const updatedTodos = addNewTodo(todos, newTodo);
saveTodos(updatedTodos);

Where does this get data from?

Does this get modified?

const todos = getTodos();
const updatedTodos = addNewTodo(todos, newTodo);
saveTodos(updatedTodos);

Where does this get data from?

Does this get modified?

How does this happen?

const todos = getTodos();
const updatedTodos = addNewTodo(todos, newTodo);
saveTodos(updatedTodos);

const todos = getTodos();
const updatedTodos = addNewTodo(todos, newTodo);
saveTodos(updatedTodos);

What if getTodos() gets called again?

const todos = getTodos();
const updatedTodos = addNewTodo(todos, newTodo);
saveTodos(updatedTodos);

What if getTodos() gets called again?

while the save is still executing?

const todos = getTodos();
const updatedTodos = addNewTodo(todos, newTodo);
saveTodos(updatedTodos);

const todos = getTodos();
const updatedTodos = addNewTodo(todos, newTodo);
saveTodos(updatedTodos);

const todos = getTodos();
const updatedTodos = addNewTodo(todos, newTodo);
saveTodos(updatedTodos);

Functions everywhere

const todos = getTodos();
const updatedTodos = addNewTodo(todos, newTodo);
saveTodos(updatedTodos);

Functions everywhere

Functional

const todos = getTodos();
const updatedTodos = addNewTodo(todos, newTodo);
saveTodos(updatedTodos);

Functions everywhere

Functional

A way to write programs in terms of simple functions

Great functions are...

Small

Great functions are...

Small
Simple

Great functions are...

Small
Simple
Pure

Functional Refactoring

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

var numbers = [3, 1, 7];
var constant = 2;

// 6 2 14

Functional Refactoring

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

var numbers = [3, 1, 7];
var constant = 2;

// Imperative / Prodedural
for(var i = 0; i < numbers.length; i++) {
  console.log(numbers[i] * constant);
}

// 6 2 14

var numbers = [3, 1, 7];
var constant = 2;

// Imperative / Prodedural
for(var i = 0; i < numbers.length; i++) {
  console.log(numbers[i] * constant);
}

// 6 2 14

var numbers = [3, 1, 7];
var constant = 2;

// Imperative / Prodedural
for(var i = 0; i < numbers.length; i++) {
  console.log(numbers[i] * constant);
}

// 6 2 14

for loop is a pain to debug and use

var numbers = [3, 1, 7];
var constant = 2;

// Imperative / Prodedural
for(var i = 0; i < numbers.length; i++) {
  console.log(numbers[i] * constant);
}

// 6 2 14

for loop is a pain to debug and use
mixing data manipulation with printing

var numbers = [3, 1, 7];
var constant = 2;

// Imperative / Prodedural
for(var i = 0; i < numbers.length; i++) {
  console.log(numbers[i] * constant);
}

// 6 2 14

for loop is a pain to debug and use
mixing data manipulation with printing
code is hard to reuse

Simple

A function does one thing, and one thing only

var numbers = [3, 1, 7];
var constant = 2;

function product(a, b) {
  return a * b;
}

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

// 6 2 14

var numbers = [3, 1, 7];
var constant = 2;

function product(a, b) {
  return a * b;
}

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

// 6 2 14

multiplies 2 numbers

var numbers = [3, 1, 7];
var constant = 2;

function product(a, b) {
  return a * b;
}

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

// 6 2 14

multiplies 2 numbers

prints 1 argument

var numbers = [3, 1, 7];
var constant = 2;

function product(a, b) {
  return a * b;
}

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

const result = product.bind(null, constant);
// result(x) is the same as product(constant, x)

// 6 2 14

Making new functions

var numbers = [3, 1, 7];
var constant = 2;

function product(a, b) {
  return a * b;
}

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

const result = product.bind(null, constant);
// result(x) is the same as product(constant, x)

// 6 2 14

Making new functions

var numbers = [3, 1, 7];
var constant = 2;

function product(a, b) {
  return a * b;
}

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

const result = product.bind(null, constant);
// result(x) is the same as product(constant, x)

// 6 2 14

Making new functions

var numbers = [3, 1, 7];
var constant = 2;

function product(a, b) {
  return a * b;
}

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

const result = product.bind(null, constant);
// result(x) is the same as product(constant, x)

function printResult(x) {
  print(result(x));
}

// 6 2 14

Composition

var numbers = [3, 1, 7];
var constant = 2;

function product(a, b) {
  return a * b;
}

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

const result = product.bind(null, constant);
// result(x) is the same as product(constant, x)

function printResult(x) {
  print(result(x));
}

// 6 2 14

Composition

One function, one variable

var numbers = [3, 1, 7];
var constant = 2;

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

const result = product.bind(null, constant);
function printResult(x) {
  print(result(x));
}

for(var i = 0; i < numbers.length; i++) {
    printResult(numbers[i]);
}

// 6 2 14

Refactoring

var numbers = [3, 1, 7];
var constant = 2;

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

const result = product.bind(null, constant);
function printResult(x) {
  print(result(x));
}

for(var i = 0; i < numbers.length; i++) {
    printResult(numbers[i]);
}

// 6 2 14

Refactoring

simple, small, reusable functions

var numbers = [3, 1, 7];
var constant = 2;

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

const result = product.bind(null, constant);
function printResult(x) {
  print(result(x));
}

for(var i = 0; i < numbers.length; i++) {
    printResult(numbers[i]);
}

// 6 2 14

Refactoring

simple, small, reusable functions

application logic functions

var numbers = [3, 1, 7];
var constant = 2;

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

const result = product.bind(null, constant);
function printResult(x) {
  print(result(x));
}

for(var i = 0; i < numbers.length; i++) {
    printResult(numbers[i]);
}

// 6 2 14

Refactoring

simple, small, reusable functions

application logic functions

iteration

var numbers = [3, 1, 7];
var constant = 2;

for(var i = 0; i < numbers.length; i++) {
    printResult(numbers[i]);
}
// 6 2 14

Iteration

var numbers = [3, 1, 7];
var constant = 2;

for(var i = 0; i < numbers.length; i++) {
    printResult(numbers[i]);
}
// 6 2 14

Iteration

numbers.forEach(printResult);

var numbers = [3, 1, 7];
var constant = 2;

for(var i = 0; i < numbers.length; i++) {
    printResult(numbers[i]);
}
// 6 2 14

Iteration

numbers.forEach(printResult);

same result

var numbers = [3, 1, 7];
var constant = 2;

for(var i = 0; i < numbers.length; i++) {
    printResult(numbers[i]);
}
// 6 2 14

Iteration

numbers.forEach(printResult);

same result

numbers                 // [3, 1,  7]
    .map(result)        // [6, 2, 14]
    .forEach(print);    // 6 2 14

var numbers = [3, 1, 7];
var constant = 2;

for(var i = 0; i < numbers.length; i++) {
    printResult(numbers[i]);
}
// 6 2 14

Iteration

numbers.forEach(printResult);

same result

numbers                 // [3, 1,  7]
    .map(result)        // [6, 2, 14]
    .forEach(print);    // 6 2 14

clearer semantics

Pure Functions

Only use input arguments

function product(a, b) {
    return a * b;
}

Pure Functions

Only use input arguments
Do not modify anything outside
(have no observable side effects)

function product(a, b) {
    return a * b;
}

Pure Functions

Only use input arguments
Do not modify anything outside
(have no observable side effects)
return the same result for the same
inputs every time

function product(a, b) {
    return a * b;
}

Pure Functions

Only use input arguments
Do not modify anything outside
(have no observable side effects)
return the same result for the same
inputs every time

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

Pure Functions

Only use input arguments
Do not modify anything outside
(have no observable side effects)
return the same result for the same
inputs every time

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

not pure
console is defined outside

Pure Functions

Only use input arguments
Do not modify anything outside
(have no observable side effects)
return the same result for the same
inputs every time

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

not pure
has side effects on the terminal

Pure Functions

Only use input arguments
Do not modify anything outside
(have no observable side effects)
return the same result for the same
inputs every time

function getTime() {
    return new Date();
}

Pure Functions

Only use input arguments
Do not modify anything outside
(have no observable side effects)
return the same result for the same
inputs every time

function getTime() {
    return new Date();
}

not pure
does not operate on inputs?

Pure Functions

Only use input arguments
Do not modify anything outside
(have no observable side effects)
return the same result for the same
inputs every time

function getTime() {
    return new Date();
}

not pure
does not operate on inputs? not really

Pure Functions

Only use input arguments
Do not modify anything outside
(have no observable side effects)
return the same result for the same
inputs every time

function getTime() {
    return new Date();
}

not pure
does not return same outputs every time

Pure Functions

Simple to write
Simple to read
Simple to test

function product(a, b) {
    return a * b;
}

My Advice

Write small, simple, pure functions

My Advice

Write small, simple, pure functions
Try to compose for complex logic

My Advice

Write small, simple, pure functions
Try to compose for complex logic
Progress slowly through the codebase

Functional?
Reactive?
Cycle.js?

A way to write programs in terms of simple functions

Functional?
Reactive?
Cycle.js?

A way to write programs in terms of simple functions

var a = 3;
var b = 5;

var c = a + b;
// c is 8

var a = 3;
var b = 5;

var c = a + b;
// c is 8

a = -3;
// c is still 8

var a = 3;
var b = 5;

var c = a + b;
// c is 8

a = -3;
// c is still 8

I want c to be recomputed whenever a or b changes

var c = a + b;

Set c to the value of a + b

var c = a + b;

???

Declare c to be the
sum of a and b

Set c to the value of a + b

var a = 3;
var b = 5;

var c = a + b;
// c is 8

a = -3;
// c is still 8

var a = 3;
var b = 5;

var c = a + b;
// c is 8

a = -3;
// c is still 8

c = a + b;
// c is now 3

var a = 3;
var b = 5;

var c = a + b;
// c is 8

a = -3;
// c is still 8

c = a + b;
// c is now 3

We need to call "c = ..." every time, to set it to the new value

Proactive

a

b

c

Proactive

Every code updating a or b also has to update c

a

b

c

Proactive

Every code updating a or b also has to update c

a

b

c

Proactive

Ties a and b very closely to c

a

b

c

Reactive

Spreadsheets?

Reactive

Spreadsheets?

Proactive

a and b also update c whenever they are updated

a

b

c

Reactive

c updates itself whenever there is a change in
a or b

a

b

c

Reactive

a and b emit events, c updates itself when an event arrives

a

b

c

Reactive

a and b emit events, c updates itself when an event arrives

a

b

c

0

Reactive

a and b emit events, c updates itself when an event arrives

a

b

c

0

3

Reactive

a and b emit events, c updates itself when an event arrives

a

b

c

3

Reactive

a and b emit events, c updates itself when an event arrives

a

b

c

3

5

3

Reactive

a and b emit events, c updates itself when an event arrives

a

b

c

8

3

5

Reactive

a and b emit events, c updates itself when an event arrives

a

b

c

8

5 -3

Reactive

a and b emit events, c updates itself when an event arrives

a

b

c

2

5 -3

Reactive

a

b

c

2

5 -3

Reactive

a

b

c

2

5 -3

Reactive

a

b

c

2

5 -3

?

What are a and b?

Custom Code

What are a and b?

Custom Code

Event Emitters

What are a and b?

Custom Code

Event Emitters

Streams

What are a and b?

Streams

What are streams?

Streams are collections, like arrays

What are streams?

const numbers = [1, 2, 3];
numbers.forEach(print);

// 1 2 3

Streams are collections, like arrays

What are streams?

Streams are collections, like arrays

const numbers = [1, 2, 3];
numbers.forEach(print);

// 1 2 3

numbers.push(100);
// nothing happens

What are streams?

Streams are collections, like arrays, but whereas

arrays are

collections over space,
streams are
collections over time

next, error, complete

A stream can emit indefinitely, or terminate with error or complete events

next, error, complete

A stream can emit indefinitely

// stream that never emits
// -------------------

// stream that never ends
// ----1---2-3----4-5-

// stream that terminates with error
// ----1---2---3----X

// stream that terminates with complete
// --1---2-3--4-|

Marble Diagrams

// stream that never emits
// -------------------

// stream that never ends
// ----1---2-3----4-5-

// stream that terminates with error
// ----1---2---3----X

// stream that terminates with complete
// --1---2-3--4-|

Marble Diagrams

and operators

Reactive?

A way to write programs using explicit data flows and propagation of change

Functional?
Reactive?
Cycle.js?

A way to write programs in terms of simple functions

A way to code with data flows and propagation of change

Functional?
Reactive?
Cycle.js?

A way to write programs in terms of simple functions

A way to code with data flows and propagation of change

Remember pure functions?

Cycle.js

lets you write
your entire app
as a single
pure function

Cycle.js

bringing the advantages
of pure functions
with it

Cycle.js

apps

So,

Cycle.js

apps

So,

are functional & reactive

Cycle.js

apps

So,

are functional & reactive

are simple & concise

Cycle.js

apps

So,

are functional & reactive

are simple & concise

are extensible & testable

Cycle.js

apps

So,

are functional & reactive

are simple & concise

are extensible & testable

have explicit data flow

Cycle.js

apps are pure functions,

Also, since your

Cycle.js

apps are pure functions,

Also, since your

they are

Cycle.js

apps are pure functions,

Also, since your

they are

composable

just like functions

Cycle.js

apps are pure functions,

Also, since your

they are

composable

just like functions

(your app can run inside another Cycle.js app)

Let's talk with examples

Problem: Create a simple application that has a counter with increment and decrement buttons

import xs from 'xstream';
import { run } from '@cycle/xstream-run';
import { div, button, p, makeDOMDriver } from '@cycle/dom';

function main(sources) {
  const intent$ = xs.merge<number>(
    sources.DOM.select('.decrement').events('click').map(ev => -1),
    sources.DOM.select('.increment').events('click').map(ev => 1)
  );
  const count$ = intent$.fold((count, intent) => count + intent, 0);
  return {
    DOM: count$.map(count =>
        div([
          button('.decrement', 'Decrement'),
          button('.increment', 'Increment'),
          p('Counter: ' + count)
        ])
      )
  };
}

run(main, {
  DOM: makeDOMDriver('#app')
});

A litte more complicated this time...

Cycle.js

A functional and reactive JavaScript framework for cleaner code

Functional?
Reactive?
Cycle.js?

A way to write programs in terms of simple functions

A way to code with data flows and propagation of change

A functional and reactive framework for cleaner code

Functional?
Reactive?
Cycle.js?

A way to write programs in terms of simple functions

A way to code with data flows and propagation of change

A functional and reactive framework for cleaner code

This stuff is great!

How do I get to learn more about all this?

Cycle.js docs are fantastic

cycle.js.org/getting-started

gitter.im/cyclejs/cyclejs

cyclejs-community/cyclejs-community

Egghead.io Course on Cycle.js Fundamentals

Cycle.js community is very friendly and helpful

@cyclejs

Cycle.js

Uses functional reactive streams to describe the data flow in application

Cycle.js

Side effects (DOM, HTTP, etc) are isolated via drivers

Cycle.js

Works out of the box with real time backends (WebSockets, IoT)

Questions?

slides artfuldev/frp-with-cycle-js/

twitter @theartfuldev

github @artfuldev

Functional

Reactive Programming

with Cycle.js

Functional Reactive Cycle.js

Functional? Reactive Cycle.js

Functional? Reactive? Cycle.js

Functional? Reactive? Cycle.js?

Functional? Reactive? Cycle.js?

How to write great apps?

How to write great apps?

Simplicity

How to write great apps?

Simplicity

Clarity

If I can read the source code and understand what happens

Then most likely it will work

Functions everywhere

Functions everywhere

Functional

Functions everywhere

Functional

Great functions are...

Great functions are...

Great functions are...

Great functions are...

Functional Refactoring

Functional Refactoring

Simple

Simple

A function does one thing, and one thing only

Making new functions

Making new functions

Making new functions

Composition

Composition

One function, one variable

Refactoring

Refactoring

Refactoring

Refactoring

Iteration

Iteration

Iteration

Iteration

Iteration

Pure Functions

Pure Functions

Pure Functions

Pure Functions

Pure Functions

Pure Functions

Pure Functions

Pure Functions

Pure Functions

Pure Functions

Pure Functions

Simple to write

Simple to read

Simple to test

My Advice

My Advice

Write small, simple, pure functions

My Advice

Write small, simple, pure functions

Try to compose for complex logic

My Advice

Write small, simple, pure functions

Try to compose for complex logic

Progress slowly through the codebase

Functional? Reactive? Cycle.js?

Functional? Reactive? Cycle.js?

I want c to be recomputed whenever a or b changes

Set c to the value of a + b

Declare c to be the sum of a and b

Set c to the value of a + b

We need to call "c = ..." every time, to set it to the new value

Proactive

a

b

c

Reactive
Programming

with
Cycle.js

Functional
Reactive
Cycle.js

Functional?
Reactive
Cycle.js

Functional?
Reactive?
Cycle.js

Functional?
Reactive?
Cycle.js?

Functional?
Reactive?
Cycle.js?

Functional?
Reactive?
Cycle.js?

Functional?
Reactive?
Cycle.js?

Declare c to be the
sum of a and b

c updates itself whenever there is a change in
a or b