Immutability and JavaScript

Prasenjit Sharan
JSFoo 2016, Bangalore

Transcript

1. Immutability and JavaScript @PrasenjitSharan
3. Persistent Data Structures
4. What is an immutable data structure? How does it simplify writing softwares?
5. “Data dominates. If you've chosen the right data structures and organized things well, the algorithms will almost always be self-evident. Data structures, not algorithms, are central to programming.” - Rob Pike
6. Write stupid code that uses smart objects.
7. Write stupid simple code that uses smart objects data-structures.
8. “Much of what makes application development difficult is tracking mutation and maintaining state. Developing with immutable data encourages you to think differently about how data flows through your application.” - Immutable.js documentation
9. immutable adjective im·mu·ta·ble \(ˌ)i(m)-ˈmyü-tə-bəl\ 1. unable to be changed 2. not capable of or susceptible to change
10. JavaScript Strings are Immutable.
11. • var str = "Strings are immutable in JavaScript."; • str [3] = “X”; • str.slice (12, 21); • console.log (str); • // Strings are immutable in JavaScript.
12. How to use immutable data structures in JavaScript applications?
13. JavaScript-first API Returns immutable collections
14. • var map1 = Immutable.Map ({a:1, b:2, c:3}); • var map2 = map1.set ('b', 50); • console.log (map1); • // {a:1, b:2, c:3} • console.log (map2); • // {a:1, b:50, c:3}
15. • var list1 = Immutable.List.of (1, 2); • var list2 = list1.push (3); • console.log (list1); • // List [1, 2] • console.log (list2); • // List [1, 2, 3]
16. Why is Immutability good?
17. Easy State Management and Change Tracking
18. Equality • // Mutable data • var x = { foo: "bar" }; • var y = x; • y.foo = "baz"; • x === y; // true • x.foo; // "baz"
19. Equality • // Immutable data • var x = Immutable.map ({ foo: 'bar'}); • var y = x.set ('foo', 'baz'); • x === y; // false • x.get ('foo'); // “bar”
20. Works for Nested Objects too!
21. shouldComponentUpdate () shouldComponentUpdate: function (nextProps, nextState) { // Default implementation return true; }
22. shouldComponentUpdate () shouldComponentUpdate: function (nextProps, nextState) { // TODO: return whether or not current state is // different to former one. }
23. shouldComponentUpdate () shouldComponentUpdate: function (nextProps, nextState) { return this.props.value !== nextProps.value; } Example use-case • this.props.value = { foo: 'bar' } • nextProps.value = { foo: 'bar' }, • The references are different even though the props are same
24. shouldComponentUpdate () shouldComponentUpdate: function (nextProps, nextState) { return this.props.value !== nextProps.value; // true } • this.props.value = { foo: 'bar' } • nextProps.value = { foo: 'bar' }, • The references are different even though the props are same. Example use-case
25. Pure Functions Deterministic
26. Persistence Previous version is preserved when modified
27. • var list1 = Immutable.List.of (1, 2); var list2 = list1.push (3); console.log (list1); // List [1, 2] console.log (list2); // List [1, 2, 3] • console.log (list1 === list2); • // false
28. 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; } via @leeb List.push Implementation
29. 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; } via @leeb List.push Implementation
30. 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; } via @leeb List.push Implementation
31. 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; } via @leeb List.push Implementation
32. Copying is slow.
33. And so is DOM re-render!
34. Structural Sharing FTW! Reusing unchanged parts
35. 1 2 3 4 Structural Sharing list1 = [1, 2, 3, 4]
36. 1 0 Structural Sharing 2 3 4 list1 = [1, 2, 3, 4] list2 = [0, 1, 2, 3, 4]
37. 1 0 5 Structural Sharing 2 3 4 list1 = [1, 2, 3, 4] list2 = [0, 1, 2, 3, 4] list3 = [5, 2, 3, 4]
38. 1 2 3 4 0 5 Structural Sharing list1 = [1, 2, 3, 4] list2 = [0, 1, 2, 3, 4] list3 = [5, 2, 3, 4] {
39. 1 0 5 Structural Sharing 0 2 3 4 list1 = [0, 1, 2, 3, 4] list2 = [0, 5, 2, 3, 4]
40. Structural Sharing using Directed Acyclic Graphs
41. 1 6 3 7 4 8 5 2
42. 1 6 3 7 4 8 5 2
43. 1 6 3 7 4 8 5 2 x
44. 1 6 3 7 4 8 5 2 x
45. 1 6 3 7 4 8 5 2 x 6
46. 1 6 3 7 4 8 5 2 x 6 1
47. 1 6 3 7 4 8 5 2 x 6 1
48. 1 6 3 7 4 8 5 2 x 6 1
49. 1 6 3 7 4 8 5 2 x 6 1
50. 1 6 3 7 4 8 5 2 x 6 1
51. 6 3 4 8 5 2 x 1
52. Structural Sharing Space Efficient Time Efficient
53. Representing Arrays and Objects
54. Bitmapped Vector Trie Each node is an array Data lives in the leaves
55. 128 129 143 142 141 140 139 138 137 136 135 134 133 132 131 130 Bitmapped Vector Trie Each node is an array Data lives in the leaves
56. 128 129 143 142 141 140 139 138 137 136 135 134 133 132 131 130 list.get (141);
57. 128 129 143 142 141 140 139 138 137 136 135 134 133 132 131 130 list.get (0x10001101);
58. 00 01 10 11 128 129 143 142 141 140 139 138 137 136 135 134 133 132 131 130 list.get (0x10001101);
59. 00 01 10 11 00 01 10 11 128 129 143 142 141 140 139 138 137 136 135 134 133 132 131 130 list.get (0x10001101);
60. 00 01 10 11 00 01 10 11 00 01 10 11 128 129 143 142 141 140 139 138 137 136 135 134 133 132 131 130 list.get (0x10001101);
61. 00 01 10 11 00 01 10 11 00 01 10 11 00 01 10 11 128 129 143 142 141 140 139 138 137 136 135 134 133 132 131 130 list.get (0x10001101);
62. 00 01 10 11 00 01 10 11 00 01 10 11 00 01 10 11 128 129 143 142 141 140 139 138 137 136 135 134 133 132 131 130 list.get (141);
63. 128 129 143 142 141 140 139 138 137 136 135 134 133 132 131 130 list.set (141, “foo”);
64. 128 129 143 142 141 140 139 138 137 136 135 134 133 132 131 130 list.set (141, “foo”);
65. 128 129 143 142 141 140 139 138 137 136 135 134 133 132 131 130 list.set (141, “foo”); “foo”
66. • Implementation • Trie • Interface • Lists and Maps
67. Immutability and Performance
68. Branching Factor = 4
69. Number of levels = 7 Branching Factor = 32 34 Billion Elements 327
70. • View • Virtual-DOM • State • Immutable Data
71. Elm’s performance over libraries using mutable data
72. Further Readings and References 1. Rich Hickey, Value of Values - https://www.infoq.com/presentations/Value-Values 2. David Nolen, Mori - https://github.com/swannodette/mori 3. Immutable.js by Facebook - https://facebook.github.io/immutable-js/ 4. Elm Language - elm-lang.org 5. Ideal Hash Trees, Phil Bagwell - http://lampwww.epfl.ch/papers/idealhashtrees.pdf 6. Lee Byron, React.js Conf - https://youtu.be/I7IdS-PbEgI
73. Recap 1. Immutable data structures let us write simple and low overhead applications. 2. We can use it in JS applications using libraries. 3. They use structural sharing for efficient implementation. 4. They enable super fast performance.
74. Summary
75. Immutable Data Structures Rock!
76. Questions?
77. Thank you! @PrasenjitSharan