Graph Theory behind ImmutableJS

Slide 1

Slide 1 text

GRAPH THEORY BEHIND IMMUTABLEJS

Slide 2

Slide 2 text

@FRANZEJR

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

“concepts before implementation, code.” — Great Software Engineer

Slide 5

Slide 5 text

“Good developers know how things work. Great developers know why things work.” — Steve Souders,(O’Reilly Media, 2013).

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

LIST

Slide 8

Slide 8 text

MAP

Slide 9

Slide 9 text

STACK

Slide 10

Slide 10 text

RECORD

Slide 11

Slide 11 text

ORDERED SET

Slide 12

Slide 12 text

ORDERED MAP

Slide 13

Slide 13 text

WHY SHOULD I CARE?

Slide 14

Slide 14 text

DATA STRUCTURES ARE HIGHLY EFFICIENT ON MODERN JS VMS

Slide 15

Slide 15 text

CONCEPTS OF FUNCTIONAL PROGRAMMING

Slide 16

Slide 16 text

FACEBOOK IS BEHIND IT !

Slide 17

Slide 17 text

IMMUTABILITY MAKES CERTAIN THINGS EASIER

Slide 18

Slide 18 text

GOOD THEORY BEHIND IT! !

Slide 19

Slide 19 text

BEFORE WE BEGIN: NOT A TUTORIAL

Slide 20

Slide 20 text

BEFORE WE BEGIN: IDEAS, NOT IMPLEMENTATIONS

Slide 21

Slide 21 text

BEFORE TALKING ABOUT THEORY. LET'S TALK ABOUT...

Slide 22

Slide 22 text

HISTORY

Slide 23

Slide 23 text

REACT WAS CREATED IN 2012. LEE BYRON NEEDED TO CONVINCE JORDAN WALKE THAT REACT WAS A BAD IDEA. FOR SOME REASONS...

Slide 24

Slide 24 text

XHP AN HTML COMPONENT FRAMEWORK FOR PHP

Slide 25

Slide 25 text

REACT --> HTML NOT WORKING WITH DATA STRUCTURES

Slide 26

Slide 26 text

HARD TO TRACK CHANGES.

Slide 27

Slide 27 text

REACT WOULD BE SLOW.

Slide 28

Slide 28 text

DURING THIS PROCESS...

Slide 29

Slide 29 text

IMMUTABLEJS STARTED AS A PET PROJECT

Slide 30

Slide 30 text

PURE RENDER MIXIN HTTPS://FACEBOOK.GITHUB.IO/REACT/DOCS/PURE-RENDER-MIXIN.HTML

Slide 31

Slide 31 text

SHOULDCOMPONENTUPDATE()

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

A GOOD TEXT: HTTP://JAMESKNELSON.COM/SHOULD-I-USE-SHOULDCOMPONENTUPDATE/

Slide 34

Slide 34 text

A 10X SPEEDUP OF LESS THAN 1 MILLISECOND IS STILL LESS THAN 1 MILLISECOND.

Slide 35

Slide 35 text

THERE IS NO SILVER BULLET

Slide 36

Slide 36 text

SOLUTION?

Slide 37

Slide 37 text

WELL STRUCTURED DATA/STATE.

Slide 38

Slide 38 text

RECONCILIATION

Slide 39

Slide 39 text

TRACK CHANGES AND RE-RENDERS THE WHOLE APP

Slide 40

Slide 40 text

Everyone wants to track changes. !

Slide 41

Slide 41 text

VIRTUAL DOM

Slide 42

Slide 42 text

TRACK CHANGES 1. Key Value Observables 2. Dirty Checking

Slide 43

Slide 43 text

DREAM: DESTROY ONE PART OF THE DOM AND RE-CREATED IT. !

Slide 44

Slide 44 text

UPDATE

Slide 45

Slide 45 text

DOM IS STATEFUL !

Slide 46

Slide 46 text

Coming back to Virtual DOM > Whenever anything may have changed, re-render everything to a virtual DOM representation

Slide 47

Slide 47 text

> Diff the previous representation with the next one

Slide 48

Slide 48 text

> Only update the real DOM with what actually changed

Slide 49

Slide 49 text

A SIGNAL TO SAY: "HEY! SOMETHINGH MAY HAVE CHANGED!"

Slide 50

Slide 50 text

SIGNAL: RECONCILIATION DIFF ALGORITHM.

Slide 51

Slide 51 text

YOUR VIEW IS USUALLY SMALLER THAN YOUR MODEL.

Slide 52

Slide 52 text

O(v) vs O(m) Size of your view vs size of your model

Slide 53

Slide 53 text

v << m (real apps, not microbenchmarks)

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

PERFORMANCE IS NOT THE MAIN GOAL OF THE VIRTUAL DOM. SIMPLICITY IS.

Slide 56

Slide 56 text

IMMUTABLEJS!

Slide 57

Slide 57 text

WHAT IT CAN SOLVE?

Slide 58

Slide 58 text

1. IMMUTABLE

Slide 59

Slide 59 text

2. PERSISTENT

Slide 60

Slide 60 text

3. STRUCTURAL SHARING

Slide 61

Slide 61 text

THEORY?

Slide 62

Slide 62 text

MANY PRACTICAL PROBLEMS CAN BE REPRESENTED BY GRAPHS. MODEL MANY TYPES OF RELATIONS AND PROCESSES IN PHYSICAL, BIOLOGICAL, SOCIAL AND INFORMATION SYSTEMS.

Slide 63

Slide 63 text

A COMPLETE GRAPH

Slide 64

Slide 64 text

A TREE

Slide 65

Slide 65 text

A TRIE!

Slide 66

Slide 66 text

DIGITAL TREE RADIX TREE PREFIX TREE

Slide 67

Slide 67 text

PRONOUNCED AS "TRY" ORIGINATED FROM THE WORD RETRIEVAL

Slide 68

Slide 68 text

TRIE WERE FIRST DESCRIBED BY R. DE LA BRIANDAIS IN 1959.

Slide 69

Slide 69 text

TRIE CAN BE USED TO REPLACE SOME DATA STRUCTURES.

Slide 70

Slide 70 text

SIMPLE / STRAIGHTFORWARD

Slide 71

Slide 71 text

SEARCHING TREES -> FIXED SIZE TRIES -> VARYING LENGTH

Slide 72

Slide 72 text

ORDERED TREE DATA STRUCTURE

Slide 73

Slide 73 text

THE POSITION IN THE TREE DEFINES THE KEY WITH WHICH IT IS ASSOCIATED.

Slide 74

Slide 74 text

POSITION IN THE TREE

Slide 75

Slide 75 text

ELEMENTS ARE NORMALLY IN PRE-ORDER

Slide 76

Slide 76 text

AUTOCOMPLETE LEXICOGRAPH SEARCH TREES

Slide 77

Slide 77 text

WORDS: “A”, “AN”, “AND”, "ARE" AND “BEE”,

Slide 78

Slide 78 text

O(M) where m is the average word size

Slide 79

Slide 79 text

AUTOMATON?

Slide 80

Slide 80 text

A general trie [10, 13] is a lookup structure for finite strings that acts like a Deterministic Finite Automaton (DFA) without any loops: the transitions are the characters of the strings, the internal nodes encode prefix sharing, and the accept nodes may point to values associated with the strings

Slide 81

Slide 81 text

TALK IS CHEAP. SHOW ME THE CODE.

Slide 82

Slide 82 text

Not really !

Slide 83

Slide 83 text

HOW IMMUTABLEJS REALLY WORKS

Slide 84

Slide 84 text

LIST import { List } from "immutable" var list = List([1,2,3])

Slide 85

Slide 85 text

LIST import { List } from "immutable" var list = List([1,2,3]) var list2 = list.push(4)

Slide 86

Slide 86 text

LIST import { List } from "immutable" var list = List([1,2,3]) var list2 = list.push(4) list // [1,2,3] list2 === list // false

Slide 87

Slide 87 text

LIST import { List } from "immutable" var list = List([1,2,3]) var list2 = list.push(4) list // [1,2,3] list2 === list // false console.log(list.toString()) // List [ 1, 2, 3 ] console.log(list2.toString()) // List [ 1, 2, 3, 4 ]

Slide 88

Slide 88 text

MAP var Immutable = require('immutable'); var map1 = Immutable.Map({a:1, b:2, c:3});

Slide 89

Slide 89 text

MAP var Immutable = require('immutable'); var map1 = Immutable.Map({a:1, b:2, c:3}); var map2 = map1.set('b', 50);

Slide 90

Slide 90 text

MAP var Immutable = require('immutable'); var map1 = Immutable.Map({a:1, b:2, c:3}); var map2 = map1.set('b', 50); map1.get('b'); // 2 map2.get('b'); // 50

Slide 91

Slide 91 text

JAVASCRIPT FIRST API BRINGS INTERESTING ASPECTS FROM CLOJURE, SCALA AND HASKELL

Slide 92

Slide 92 text

Accepts raw Javascript objects var map1 = Immutable.Map({a:1, b:2, c:3, d:4}); var map2 = Immutable.Map({c:10, a:20, t:30}); var obj = {d:100, o:200, g:300}; var map3 = map1.merge(map2, obj); // Map { a: 20, b: 2, c: 10, d: 100, t: 30, o: 200, g: 300 }

Slide 93

Slide 93 text

Converts back to raw JavaScript objects. var deep = Immutable.Map({ a: 1, b: 2, c: Immutable.List.of(3, 4, 5) }); deep.toObject() // { a: 1, b: 2, c: List [ 3, 4, 5 ] } deep.toArray() // [ 1, 2, List [ 3, 4, 5 ] ] deep.toJS() // { a: 1, b: 2, c: [ 3, 4, 5 ] } JSON.stringify(deep) // '{"a":1,"b":2,"c":[3,4,5]}'

Slide 94

Slide 94 text

IT SEEMS YOU JUST MADE A LOT OF COPIES. ISN'T THAT SLOW?

Slide 95

Slide 95 text

(...) highly efficient on modern JavaScript VMs by using: — ImnmutableJS website

Slide 96

Slide 96 text

STRUCTURAL SHARING

Slide 97

Slide 97 text

HASH MAP TRIES

Slide 98

Slide 98 text

VECTOR TRIES

Slide 99

Slide 99 text

POPULARIZED BY CLOJURE AND SCALA,

Slide 100

Slide 100 text

MINIMIZING THE NEED TO COPY OR CACHE DATA.

Slide 101

Slide 101 text

MINIMIZING ?

Slide 102

Slide 102 text

STRUCTURAL SHARING?

Slide 103

Slide 103 text

No content

Slide 104

Slide 104 text

THIS IS IMPORTANT!

Slide 105

Slide 105 text

REMEMBER TRIES?

Slide 106

Slide 106 text

SIMPLE DATA STRUCTURE

Slide 107

Slide 107 text

LOOKUP VERY FAST O(M), WHERE M IS THE AVERAGE WORD SIZE

Slide 108

Slide 108 text

ELEMENTS ARE IN PRE-ORDER

Slide 109

Slide 109 text

CAN REPLACE SOME DATA STRUCTURES

Slide 110

Slide 110 text

SIMPLE AND STRAIGHTFORWARD

Slide 111

Slide 111 text

HASH ARRAY MAPPED TRIE

Slide 112

Slide 112 text

VECTOR TRIE

Slide 113

Slide 113 text

RUBY ?

Slide 114

Slide 114 text

IMMUTABILITY IN RUBY A HAMT IMPLEMENTATION ! HTTPS://GITHUB.COM/HAMSTERGEM/HAMSTER

Slide 115

Slide 115 text

person = Hamster::Hash[name: "Simon", gender: :male] # => Hamster::Hash[:name => "Simon", :gender => :male]

Slide 116

Slide 116 text

friend = person.put(:name, "James") # => Hamster::Hash[:name => "James", :gender => :male] person # => Hamster::Hash[:name => "Simon", :gender => :male] friend[:name] # => "James" person[:name] # => "Simon"

Slide 117

Slide 117 text

MORE INFORMATION HTTPS://GITHUB.COM/FRANZEJR/AWESOME-IMMUTABLE-DATA

Slide 118

Slide 118 text

IMPLEMENTATION AS TRIE, INTERFACE AS LISTS AND MAPS

Slide 119

Slide 119 text

WHY [IMMUTABLEJS]

Slide 120

Slide 120 text

WHAT PROBLEMS DOES THIS SOLVE ANYWAY?

Slide 121

Slide 121 text

CONCURRENCY. NO LOCKS. ❤

Slide 122

Slide 122 text

IMMUTABLE DATA DECREASES COMPLEXITY.

Slide 123

Slide 123 text

EMBRACING IMMUTABILITY ENABLES JAVASCRIPT’S HYPOTHETICAL FUTURE.

Slide 124

Slide 124 text

CHANGE TRACKING.

Slide 125

Slide 125 text

IF IMMUTABILITY IS SO GOOD,

Slide 126

Slide 126 text

WHY PEOPLE KEEP USING MUTABLE DATA?

Slide 127

Slide 127 text

STOCKHOLM SYNDROME

Slide 128

Slide 128 text

MUTABILITY IS DEFAULT IN IMPERATIVE LANGUAGES.

Slide 129

Slide 129 text

INERTIA OF MIND, A.K.A., RESISTANCE TO CHANGE

Slide 130

Slide 130 text

LET'S REVIEW IT

Slide 131

Slide 131 text

PERSISTENCE IMMUTABLE DATA STRUCTURE WITH A GREAT THEORY AND DATA STRUCTURES BEHIND IT

Slide 132

Slide 132 text

STRUCTURAL SHARING

Slide 133

Slide 133 text

SOLVE PROBLEMS BY LOWERING COMPLEXITY

Slide 134

Slide 134 text

THANKS! @FRANZEJR

Slide 135

Slide 135 text

References

Slide 136

Slide 136 text

Pete Hunt - The Secrets of React's Virtual DOM (FutureJS 2014) https://www.youtube.com/watch?v=-DX3vJiqxm4

Slide 137

Slide 137 text

React.js Conf 2015 - Immutable Data and React https://www.youtube.com/watch?v=I7IdS-PbEgI

Slide 138

Slide 138 text

Episode 8 - React, GraphQL, Immutable & Bow-Ties with Special Guest Lee Byron Thursday 31 December 2015 > Link > reactpodcast.com

Slide 139

Slide 139 text

No content