FP tackles common programing problems.

1. Func up your code
Maciej Komorowski

2. What is func%onal programming?

3. 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

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

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

6. 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);
}

7. State muta(on

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

9. 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

10. What brogrammer does?
• drinkBeer
• talk

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

12. 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'
}

13. 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', () => {
brogrammer.drinkBeer();
// 8 x brogrammer.drinkBeer();
brogrammer.drinkBeer();
expect(brogrammer.talk()).toEqual("I a<M dRuNk");
});

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

15. How to remove state?
Single source of truth

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

17. Naïve stateless – drinkBeer tests
it('increment number of drunk beers', () => {
const store = { beers: 0 };
const brogrammer = new Brogrammer(store);
brogrammer.drinkBeer();
expect(store.beers).toEqual(1);
});

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

19. Naïve stateless – talk tests
it('says "I a<M dRuNk" after 10th beer', () => {
const store = { beers: 10 };
const brogrammer = new Brogrammer(store);
expect(brogrammer.talk()).toEqual("I a<M dRuNk");
});

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

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

22. How to improve?
The Redux way

23. Redux workflow2
2
Source: CSS-Tricks

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

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

26. Three Principles of Redux
State is read-only
store.dispatch({
type: 'INCREMENT_BEERS',
});

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

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

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

30. 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 });
});

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

32. Redux – drinkBeer tests
it('increment number of drunk beers', () => {
const store = createStore({ beers: 0 });
const brogrammer = new Brogrammer(store);
brogrammer.drinkBeer();
expect(store.dispatch)
.toHaveBeenCalledWith(incrementBeers());
});

33. Redux – drinkBeer implementa+on
// Inside Brogrammer class
drinkBeer() {
return this.store.dispatch(incrementBeers());
}

34. Redux – talk tests
it('says "I a<M dRuNk" after 10th beer', () => {
const store = createStore({ beers: 10 });
const brogrammer = new Brogrammer(store);
expect(brogrammer.talk()).toEqual("I a<M dRuNk");
});

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

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

37. A few thoughts on Redux

38. Immutable data

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

40. 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"]

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

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

43. 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

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

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

46. Should update problem
dirty bits
function hasChanged(form) {
for (var field in form) {
if (field.meta.dirty === true) {
return true;
}
}
return false;
}

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

48. Should update problem
immutable
let currentForm = { /* ... */ };
function hasChanged(form) {
return currentForm !== form;
}

49. 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));
}
}

50. 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

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

52. Explore func-onal programing❗
It's worth it

53. Contact
Maciej Komorowski
@komomc

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

55. 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]