Immutable Data & Immutable.js

Slide 1

Slide 1 text

Immutable Data & Immutable.js Beth Qiang

Slide 2

Slide 2 text

intro what why how

Slide 3

Slide 3 text

functional programming & immutability intro

Slide 4

Slide 4 text

object-oriented programming is an object with attributes and methods deﬁned in a class* the main unit of *including fake classes, *cough* javascript *cough*

Slide 5

Slide 5 text

functional programming is a function that must produce the same output for the same input the main unit of

Slide 6

Slide 6 text

–Michael Feathers “Object oriented programming makes code understandable by encapsulating moving parts. Functional programming makes code understandable by minimizing moving parts.”

Slide 7

Slide 7 text

features of functional programming pure functions • recursion • composability • immutability xkcd

Slide 8

Slide 8 text

what will the following block of code print? let string = 'magic'; string[4] = 'k'; console.log(string);

Slide 9

Slide 9 text

strings are immutable in javascript! as are: numbers, booleans, & other primitive values

Slide 10

Slide 10 text

however, objects are mutable… let arr1 = [1, 2, 3]; arr[2] = 5; console.log(arr1); // [ 1, 2, 5 ]

Slide 11

Slide 11 text

…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 ]

Slide 12

Slide 12 text

is Immutable.js? what

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

a javascript library that offers collections that are persistent and immutable

Slide 15

Slide 15 text

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]

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

isn’t that slow and inefﬁcient?

Slide 18

Slide 18 text

the magic of structural sharing

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

should I use immutable data & Immutable.js? why

Slide 29

Slide 29 text

makes life slightly simpler increases predictability easier to test re-use code “true” immutability

Slide 30

Slide 30 text

reduced memory usage

Slide 31

Slide 31 text

change detection, mutation tracking, & persistent history

Slide 32

Slide 32 text

thread-safe better for concurrent programming

Slide 33

Slide 33 text

do I use it? how

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

lists maps nested objects

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

Slide 38

Slide 38 text

Slide 39

Slide 39 text

lists maps nested objects

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

lists maps nested objects

Slide 43

Slide 43 text

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' }) ]) });

Slide 44

Slide 44 text

Slide 45

Slide 45 text

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

other data structures: OrderedMap Set, OrderedSet Stack, Record

Slide 48

Slide 48 text

• Ofﬁcial Documentation: not the greatest documentation that’s ever existed. • “Unofﬁcial” 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.