Immutable Data & Immutable.js

What is immutable data, why should I use it, and how do I use it? This talk was originally given during my Senior Phase at Fullstack Academy.

Transcript

1. Immutable Data & Immutable.js Beth Qiang
2. intro what why how
3. functional programming & immutability intro
4. object-oriented programming is an object with attributes and methods defined in a class* the main unit of *including fake classes, *cough* javascript *cough*
5. functional programming is a function that must produce the same output for the same input the main unit of
6. –Michael Feathers “Object oriented programming makes code understandable by encapsulating moving parts. Functional programming makes code understandable by minimizing moving parts.”
7. features of functional programming pure functions • recursion • composability • immutability xkcd
8. what will the following block of code print? let string = 'magic'; string[4] = 'k'; console.log(string);
9. strings are immutable in javascript! as are: numbers, booleans, & other primitive values
10. however, objects are mutable… let arr1 = [1, 2, 3]; arr[2] = 5; console.log(arr1); // [ 1, 2, 5 ]
11. …sorta let arr1 = [1, 2, 3]; let arr2 = arr1.map(item => item * 2); console.log(arr1); // [ 1, 2, 3 ] console.log(arr2); // [ 2, 4, 6 ]
12. is Immutable.js? what
13. the next step in facebook’s plan to achieve world domination
14. a javascript library that offers collections that are persistent and immutable
15. const list1 = Immutable.List([1, 2, 3]); const list2 = list1.push(4); console.log(list1); // [1, 2, 3] console.log(list2); // [1, 2, 3, 4]
16. List.prototype.push = function (value) { // 1. make a copy var clone = deepCopy(this); // 2. edit the copy clone[clone.length] = value; // 3. return the copy return clone; };
17. isn’t that slow and inefficient?
18. the magic of structural sharing
19. A B C D E F G directed acyclic graph (trie)
20. A B C D E F G directed acyclic graph (trie)
21. A B C D E F G directed acyclic graph (trie)
22. A B C D E F G directed acyclic graph (trie)
23. A B C D E F G H directed acyclic graph (trie)
24. A B C D E F G H directed acyclic graph (trie) B’
25. A B C D E F G H directed acyclic graph (trie) B’ C’
26. A B C D E F G H directed acyclic graph (trie) B’ C’ D’
27. A E F G H directed acyclic graph (trie) B’ C’ D’
28. should I use immutable data & Immutable.js? why
29. makes life slightly simpler increases predictability easier to test re-use code “true” immutability
30. reduced memory usage
31. change detection, mutation tracking, & persistent history
32. thread-safe better for concurrent programming
33. do I use it? how
34. npm install --save immutable import Immutable from 'immutable';
35. lists maps nested objects
36. const list = Immutable.List(['Batman', 'Spiderman', 'Superman']); // or: const list = Immutable.List.of('Batman', 'Spiderman', 'Superman'); list[0]; // undefined list.get(0); // "Batman" const list2 = list.set(0, 'Bruce Wayne’); // list = ["Batman", "Spiderman", "Superman"] // list2 = ["Bruce Wayne", "Spiderman", "Superman"] lists
37. const list = Immutable.List(['Batman', 'Spiderman', 'Superman']); // or: const list = Immutable.List.of('Batman', 'Spiderman', 'Superman'); list[0]; // undefined list.get(0); // "Batman" const list2 = list.set(0, 'Bruce Wayne’); // list = ["Batman", "Spiderman", "Superman"] // list2 = ["Bruce Wayne", "Spiderman", "Superman"] lists
38. const list = Immutable.List(['Batman', 'Spiderman', 'Superman']); // or: const list = Immutable.List.of('Batman', 'Spiderman', 'Superman'); list[0]; // undefined list.get(0); // "Batman" const list2 = list.set(0, 'Bruce Wayne’); // list = ["Batman", "Spiderman", "Superman"] // list2 = ["Bruce Wayne", "Spiderman", "Superman"] lists
39. lists maps nested objects
40. maps const map = Immutable.Map({ name: 'Bruce Wayne', city: 'Gotham' }); map.name; // undefined map.get(name); // "Bruce Wayne" const map2 = map.set('city', 'outlawed'); // map = {"name": "Bruce Wayne", "city": “Gotham"} // map2 = {"name": "Bruce Wayne", "city": "outlawed"}
41. maps const map = Immutable.Map({ name: 'Bruce Wayne', city: 'Gotham' }); map.name; // undefined map.get('name'); // "Bruce Wayne" const map2 = map.set('city', 'outlawed'); // map = {"name": "Bruce Wayne", "city": “Gotham"} // map2 = {"name": "Bruce Wayne", "city": "outlawed"}
42. lists maps nested objects
43. nested objects const nested = Immutable.fromJS({ dogs: [ { name: 'Fido', favFood: 'chicken' }, { name: 'Max', favFood: 'salmon' } ] }); const nested = Immutable.Map({ dogs: Immutable.List([ Immutable.Map({ name: 'Fido', favFood: 'chicken' }), Immutable.Map({ name: 'Max', favFood: 'salmon' }) ]) });
44. const nested = Immutable.fromJS({ dogs: [ { name: 'Fido', favFood: 'chicken' }, { name: 'Max', favFood: 'salmon' } ] }); nested.get('dogs').get(1).get('favFood'); nested.getIn(['dogs', 1, ‘favFood’]); // "salmon" nested objects
45. const nested = Immutable.fromJS({ dogs: [ { name: 'Fido', favFood: 'chicken' }, { name: 'Max', favFood: 'salmon' } ] }); nested.get('dogs').get(0).set('favFood', 'pizza'); nested.setIn(['dogs', 0, 'favFood'], ‘pizza'); // {"name": "Fido", "favFood": "pizza"} nested objects
46. const nested = Immutable.fromJS({ dogs: [ { name: 'Fido', favFood: 'chicken' }, { name: 'Max', favFood: 'salmon' } ] }); nested.get('dogs') .map(dog => dog.update('favFood’, favFood => favFood.toUpperCase()) ); // [{"name": "Fido", "favFood": "CHICKEN"}, // {"name": "Max", "favFood": "SALMON"}] nested objects
47. other data structures: OrderedMap Set, OrderedSet Stack, Record
48. • Official Documentation: not the greatest documentation that’s ever existed. • “Unofficial” Documentation: “An Introduction with examples written for humans.” • Immutable REPL: all the goods of Immutable.js without having to set up an environment. • Immutable.js Object Formatter: make Immutable data in the console much less annoying to access and read.