Immutable data structures for functional JavaScript

Slide 1

Slide 1 text

@AnjanaVakil O’Reilly Fluent 2017

Slide 2

Slide 2 text

hi! i’m anjana The Recurse Center

Slide 3

Slide 3 text

functional programming rocks!

Slide 4

Slide 4 text

functional programming pure functions ● input → output ● side effects ● data in, data out mutable state

Slide 5

Slide 5 text

Immutability rocks!

Slide 6

Slide 6 text

rocks rock!

Slide 7

Slide 7 text

Nobody sits like this rock sits. You rock, rock. The rock just sits, and is. You show us how to just sit here, and that's what we need. - I ❤ Huckabees (2004) rocks rock!

Slide 8

Slide 8 text

in A land where mutation reigns...

Slide 9

Slide 9 text

0 1 2 3 4 5 6 7 foo

Slide 10

Slide 10 text

zoo 1 0 3 2 5 4 7 6

Slide 11

Slide 11 text

zoo 1 0 3 2 5 4 7 6

Slide 12

Slide 12 text

zoo 1 0 3 2 5 4 7 6 Who put a in my zoo?!?

Slide 13

Slide 13 text

with mutability come overhead & bugs

Slide 14

Slide 14 text

Mutation must be stopped! (sorry, xavier)

Slide 15

Slide 15 text

Mutation must be stopped! (sorry, xavier) let’s journey to the land of...

Slide 16

Slide 16 text

immutable data! it just sits, and is (like rocks)

Slide 17

Slide 17 text

zoo 1 0 3 2 5 4 7 6

Slide 18

Slide 18 text

new zoo 1 0 3 2 5 4 7 6

Slide 19

Slide 19 text

new zoo 1 0 3 2 5 4 7 6

Slide 20

Slide 20 text

new zoo 1 0 3 2 5 4 7 6

Slide 21

Slide 21 text

new zoo 1 0 3 2 5 4 7 6 Great! My zoo just sits, and is!

Slide 22

Slide 22 text

new zoo 1 0 3 2 5 4 7 6 ...but my code runs like &

Slide 23

Slide 23 text

copying wastes time & space

Slide 24

Slide 24 text

isn’t there a better way?

Slide 25

Slide 25 text

isn’t there a better way? we need a hero...

Slide 26

Slide 26 text

persistent data structures!

Slide 27

Slide 27 text

persistent data structures! masters of time & space!

Slide 28

Slide 28 text

persistent data structures! old versions stay put... masters of time & space!

Slide 29

Slide 29 text

persistent data structures! old versions stay put... ... new versions created efficiently! masters of time & space!

Slide 30

Slide 30 text

What’s the source of their power?

Slide 31

Slide 31 text

Trees!

Slide 32

Slide 32 text

zoo 1 0 3 2 5 4 7 6

Slide 33

Slide 33 text

1 0 3 2 5 4 7 6

Slide 34

Slide 34 text

1 0 3 2 5 4 7 6

Slide 35

Slide 35 text

1 0 3 2 5 4 7 6

Slide 36

Slide 36 text

1 0 3 2 5 4 7 6 zoo

Slide 37

Slide 37 text

how do we update things?

Slide 38

Slide 38 text

1 0 3 2 5 4 7 6 zoo

Slide 39

Slide 39 text

1 0 3 2 5 4 7 6 zoo 1 0

Slide 40

Slide 40 text

1 0 3 2 5 4 7 6 zoo 1 0

Slide 41

Slide 41 text

1 0 3 2 5 4 7 6 zoo 1 0

Slide 42

Slide 42 text

1 0 3 2 5 4 7 6 zoo 1 0 new

Slide 43

Slide 43 text

1 0 3 2 5 4 7 6 zoo 1 0 new path copying!

Slide 44

Slide 44 text

1 0 3 2 5 4 7 6 zoo 1 0 new Structural sharing! path copying!

Slide 45

Slide 45 text

1 0 3 2 5 4 7 6 zoo 1 0 new Structural sharing! path copying! AWESOME! I can reuse most of the data!

Slide 46

Slide 46 text

Trees + Sharing Turn & into &

Slide 47

Slide 47 text

but how do we access things?

Slide 48

Slide 48 text

but how do we access things? our reveals a secret identity...

Slide 49

Slide 49 text

it’s a Trie! leaves hold values paths represent keys

Slide 50

Slide 50 text

ape ant bat bee a b a e n p t e e t an ba be ap a b

Slide 51

Slide 51 text

ape ant bat bee a b a e n p t e e t an ba be ap a b

Slide 52

Slide 52 text

ape ant bat bee a b a e n p t e e t an ba be ap a b

Slide 53

Slide 53 text

ape ant bat bee a b a e n p t e e t an ba be ap a b

Slide 54

Slide 54 text

convert index to binary descend trie bit by bit

Slide 55

Slide 55 text

001 000 011 010 101 100 111 110 zoo 0 1 0 1 0 1 (1) (0) (3) (2) (5) (4) (7) (6)

Slide 56

Slide 56 text

001 000 011 010 101 100 111 110 zoo 0 1 0 1 0 1 (1) (0) (3) (2) (5) (4) (7) (6) zoo[5]

Slide 57

Slide 57 text

001 000 011 010 101 100 111 110 zoo 0 1 0 1 0 1 (1) (0) (3) (2) (5) (4) (7) (6) zoo[5] zoo[0b101]

Slide 58

Slide 58 text

001 000 011 010 101 100 111 110 zoo 0 1 0 1 0 1 (1) (0) (3) (2) (5) (4) (7) (6) zoo[5] zoo[0b101] zoo→1→0→1

Slide 59

Slide 59 text

001 000 011 010 101 100 111 110 zoo 0 1 0 1 0 1 (1) (0) (3) (2) (5) (4) (7) (6) zoo[5] zoo[0b101] zoo→1→0→1

Slide 60

Slide 60 text

001 000 011 010 101 100 111 110 zoo 0 1 0 1 1 (1) (0) (3) (2) (5) (4) (7) (6) zoo[5] zoo[0b101] zoo→1→0→1 0

Slide 61

Slide 61 text

001 000 011 010 101 100 111 110 zoo 0 1 0 1 1 (1) (0) (3) (2) (5) (4) (7) (6) zoo[5] zoo[0b101] zoo→1→0→1 0

Slide 62

Slide 62 text

it’s a !

Slide 63

Slide 63 text

it’s a ! it’s a !

Slide 64

Slide 64 text

it’s a ! it’s a ! it’s...

Slide 65

Slide 65 text

bitmapped vector trie!

Slide 66

Slide 66 text

Let’s talk complexity...

Slide 67

Slide 67 text

immutable array lookup: O(1) update: O(n) lookup: O(log n) update: O(log n) Bitmapped vector trie vs.

Slide 68

Slide 68 text

zoo[18977] zoo[0b100101000100001] zoo→1→0→0→1→0→1→0→...

Slide 69

Slide 69 text

zoo[18977] zoo[0b100101000100001] zoo→1→0→0→1→0→1→0→... this is taking forever….

Slide 70

Slide 70 text

who said the needs 2-way branching?!? ( bit per level)

Slide 71

Slide 71 text

who said the needs 2-way branching?!? ( bit per level) we can choose...

Slide 72

Slide 72 text

fewer branches - deep trees + small nodes + shallow trees - large nodes more branches vs.

Slide 73

Slide 73 text

32-way branching is a good balance! ( bits per level)

Slide 74

Slide 74 text

zoo[18977] zoo[0b100101000100001] zoo→10010→10001→00001

Slide 75

Slide 75 text

immutable array lookup: O(1) update: O(n) lookup: O(log n) update: O(log n) Bitmapped vector trie vs.

Slide 76

Slide 76 text

immutable array lookup: O(1) update: O(n) lookup: O(log 32 n) update: O(log 32 n) Bitmapped vector trie vs.

Slide 77

Slide 77 text

immutable array lookup: O(1) update: O(n) lookup ≈ O(1) update ≈ O(1) Bitmapped vector trie vs.

Slide 78

Slide 78 text

What about objects? We need non-integer keys too

Slide 79

Slide 79 text

zoo "k" "m" "b" "l" "g" "f" "w" "t"

Slide 80

Slide 80 text

hash the to get a number descend trie as before

Slide 81

Slide 81 text

zoo["g"] hash("g") === 5 === 0b101 zoo→1→0→1

Slide 82

Slide 82 text

001 000 011 010 101 100 111 110 zoo 0 1 0 1 1 zoo[hash("g")] zoo[0b101] zoo→1→0→1 0 "k" "m" "b" "l" "g" "f" "w" "t"

Slide 83

Slide 83 text

001 000 011 010 101 100 111 110 zoo 0 1 0 1 1 0 "k" "m" "b" "l" "g" "f" "w" "t" Awesome! I can use whatever s I want! zoo[hash("g")] zoo[0b101] zoo→1→0→1

Slide 84

Slide 84 text

hash array mapped trie!

Slide 85

Slide 85 text

Let’s recap! mutability: immutability: copying: & sharing: &

Slide 86

Slide 86 text

these are some data structures! But how do we use them in Javascript?

Slide 87

Slide 87 text

libraries! immutable.js! Mori!

Slide 88

Slide 88 text

No content

Slide 89

Slide 89 text

var Imjs = require("immutable"); var a = Imjs.List.of(1,2); // List [1, 2] var a2 = a.push(3); // List [1, 2, 3] a.size; // 2 a2.get(2); // 3

Slide 90

Slide 90 text

var o = Imjs.Map({"a": 1,"b": 2}); // Map {"a": 1, "b": 2} var o2 = o.set("a", 3); // Map {"a": 3, "b": 2} o.get("a"); // 1 o2.get("a"); // 3

Slide 91

Slide 91 text

No content

Slide 92

Slide 92 text

var mori = require("mori"); var a = mori.vector(1,2); // [1 2] var a2 = mori.conj(a, 3); // [1 2 3] mori.count(a); // 2 mori.get(a2, 2); // 3

Slide 93

Slide 93 text

var o = mori.hashMap("a", 1, "b", 2); // {"a" 1 "b" 2} var o2 = mori.assoc(o, "a", 3); // {"a" 3 "b" 2} mori.get(o, "a"); // 1 mori.get(o2, "a"); // 3

Slide 94

Slide 94 text

immutable.js MORI vs. × JavaScript all the way × Object-oriented API × Smaller facebook.github.io/immutable-js swannodette.github.io/mori × ClojureScript under the hood × Functional API × Faster

Slide 95

Slide 95 text

live long and don’t mutate!

Slide 96

Slide 96 text

thanks! @AnjanaVakil Icons by EmojiOne Template by SlidesCarnival Inspiration/curiosity by Sal Becker & Recurse Center Conference by O’Reilly

Slide 97

Slide 97 text

J.N. L'orange, Understanding Clojure’s Persistent Vectors, Blog series hypirion.com/musings/understanding-persistent-vector-pt-1 P. Bagwell, Ideal hash trees, 2001 lampwww.epfl.ch/papers/idealhashtrees.pdf R. Hickey, Persistent data structures and managed references, QCon 2009 infoq.com/presentations/Value-Identity-State-Rich-Hickey D. Spiewak, Extreme Cleverness: Functional Data Structures in Scala, Strange Loop 2011 infoq.com/presentations/Functional-Data-Structures-in-Scala M. Thatte, What Lies Beneath: A Deep Dive Into Clojure's Data Structures, EuroClojure 2015 youtu.be/7BFF50BHPPo D. Nolen, Immutability, interactivity & Javascript, FutureJS 2014 youtu.be/mS264h8KGwk L. Byron, Immutable Data & React, React.js Conf 2015 youtu.be/I7IdS-PbEgI References & more