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