Practically Immutable

Immutable data in practice in JavaScript

Transcript

1. practically immutable ! Immutable data in JS @sebasporto
2. I build CRUD apps, mostly
3. What? • Something that cannot change • Once created stays the same
4. var array1 = [1, 2].immutable var array2 = array1.push(3) ! array1 //=> [1, 2] array2 //=> [1, 2, 3]
5. WHY?
6. # 1 no side effects
7. var orders = [1, 2]; processOrders(orders); what is orders after this?
8. Predictability Store Comp Comp Data Data wants to sort data wants to transform data doesn't want its data to be modified externally
9. Enforces uni directional data flow React + Flux Store Comp Action
10. # 2 Easier workflows
11. Undo add(item) { history.push(items) items = items.push(item) } undo() { items = history.pop() }
12. Dirty objects Get record from store Clone record Edit record Save Replace original Yes Discard No
13. Dirty objects Get record from store Edit record Save Replace original Yes Discard No
14. HOW?
15. clojurescript immutable data for free but this talk is about plain JS
16. • In JS strings and numbers are immutable (not the case in every language) • Arrays, objects are not - so we need help here • JS and immutable data => opposing forces
17. immutable.js • Great for simple collections • [1, 2, ...] ['a', 'b' ...] • Caveats for collections with objects https://github.com/facebook/immutable-js
18. Immutable.js var record = {label: 'Sam'}; var list = Immutable.List([record]); ! console.log(list.get(0).label) // => 'Sam' http://jsbin.com/dilupu/1/embed?js,console record.label = 'Biff' ! console.log(list.get(0).label) // => 'Biff' Opps!
19. immutable.js To be fair: Immutable.js can do the right thing if you learn it really well Immutable.js != Just works™
20. Seamless immutable • Fixes Immutable.js issues with deep objects https://github.com/rtfeldman/seamless-immutable
21. var record = {label: 'Sam'}; var list = Immutable([record]); ! console.log(list[0].label) // => 'Sam' ! record.label = 'Biff' ! console.log(list[0].label) // => 'Sam' http://jsbin.com/fayupu/1/edit?js,console Seamless immutable
22. imm https://github.com/sporto/imm • Build on top of seamless-immutable • Nice CRUD API
23. imm list = list.add(record) list = list.replace(record) list = list.remove(id) ! record = list.get(id)
24. in Conclusion
25. Immutable data can make
 your application more robust
26. but play a lot with your chosen lib, 
 understand the caveats
27. Thanks