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

ImmutableJS 101

ImmutableJS 101

As functional programming becomes a very mainstream paradigm, the concerns regarding immutable data structures naturally increase. In this talk, I’ll show why we need data structure to be immutable, explain how ImmutableJS works and provide real world examples on how to solve problems such as side effects using this highly efficient library.

78b75aad21ed5ed351d9822d77acd7fc?s=128

Maria Clara Santana

January 18, 2018
Tweet

More Decks by Maria Clara Santana

Other Decks in Programming

Transcript

  1. I M M U TA B L E J S

    1 0 1 M A R I A C . | | F E M U G P E # 1 7
  2. A B O U T M E • Front End

    Engineer @ Picter; • Live Coding Instructor @ Udacity; • Ambassador @ Auth0;
  3. const mutateState = (state, position, value) => state[position] = value;

    test(‘it has side effects', () => { const state = [1, 2]; const mutatedState = mutateState(state, 0, 3); expect(state[0]).toBe(1); }); /* Expected value to be (using Object.is): 1 Received: 3 */
  4. P R I M I T I V E S

    A R E I M M U TA B L E
  5. C O N S T I S N ’ T

    A B O U T I M M U TA B I L I T Y P E R S I
  6. const doNotMutateState = (state, position, value) => { const stateCopy

    = state.slice(0); return stateCopy[position] = value; }; test(‘it has no side effects', () => { const state = [1, 2]; const state2 = doNotMutateState(state, 0, 3); expect(state[0]).toBe(1); }); // all good.
  7. • lots of memory; • defensive copying; • can become

    a mess quite easily;
  8. None
  9. – D O C S , T H E (

    P L E A S E R E A D T H E M ) “Immutable.js provides many Persistent Immutable data structures including”
  10. I M M U TA B L E V S

    . P E R S I S T E N T
  11. S T R U C T U R A L

    S H A R I N G
  12. https://medium.com/@dtinth/immutable-js-persistent-data-structures-and-structural-sharing-6d163fbd73d2

  13. https://medium.com/@dtinth/immutable-js-persistent-data-structures-and-structural-sharing-6d163fbd73d2

  14. https://medium.com/@dtinth/immutable-js-persistent-data-structures-and-structural-sharing-6d163fbd73d2

  15. L I S T List(): List < any > List<T>():

    List < T > List<T>(collection: Iterable<T>): List<T>
  16. it('handles creating a List from an iterable object', () !=>

    { const beatles = ['john', 'paul', 'ringo', 'george']; const beatlesList = Immutable.List(beatles); expect(beatlesList) .toEqual(Immutable.List(['john', 'paul', 'ringo', 'george'])); }); !// all good.
  17. it('handles creating a List from a non-iterable object', () !=>

    { const beatles = { vocals: 'john', bass: 'paul', drums: 'ringo', guitar: 'george', }; const beatlesListFromObject = Immutable.List.of(beatles); expect(beatlesListFromObject).toEqual(Immutable.List([{ vocals: 'john', bass: 'paul', drums: 'ringo', guitar: 'george' }])); }); !// all good.
  18. M A P class Map<K, V> extends Collection.Keyed<K, V>

  19. it('creates an Immutable Map', () !=> { const beatles =

    { vocals: 'john', bass: 'paul', drums: 'ringo', guitar: 'george', }; const beatlesListFromObject = Immutable.Map({beatles}); expect(beatlesListFromObject).toEqual(Immutable.Map({ beatles: { vocals: 'john', bass: 'paul', drums: 'ringo', guitar: 'george' }, })); }); !// all good.
  20. S E T class Set<T> extends Collection.Set<T>

  21. it('creates a Set from an Array', () !=> { const

    beatles = ['john', 'paul', 'ringo', 'george']; const beatlesSet = Immutable.Set(beatles); expect(beatlesSet) .toEqual(Immutable.Set(['john', 'paul', 'ringo', 'george'])); }); !// all good.
  22. T R A D E - O F F S

  23. • another library to learn; • code is slower (but

    still efficient in most cases); • syntax can be really ugly; • debugging gets hard;
  24. R E D U X U S A G E

  25. import { Map, List } from 'immutable'; const todoList =

    (state = List(), action) !=> { switch (action.type) { case types.ADD_TODO: return state.push(Map({ id: action.id, text: action.text, complete: false, })); case types.COMPLETE_TODO: return state.map(todo !=> { if (todo.get('id') !!=== action.id) { return todo.update('complete', v !=> !v); } return todo; }); case types.DELETE_TODO: return state.filter(todo !=> todo.get('id') !!!== action.id); case types.DELETE_ALL_TODOS: return state.clear(); default: return state; } }
  26. • make your whole redux tree immutable; • avoid usage

    of toJS(); • create selectors that return Immutable objects;
  27. None
  28. O T H E R L I B R A

    R I E S
  29. • seamless-immutable; (https://github.com/rtfeldman/ seamless-immutable) • mori; (https://github.com/swannodette/mori) • …

  30. T H A N K S ! ❤ O L

    A R C L A R A . G I T H U B . I O