Successfully reported this slideshow.
Upcoming SlideShare
×

# Functional programming with Immutable .JS

438 views

Published on

Presentation given by David Wilde at Yolk Recruitment's IT Contractor event on 18th May.

Published in: Technology
• Full Name
Comment goes here.

Are you sure you want to Yes No
• Be the first to comment

### Functional programming with Immutable .JS

1. 1. FUNCTIONAL PROGRAMMING WITH IMMUTABLE.JS DAVID WILDE
2. 2. THE 45TH PRESIDENT BUT FOR HOW LONG?
3. 3. FUNCTIONAL PROGRAMMING WITH IMMUTABLE.JS IMMUTABILITY VS MUTABILITY ▸Mutable means ‘capable of changing’ ▸Immutable means ‘cannot change’ ▸Strings are immutable in most programming languages ▸Objects are mutable in JavaScript
4. 4. FUNCTIONAL PROGRAMMING WITH IMMUTABLE.JS IMMUTABLE OBJECTS IN THE REAL WORLD ▸ Newspapers ▸ Accountancy Book-keeping ▸ Constitutions/Contracts ▸ Audits ▸ Facts presenting the state of something at a given time
5. 5. FUNCTIONAL PROGRAMMING WITH IMMUTABLE.JS IMMUTABILITY IN CODE ▸Javascript numbers are immutable let a = 1 let b = 2 let c = a + b ▸Strings are immutable let a = “foo” let b = “bar” let c = a + b
6. 6. FUNCTIONAL PROGRAMMING WITH IMMUTABLE.JS IMMUTABILITY IN CODE ▸Javascript numbers are immutable let a = 1 let b = 2 let c = a + b // a: 1, b: 2, c: 3 ▸Strings are immutable let a = “foo” let b = “bar” let c = a + b
7. 7. FUNCTIONAL PROGRAMMING WITH IMMUTABLE.JS IMMUTABILITY IN CODE ▸Javascript numbers are immutable let a = 1 let b = 2 let c = a + b // a: 1, b: 2, c: 3 ▸Strings are immutable let a = “foo” let b = “bar” let c = a + b // a: “foo”, b: “bar”, c: “foobar”
8. 8. FUNCTIONAL PROGRAMMING WITH IMMUTABLE.JS IMMUTABILITY IN CODE ▸Some array methods are immutable let a = [ 1, 2 ] let b = [ 3, 4 ] let c = a.concat(b) ▸Others are not let a = [ 1, 2, 5 ] let b = a.push(8)
9. 9. FUNCTIONAL PROGRAMMING WITH IMMUTABLE.JS IMMUTABILITY IN CODE ▸Some array methods are immutable let a = [ 1, 2 ] let b = [ 3, 4 ] let c = a.concat(b) // a: [ 1, 2 ] // b: [ 3, 4 ] // c: [ 1, 2, 3, 4 ] ▸Others are not let a = [ 1, 2, 5 ] let b = a.push(8)
10. 10. FUNCTIONAL PROGRAMMING WITH IMMUTABLE.JS IMMUTABILITY IN CODE ▸Some array methods are immutable let a = [ 1, 2 ] let b = [ 3, 4 ] let c = a.concat(b) // a: [ 1, 2 ] // b: [ 3, 4 ] // c: [ 1, 2, 3, 4 ] ▸Others are not let a = [ 1, 2, 5 ] let b = a.push(8) // a: [ 1, 2, 5, 8 ]
11. 11. FUNCTIONAL PROGRAMMING WITH IMMUTABLE.JS IMMUTABILITY IN CODE ▸Some array methods are immutable let a = [ 1, 2 ] let b = [ 3, 4 ] let c = a.concat(b) // a: [ 1, 2 ] // b: [ 3, 4 ] // c: [ 1, 2, 3, 4 ] ▸Others are not let a = [ 1, 2, 5 ] let b = a.push(8) // a: [ 1, 2, 5, 8 ] // b: 4
12. 12. FUNCTIONAL PROGRAMMING WITH IMMUTABLE.JS OBJECT-ORIENTATED PROGRAMMING TENDS TO MUTABILITYclass Kettle { int temperature = 0; int getTemperature() { return this.temperature; } void boil() { this.temperature = 100; } } class Order { int id; drink[] drinks; Order(id) { this.id = id; } addDrink(drink) { this.drinks.push(drink); } process() { } } class Coffee extends Beverage { ...
13. 13. FUNCTIONAL PROGRAMMING WITH IMMUTABLE.JS MAKING THIS OPERATION IMMUTABLE var list1 = Immutable.List.of(1, 2) var list2 = list1.push(3, 4, 5) // list1: [ 1, 2 ] // list2: [ 1, 2, 3, 4, 5 ]
14. 14. FUNCTIONAL PROGRAMMING
15. 15. FUNCTIONAL PROGRAMMING WITH IMMUTABLE.JS FUNCTIONS VS CLASSES ▸Functions do specific things ▸Classes are specific things f(x)
16. 16. FUNCTIONAL PROGRAMMING WITH IMMUTABLE.JS ARRAY MAP a = [1, 2, 5] function double(value) { return value * 2; } function addOne(value) { return + 1; } b = a.map(double).map(addOne) // b: [3, 5, 11]
17. 17. FUNCTIONAL PROGRAMMING WITH IMMUTABLE.JS ARRAY MAP a = [1, 2, 5] const double = (value) => value * 2; const addOne = (value) => value + 1; b = a.map(double).map(addOne) // b: [3, 5, 11]
18. 18. FUNCTIONAL PROGRAMMING WITH IMMUTABLE.JS PURE FUNCTIONS var me = { name: “David” }; const hello = () => ( console.log(“Hello, “ + me.name) );
19. 19. FUNCTIONAL PROGRAMMING WITH IMMUTABLE.JS PURE FUNCTIONS const hello = (person) => ( “Hello, “ + person.name ); console.log(hello({name: “David”}));
20. 20. FUNCTIONAL PROGRAMMING WITH IMMUTABLE.JS PURE FUNCTIONS const myObject = {a: 1, b: 2} const myFunc = (obj) => { obj.a = obj.a * 2 return obj } const newObj = myFunc(myObject) console.log(myObject) // {a: 2, b: 2} console.log(newObj) // {a: 2, b: 2)
21. 21. FUNCTIONAL PROGRAMMING WITH IMMUTABLE.JS PURE FUNCTIONS const myImmutable = Immutable.fromJS({a: 1, b: 2}) const myFunc = (obj) => { return myImmutable.set(‘a’, myImmutable.get(‘a’) * 2) } const newObj = myFunc(myObject) console.log(myObject.toJS()) // {a: 1, b: 2} console.log(newObj.toJS()) // {a: 2, b: 2)
22. 22. PERFORMANCE ENHANCEMENTS USING IMMUTABLE DATA STRUCTURES
23. 23. FUNCTIONAL PROGRAMMING WITH IMMUTABLE.JS DRAW DOM BASED ON THE STATE STATE OBJECT SOME INPUT
24. 24. FUNCTIONAL PROGRAMMING WITH IMMUTABLE.JS DRAW DOM BASED ON THE STATE STATE OBJECT SOME INPUT CLONED OBJECT COMPARE STATE VS CLONE Same Differ
25. 25. FUNCTIONAL PROGRAMMING WITH IMMUTABLE.JS COMPARING TWO OBJECTS IN JAVASCRIPT
26. 26. FUNCTIONAL PROGRAMMING WITH IMMUTABLE.JS COMPARING TWO OBJECTS IN JAVASCRIPT function compare2Objects (x, y) { var p; // remember that NaN === NaN returns false // and isNaN(undefined) returns true if (isNaN(x) && isNaN(y) && typeof x === 'number' && typeof y === 'number') { return true; } // Compare primitives and functions. // Check if both arguments link to the same object. // Especially useful on the step where we compare prototypes if (x === y) { return true; } // Works in case when functions are created in constructor. // Comparing dates is a common scenario. Another built-ins? // We can even handle functions passed across iframes if ((typeof x === 'function' && typeof y === 'function') || (x instanceof Date && y instanceof Date) || (x instanceof RegExp && y instanceof RegExp) || (x instanceof String && y instanceof String) || (x instanceof Number && y instanceof Number)) { return x.toString() === y.toString(); } // At last checking prototypes as good as we can if (!(x instanceof Object && y instanceof Object)) { return false; } if (x.isPrototypeOf(y) || y.isPrototypeOf(x)) { return false; } if (x.constructor !== y.constructor) { return false; } if (x.prototype !== y.prototype) { return false; } // Check for infinitive linking loops if (leftChain.indexOf(x) > -1 || rightChain.indexOf(y) > -1) { return false; } // Quick checking of one object being a subset of another. // todo: cache the structure of arguments[0] for performance for (p in y) { if (y.hasOwnProperty(p) !== x.hasOwnProperty(p)) { return false; } else if (typeof y[p] !== typeof x[p]) { return false; } } for (p in x) { if (y.hasOwnProperty(p) !== x.hasOwnProperty(p)) { return false; } else if (typeof y[p] !== typeof x[p]) { return false; } switch (typeof (x[p])) { case 'object': case 'function': leftChain.push(x); rightChain.push(y); if (!compare2Objects (x[p], y[p])) { return false; } leftChain.pop(); rightChain.pop(); break; default: if (x[p] !== y[p]) { return false; } break; } }
27. 27. FUNCTIONAL PROGRAMMING WITH IMMUTABLE.JS COMPARING TWO OBJECTS IN JAVASCRIPT
28. 28. FUNCTIONAL PROGRAMMING WITH IMMUTABLE.JS PARTICULAR PERFORMANCE IMPROVEMENTS ARE AVAILABLE DRAW DOM BASED ON THE STATE STATE OBJECT SOME INPUT STORE OLD REF COMPARE STATE REF VS OLD REF Same Differ
29. 29. STRUCTURAL SHARING
30. 30. FUNCTIONAL PROGRAMMING WITH IMMUTABLE.JS PERSISTENT DATA STRUCTURES 1 List.of([ 1, 2, 3, 5, 8 ]).push(13) 2 3 50x0012 8
31. 31. FUNCTIONAL PROGRAMMING WITH IMMUTABLE.JS PERSISTENT DATA STRUCTURES 1 2 3 50x0012 1 2 3 50x0042 8 8 13 List.of([ 1, 2, 3, 5, 8 ]).push(13)
32. 32. TRIE
33. 33. FUNCTIONAL PROGRAMMING WITH IMMUTABLE.JS STRUCTURAL SHARING 2 3 5 0x0012 1 8 List.of([ 1, 2, 3, 5, 8 ]).push(13)
34. 34. FUNCTIONAL PROGRAMMING WITH IMMUTABLE.JS STRUCTURAL SHARING 2 3 5 0x0012 1 8 1 8 13 0x0042 List.of([ 1, 2, 3, 5, 8 ]).push(13)
35. 35. CONCLUSION
36. 36. WORKSHOP https://github.com/davidwilde/poop-sweeper
37. 37. FUNCTIONAL PROGRAMMING WITH IMMUTABLE.JS IMMUTABLE.JS var map = Immutable.Map({ a: 1, b: 2, c: 3 }) map .set('b', 50) .get('b') // 50 var list = Immutable.List.of(1, 2) list .push(3, 4, 5) .unshift(0) .concat(list2, list3) .get(0) .size var nested = Immutable.fromJS({ user: { profile: { name: 'John' } } }) nested .mergeDeep({ user: { profile: { age: 90 } } }) .setIn([ 'user', 'profile', 'name' ], 'Jack') .updateIn([ 'user', 'profile', 'name' ], (s) => s.toUpperCase()) .getIn(['user', 'profile', 'name']) // 'JACK'