Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Practically Immutable

sporto
March 28, 2015

Practically Immutable

Immutable data in practice in JavaScript

sporto

March 28, 2015
Tweet

More Decks by sporto

Other Decks in Technology

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