Func up your code

Func up your code
Maciej Komorowski

What is func%onal programming?

Func%onal programming is
programming paradigm [...] that
treats computa%on as the evalua%on
of mathema&cal func&ons and
avoids changing-state and mutable
data.
— Wikipedia

Pillars of FP
• Higher-order func0ons (e.g. map)
• Immutable data
• Lazy evalua0on
• Pure func0ons
• Recursion

Pure func)on
! Always evaluates the same result value given the same
arguments
! Does not cause any seman5cally observable side eﬀect, such as
muta5on of mutable objects

Pure func)on examples
// Pure
function add(a, b) {
return a + b;
}
// Impure
Math.random();
// Impure
const items = []
function addItem(item) {
return items.push(item);
}

State muta(on in OOP
! Relies heavily on encapsula)on
! Has hidden nature
! Brings nondeterminism
! Root cause of doom

Brogrammer1
State muta)on example
A brogrammer is [...] a slang term for a
macho, male programmer. A brogrammer
might self-describe as a sociable
programmer.
— Wikipedia
1
Frans Hals, Oil on canvas, 1630. Source: classicprogrammerpain;ngs

What brogrammer does?
• drinkBeer
• talk

Stateful implementa*on
class Brogrammer {
constructor() {
this.beers = 0;
}
drinkBeer() { /* ... */ }
talk() { /* ... */ }
}

Stateful – drinkBeer
it('increment number of drunk beers', () => {
expect(brogrammer.drinkBeer()).toEqual(1);
expect(brogrammer.drinkBeer()).toEqual(2);
});
// Inside Brogrammer class
drinkBeer() {
return this.beers += 1; // encapsulates 'beers'
}

Stateful – talk tests
it('says "Beer me up!" before drinking', () => {
expect(brogrammer.talk()).toEqual("Beer me up!");
});
it('says "Yummy" after 1st beer', () => {
brogrammer.drinkBeer();
expect(brogrammer.talk()).toEqual("Yummy");
});
it('says "I a<M dRuNk" after 10th beer', () => {
// 8 x brogrammer.drinkBeer();
expect(brogrammer.talk()).toEqual("I a<M dRuNk");
});

Stateful – talk implementa+on
talk() {
return ({
0: 'Beer me up!',
1: 'Yummy',
// ...
10: 'I a<M dRuNk',
})[this.beers] || '';
}

How to remove state?
Single source of truth

Naïve stateless – implementa+on
class Brogrammer {
constructor(store) {
this.store = store;
}
// ...
}

Naïve stateless – drinkBeer tests
const store = { beers: 0 };
const brogrammer = new Brogrammer(store);
expect(store.beers).toEqual(1);
});

Naïve stateless – drinkBeer implementa+on
drinkBeer() {
return this.store.beers += 1;
}

Naïve stateless – talk tests
const store = { beers: 10 };
});

Naïve stateless – talk implementa+on
talk() {
return ({
0: 'Beer me up!',
1: 'Yummy',
// ...
10: 'I a<M dRuNk',
})[this.store.beers] || '';
}

Solu%on review
! Removed state from the Brogrammer
! Easier tes2ng
" Lost encapsula-on

Redux workﬂow2
2
Source: CSS-Tricks

Three Principles of Redux3
! Single source of truth
! State is read-only
! Changes are made with pure func)ons
3
Source: Redux

Three Principles of Redux
Single source of truth
console.log(store.getState());
// {
// brogrammer: {
// beers: 0
// }
// }

State is read-only
store.dispatch({
type: 'INCREMENT_BEERS',
});

Changes are made with pure func3ons
function brogrammer(state = {}, action) {
switch (action.type) {
case 'SET_BEERS':
return {
...state,
beers: 5,
};
// case ...
}
}

Redux – incrementBeers ac%on
it('returns action with type INCREMENT_BEERS', () => {
const action = incrementBeers();
expect(action).toEqual({
type: 'INCREMENT_BEERS'
});
});

Redux – incrementBeers ac%on
const incrementBeers = () => ({
type: 'INCREMENT_BEERS',
});

Redux – brogrammer reducer
it('returns state with incremented beers', () => {
const state = { beers: 0 };
const action = incrementBeers();
const nextState = brogrammer(state, action);
expect(nextState).toEqual({ beers: 1 });
});

Redux – brogrammer reducer
implementa)on
const brogrammer = (state = {}, action) => {
switch (action.type) {
case 'INCREMENT_BEERS':
return {
...state,
beers: state.beers + 1
};
default:
return state
}
}

Redux – drinkBeer tests
const store = createStore({ beers: 0 });
expect(store.dispatch)
.toHaveBeenCalledWith(incrementBeers());
});

Redux – drinkBeer implementa+on
drinkBeer() {
return this.store.dispatch(incrementBeers());
}

Redux – talk tests
const store = createStore({ beers: 10 });
});

Redux – talk implementa+on
talk() {
return ({
0: 'Beer me up!',
1: 'Yummy',
// ...
10: 'I a<M dRuNk',
})[this.store.get('beers')] || '';
}

Solu%on review
! Easy tes(ng
! Be,er separa(on
! Explicit state changes
! Full control over state

Mutable vs immutable
// Mutable
const items = ['foo'];
items.push('bar');
items.push('baz');
console.log(items); // ["foo", "bar", "baz"]

Mutable vs immutable
// Immutable via immutable-js
const items = Immutable.List.of('foo');
items.push('bar');
items.push('baz');
console.log(items.toArray());
// ["foo"]
console.log(items.push('bar').push('baz').toArray());
// ["foo", "bar", "baz"]

What about performance?5
5
Source: React.js Conf 2015 - Immutable Data and React

Performance benchmark
Array push 1,000,000 items:
var list = [];
for (var i = 0; i < 1000000; i++) {
list.push(i);
}
83 ms

Performance benchmark
Mori immutable vector conj 1,000,000 items:
var list = mori.vector();
for (var i = 0; i < 1000000; i++) {
mori.conj(list, i);
}
288 ms

Should update problem
const form = { /* ... */ };
function submit(form) {
if (hasChanged(form)) {
doSomethingExpensive(form);
}
}

versioning
let currentFormVersion;
function hasChanged(form) {
const formVersion = md5(JSON.stringify(form));
return formVersion !== currentFormVersion;
}

dirty bits
for (var field in form) {
if (field.meta.dirty === true) {
return true;
}
}
return false;
}

observable pa+ern
const form = { /* ... */ };
Object.observe(form, changes => {
doSomethingExpensive(form);
});
form.firstName = 'Maciej';
form.lastName = 'Komorowski';
form.profession = 'Brogrammer'; // Not true :)

immutable
let currentForm = { /* ... */ };
return currentForm !== form;
}

Memoiza(on example
function memoize(fn) {
var cache = {};
return function (arg) {
var hash = arg === Object(arg)
? JSON.stringify(arg) // Wat?
: arg;
return hash in cache ?
cache[hash] :
(cache[hash] = fn.call(this, arg));
}
}

Memoiza(on example
function rawSum(list) {
return list.reduce((a, b) => a + b)
}
const sum = memoize(rawSum);
const array = [0, 1, ...1000000];
sum(array); // 89 ms
rawSum(array); // 51 ms
sum(array); // 42 ms

Advantages of immutability
! No defensive copies
! Can be faster
! Be3er for concurrency (no deadlocks)

Explore func-onal programing❗
It's worth it

Contact
Maciej Komorowski
@komomc

Quiz
What f does?
f = 0 : 1 : zipWith (+) f (tail f)

Answer
Generates Fibonacci sequence
> let fibs = 0 : 1 : zipWith (+) fibs (tail fibs)
> take 11 fibs
[0,1,1,2,3,5,8,13,21,34,55]

Func up your code

More Related Content

What's hot (20)

Viewers also liked (16)

Similar to Func up your code (20)

Recently uploaded (20)

Func up your code