Practically Immutable

Immutable data in practice in JavaScript

Transcript

1. practically
   immutable
   !
   Immutable data in JS
   @sebasporto
   

   View Slide

2. I build CRUD apps, mostly
   

   View Slide

3. What?
   • Something that cannot change
   • Once created stays the same
   

   View Slide

4. var array1 = [1, 2].immutable
   var array2 = array1.push(3)
   !
   array1 //=> [1, 2]
   array2 //=> [1, 2, 3]
   

   View Slide

5. WHY?
   

   View Slide

6. # 1
   no side effects
   

   View Slide

7. var orders = [1, 2];
   processOrders(orders);
   what is orders after this?
   

   View Slide

8. Predictability
   Store
   Comp
   Comp
   Data
   Data
   wants to
   sort data
   wants to
   transform
   data
   doesn't
   want its data
   to be
   modified
   externally
   

   View Slide

9. Enforces uni directional
   data flow
   React + Flux
   Store Comp
   Action
   

   View Slide

10. # 2
    Easier workflows
    

    View Slide

11. Undo
    add(item) {
    history.push(items)
    items = items.push(item)
    }
    undo() {
    items = history.pop()
    }
    

    View Slide

12. Dirty objects
    Get record from store
    Clone record
    Edit record
    Save
    Replace original
    Yes
    Discard
    No
    

    View Slide

13. Dirty objects
    Get record from store
    Edit record
    Save
    Replace original
    Yes
    Discard
    No
    

    View Slide

14. HOW?
    

    View Slide

15. clojurescript
    immutable data for free
    but this talk is about plain JS
    

    View Slide

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
    

    View Slide

17. immutable.js
    • Great for simple collections
    • [1, 2, ...] ['a', 'b' ...]
    • Caveats for collections with objects
    https://github.com/facebook/immutable-js
    

    View Slide

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!
    

    View Slide

19. immutable.js
    To be fair: Immutable.js can do the right
    thing if you learn it really well
    Immutable.js != Just works™
    

    View Slide

20. Seamless immutable
    • Fixes Immutable.js issues with deep
    objects
    https://github.com/rtfeldman/seamless-immutable
    

    View Slide

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
    

    View Slide

22. imm
    https://github.com/sporto/imm
    • Build on top of seamless-immutable
    • Nice CRUD API
    

    View Slide

23. imm
    list = list.add(record)
    list = list.replace(record)
    list = list.remove(id)
    !
    record = list.get(id)
    

    View Slide

24. in Conclusion
    

    View Slide

25. Immutable data can make

    your application more robust
    

    View Slide

26. but play a lot with your chosen lib, 

    understand the caveats
    

    View Slide

27. Thanks
    

    View Slide