The document discusses immutable data structures and their importance in functional programming, highlighting challenges associated with mutable state. It provides examples in JavaScript, showcasing the use of libraries like Immutable.js and Mori to manage state efficiently. The text emphasizes the benefits of persistent data structures, including improved performance and reduced complexity in rendering UI elements.

1. IMMUTABLE
DATA
STRUCTURE
DI FAN
FSA-1706-FLEX

2. WHY
WHAT
HOW

3. THE
CHALLENGE

4. import { projectMapper, projectFilter } from 'util/helper'
let projects = []
…
projects.push(graceshopper, stackathon, capstone)
projectMapper(projects)
projectFilter(projects)
console.log(projects)

5. import { projectMapper, projectFilter } from 'util/helper'
let projects = []
…
projects.push(graceshopper, stackathon, capstone)
projectMapper(projects)
projectFilter(projects)
console.log(projects)

6. STATE
MUTABLE

7. MUTABLE
STATE

8. State
| stāt | noun
Value of an identity at a time.
— Rich Hickey

9. UI = render(state)

10. const state = { foo: ‘foo’}
UI = render(state) // { foo: ‘foo’}
setState(‘bar’)
UI = render(state) // { bar: ‘bar’}
setState(‘baz’)
UI = render(state) // { baz: ‘baz’}
TIME

11. REDUX
“No Side Effect Please”

12. SIDEEFFECTS
MUTABILITY

13. const state = { foo: ‘foo’}
UI = render(state) // { foo: ‘foo’}
setState(‘bar’)
UI = render(state) // { bar: ‘bar’}
setState(‘baz’)
UI = render(state) // { baz: ‘baz’}
TIME

14. TIME
state
value 1
value 2
value 3

15. TIME
state
value 1
value 2
value 3
state 1
state 2
state 3

16. const state0 = { foo: ‘foo’}
UI = render(state0)
const state1 = setState(‘bar’)
UI = render(state1)
/* Identity */
state = state0 —> state = state1
TIME

17. SIDEEFFECTS
MUTABILITY

18. Oops…That’s
SLOW & BIG

19. RETRIEVAL

20. TREE 9
3
1
20
6
75
21
19
2014 39
50
65

21. TRIE 0 1
0 10 1
0 10 1
0 1

22. 0 1
0 10 1
0 10 1
0 1
index = 5
index = ‘0b101’

23. 0 1
0 10 1
0 10 1
0 1
index = 5
index = ‘0b101’

24. 0 1
0 10 1
0 10 1
0 1
index = 5
index = ‘0b101’

25. 0 1
0 10 1
0 10 1
0 1
index = 5
index = ‘0b101’
Oops…
Nothing Here

26. UPDATE
0 1
0 10 1
0 10 1
0 1

27. UPDATE
0 1
0 10 1
0 10 1
0 10 1
0 1
0 1
OldNew

28. UPDATE
0 1
0 1
0 10 1
0 1
0 1
0 1
0 1 0 1
OldNew

29. BITMAPPED
VECTORTRIE

30. WHAT
ABOUT
OBJECTS?

31. 0 1
0 10 1
0 10 1
0 1
E D G R M

32. HASHKEYS
0 1
0 10 1
0 10 1
0 1
E D G R M
000 100011010001
hash(‘D’) = 1 // ‘0b001’

33. HASHARRAY
MAPPEDTRIE

34. STRUCTURAL
SHARING
PATHCOPYING

35. Worry native performance no more…
SMALL & FAST

36. HOW
TOUSE
…INJS

37. https://facebook.github.io/immutable-js/

38. https://swannodette.github.io/mori/

39. import { List } from 'immutable'
let list = List.of(1, 2, 3)
let list2 = list.push(4)
console.log(list.size) // 3
console.log(list2.get(3)) // 4

40. import mori from 'mori'
let v = mori.vector(1, 2, 3)
let v2 = mori.conj(v, 4)
console.log(mori.count(v)) // 3
console.log(mori.get(v2, 3)) // 4

41. RECONCILIATION

42. 0 1
0 1
0 10 1
0 1
0 1
0 1
0 1 0 1
OldNew

43. NOMORE
MUTABILITY!!

45. Persistent Data Structures and Managed References
- Rich Hickey
React.js Conf 2015 - Immutable Data and React -
Lee Byron, Facebook
Immutable data structures for functional JS | JSConf
EU 2017 - Anjana Vakil
REFERENCES