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.

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size 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 full-size 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 full-size slide

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

    View full-size slide

  8. – 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  15. 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 full-size slide

  16. 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 full-size slide

  17. M A P
    class Map extends Collection.Keyed

    View full-size slide

  18. 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 full-size slide

  19. S E T
    class Set extends Collection.Set

    View full-size slide

  20. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  24. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide