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

Immutable Data & Immutable.js

Immutable Data & Immutable.js

What is immutable data, why should I use it, and how do I use it? This talk was originally given during my Senior Phase at Fullstack Academy.

5e1da75a6e11e201fb5285f20fa43391?s=128

Beth Qiang

January 12, 2017
Tweet

Transcript

  1. Immutable Data & Immutable.js Beth Qiang

  2. intro what why how

  3. functional programming & immutability intro

  4. object-oriented programming is an object with attributes and methods defined

    in a class* the main unit of *including fake classes, *cough* javascript *cough*
  5. functional programming is a function that must produce the same

    output for the same input the main unit of
  6. –Michael Feathers “Object oriented programming makes code understandable by encapsulating

    moving parts. Functional programming makes code understandable by minimizing moving parts.”
  7. features of functional programming pure functions • recursion • composability

    • immutability xkcd
  8. what will the following block of code print? let string

    = 'magic'; string[4] = 'k'; console.log(string);
  9. strings are immutable in javascript! as are: numbers, booleans, &

    other primitive values
  10. however, objects are mutable… let arr1 = [1, 2, 3];

    arr[2] = 5; console.log(arr1); // [ 1, 2, 5 ]
  11. …sorta let arr1 = [1, 2, 3]; let arr2 =

    arr1.map(item => item * 2); console.log(arr1); // [ 1, 2, 3 ] console.log(arr2); // [ 2, 4, 6 ]
  12. is Immutable.js? what

  13. the next step in facebook’s plan to achieve world domination

  14. a javascript library that offers collections that are persistent and

    immutable
  15. const list1 = Immutable.List([1, 2, 3]); const list2 = list1.push(4);

    console.log(list1); // [1, 2, 3] console.log(list2); // [1, 2, 3, 4]
  16. List.prototype.push = function (value) { // 1. make a copy

    var clone = deepCopy(this); // 2. edit the copy clone[clone.length] = value; // 3. return the copy return clone; };
  17. isn’t that slow and inefficient?

  18. the magic of structural sharing

  19. A B C D E F G directed acyclic graph

    (trie)
  20. A B C D E F G directed acyclic graph

    (trie)
  21. A B C D E F G directed acyclic graph

    (trie)
  22. A B C D E F G directed acyclic graph

    (trie)
  23. A B C D E F G H directed acyclic

    graph (trie)
  24. A B C D E F G H directed acyclic

    graph (trie) B’
  25. A B C D E F G H directed acyclic

    graph (trie) B’ C’
  26. A B C D E F G H directed acyclic

    graph (trie) B’ C’ D’
  27. A E F G H directed acyclic graph (trie) B’

    C’ D’
  28. should I use immutable data & Immutable.js? why

  29. makes life slightly simpler increases predictability easier to test re-use

    code “true” immutability
  30. reduced memory usage

  31. change detection, mutation tracking, & persistent history

  32. thread-safe better for concurrent programming

  33. do I use it? how

  34. npm install --save immutable import Immutable from 'immutable';

  35. lists maps nested objects

  36. const list = Immutable.List(['Batman', 'Spiderman', 'Superman']); // or: const list

    = Immutable.List.of('Batman', 'Spiderman', 'Superman'); list[0]; // undefined list.get(0); // "Batman" const list2 = list.set(0, 'Bruce Wayne’); // list = ["Batman", "Spiderman", "Superman"] // list2 = ["Bruce Wayne", "Spiderman", "Superman"] lists
  37. const list = Immutable.List(['Batman', 'Spiderman', 'Superman']); // or: const list

    = Immutable.List.of('Batman', 'Spiderman', 'Superman'); list[0]; // undefined list.get(0); // "Batman" const list2 = list.set(0, 'Bruce Wayne’); // list = ["Batman", "Spiderman", "Superman"] // list2 = ["Bruce Wayne", "Spiderman", "Superman"] lists
  38. const list = Immutable.List(['Batman', 'Spiderman', 'Superman']); // or: const list

    = Immutable.List.of('Batman', 'Spiderman', 'Superman'); list[0]; // undefined list.get(0); // "Batman" const list2 = list.set(0, 'Bruce Wayne’); // list = ["Batman", "Spiderman", "Superman"] // list2 = ["Bruce Wayne", "Spiderman", "Superman"] lists
  39. lists maps nested objects

  40. maps const map = Immutable.Map({ name: 'Bruce Wayne', city: 'Gotham'

    }); map.name; // undefined map.get(name); // "Bruce Wayne" const map2 = map.set('city', 'outlawed'); // map = {"name": "Bruce Wayne", "city": “Gotham"} // map2 = {"name": "Bruce Wayne", "city": "outlawed"}
  41. maps const map = Immutable.Map({ name: 'Bruce Wayne', city: 'Gotham'

    }); map.name; // undefined map.get('name'); // "Bruce Wayne" const map2 = map.set('city', 'outlawed'); // map = {"name": "Bruce Wayne", "city": “Gotham"} // map2 = {"name": "Bruce Wayne", "city": "outlawed"}
  42. lists maps nested objects

  43. nested objects const nested = Immutable.fromJS({ dogs: [ { name:

    'Fido', favFood: 'chicken' }, { name: 'Max', favFood: 'salmon' } ] }); const nested = Immutable.Map({ dogs: Immutable.List([ Immutable.Map({ name: 'Fido', favFood: 'chicken' }), Immutable.Map({ name: 'Max', favFood: 'salmon' }) ]) });
  44. const nested = Immutable.fromJS({ dogs: [ { name: 'Fido', favFood:

    'chicken' }, { name: 'Max', favFood: 'salmon' } ] }); nested.get('dogs').get(1).get('favFood'); nested.getIn(['dogs', 1, ‘favFood’]); // "salmon" nested objects
  45. const nested = Immutable.fromJS({ dogs: [ { name: 'Fido', favFood:

    'chicken' }, { name: 'Max', favFood: 'salmon' } ] }); nested.get('dogs').get(0).set('favFood', 'pizza'); nested.setIn(['dogs', 0, 'favFood'], ‘pizza'); // {"name": "Fido", "favFood": "pizza"} nested objects
  46. const nested = Immutable.fromJS({ dogs: [ { name: 'Fido', favFood:

    'chicken' }, { name: 'Max', favFood: 'salmon' } ] }); nested.get('dogs') .map(dog => dog.update('favFood’, favFood => favFood.toUpperCase()) ); // [{"name": "Fido", "favFood": "CHICKEN"}, // {"name": "Max", "favFood": "SALMON"}] nested objects
  47. other data structures: OrderedMap Set, OrderedSet Stack, Record

  48. • Official Documentation: not the greatest documentation that’s ever existed.

    • “Unofficial” Documentation: “An Introduction with examples written for humans.” • Immutable REPL: all the goods of Immutable.js without having to set up an environment. • Immutable.js Object Formatter: make Immutable data in the console much less annoying to access and read.