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.

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
   

   View Slide

2. A B O U T M E
   • Front End Engineer @ Picter;
   • Live Coding Instructor @ Udacity;
   • Ambassador @ Auth0;
   

   View Slide

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
   */
   

   View Slide

4. P R I M I T I V E S A R E
   I M M U TA B L E
   

   View Slide

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
   

   View Slide

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.
   

   View Slide

7. • lots of memory;
   • defensive copying;
   • can become a mess quite easily;
   

   View Slide

8. View Slide

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”
   

   View Slide

10. I M M U TA B L E V S .
    P E R S I S T E N T
    

    View Slide

11. S T R U C T U R A L S H A R I N G
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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.
    

    View Slide

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.
    

    View Slide

18. M A P
    class Map extends Collection.Keyed
    

    View Slide

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.
    

    View Slide

20. S E T
    class Set extends Collection.Set
    

    View Slide

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.
    

    View Slide

22. T R A D E - O F F S
    

    View Slide

23. • another library to learn;
    • code is slower (but still efficient in most cases);
    • syntax can be really ugly;
    • debugging gets hard;
    

    View Slide

24. R E D U X U S A G E
    

    View Slide

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;
    }
    }
    

    View Slide

26. • make your whole redux tree immutable;
    • avoid usage of toJS();
    • create selectors that return Immutable objects;
    

    View Slide

27. View Slide

28. O T H E R L I B R A R I E S
    

    View Slide

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

    View Slide

30. T H A N K S ! ❤
    O L A R C L A R A . G I T H U B . I O
    

    View Slide