Tech Talk - Immutable Data Structure
0 likes100 views
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.
![import { projectMapper, projectFilter } from 'util/helper'
let projects = []
…
projects.push(graceshopper, stackathon, capstone)
projectMapper(projects)
projectFilter(projects)
console.log(projects)](https://image.slidesharecdn.com/slidesfinal-171115041709/85/Tech-Talk-Immutable-Data-Structure-4-320.jpg)
![import { projectMapper, projectFilter } from 'util/helper'
let projects = []
…
projects.push(graceshopper, stackathon, capstone)
projectMapper(projects)
projectFilter(projects)
console.log(projects)](https://image.slidesharecdn.com/slidesfinal-171115041709/85/Tech-Talk-Immutable-Data-Structure-5-320.jpg)
Tech Talk - Immutable Data Structure
- 2. WHY WHAT HOW
- 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)
- 8. State | stāt | noun Value of an identity at a time. — Rich Hickey
- 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”
- 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
- 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
- 19. RETRIEVAL
- 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
- 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’
- 35. Worry native performance no more… SMALL & FAST
- 36. HOW TOUSE …INJS
- 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
- 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