# with Cycle.js

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

# If I can read the source code and understand what happens

## Then most likely it will work

``````const todos = getTodos();
saveTodos(updatedTodos);``````
``````const todos = getTodos();
saveTodos(updatedTodos);``````

Where does this get data from?

``````const todos = getTodos();
saveTodos(updatedTodos);``````

Where does this get data from?

Does this get modified?

``````const todos = getTodos();
saveTodos(updatedTodos);``````

Where does this get data from?

Does this get modified?

How does this happen?

``````const todos = getTodos();
saveTodos(updatedTodos);``````
``````const todos = getTodos();
saveTodos(updatedTodos);``````

What if getTodos() gets called again?

``````const todos = getTodos();
saveTodos(updatedTodos);``````

What if getTodos() gets called again?

while the save is still executing?

``````const todos = getTodos();
saveTodos(updatedTodos);``````
``````const todos = getTodos();
saveTodos(updatedTodos);``````
``````const todos = getTodos();
saveTodos(updatedTodos);``````

## Functions everywhere

``````const todos = getTodos();
saveTodos(updatedTodos);``````

# Functional

``````const todos = getTodos();
saveTodos(updatedTodos);``````

# Functional

A way to write programs in terms of simple functions

• Small

• Small
• Simple

• 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``````

## 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 test

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

# 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 bchanges

``var c = a + b;``

## Set c to the value of a + b

``var c = a + 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``````

# What are streams?

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

// 1 2 3``````

# What are streams?

## Streams are collections, like arrays

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

// 1 2 3``````
``````numbers.push(100);
// nothing happens``````

# 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-|``````

# 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​

# Let's talk with examples

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

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

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')
});``````

# 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

# 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)