60
Immutability, Interactivity & JavaScript

Immutability, Interactivity & JavaScriptgotocon.com/dl/goto-chicago-2014/slides/DavidNolen_TheFunctional… · & JavaScript. Immutability, Interactivity & JavaScript (er ClojureScript)

  • Upload
    others

  • View
    11

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Immutability, Interactivity & JavaScriptgotocon.com/dl/goto-chicago-2014/slides/DavidNolen_TheFunctional… · & JavaScript. Immutability, Interactivity & JavaScript (er ClojureScript)

Immutability, Interactivity & JavaScript

Page 2: Immutability, Interactivity & JavaScriptgotocon.com/dl/goto-chicago-2014/slides/DavidNolen_TheFunctional… · & JavaScript. Immutability, Interactivity & JavaScript (er ClojureScript)

Immutability, Interactivity & JavaScript

(er ClojureScript)

Page 3: Immutability, Interactivity & JavaScriptgotocon.com/dl/goto-chicago-2014/slides/DavidNolen_TheFunctional… · & JavaScript. Immutability, Interactivity & JavaScript (er ClojureScript)
Page 4: Immutability, Interactivity & JavaScriptgotocon.com/dl/goto-chicago-2014/slides/DavidNolen_TheFunctional… · & JavaScript. Immutability, Interactivity & JavaScript (er ClojureScript)
Page 5: Immutability, Interactivity & JavaScriptgotocon.com/dl/goto-chicago-2014/slides/DavidNolen_TheFunctional… · & JavaScript. Immutability, Interactivity & JavaScript (er ClojureScript)
Page 6: Immutability, Interactivity & JavaScriptgotocon.com/dl/goto-chicago-2014/slides/DavidNolen_TheFunctional… · & JavaScript. Immutability, Interactivity & JavaScript (er ClojureScript)

Model-View-Controller

Page 7: Immutability, Interactivity & JavaScriptgotocon.com/dl/goto-chicago-2014/slides/DavidNolen_TheFunctional… · & JavaScript. Immutability, Interactivity & JavaScript (er ClojureScript)

๏ first formulated by Trygve Reenskaug Adele Goldberg and others at Xerox PARC in 1979

๏ long shadow, the basic concepts still prevalent today.

Page 8: Immutability, Interactivity & JavaScriptgotocon.com/dl/goto-chicago-2014/slides/DavidNolen_TheFunctional… · & JavaScript. Immutability, Interactivity & JavaScript (er ClojureScript)

๏ At a very abstract level MVC is a sound separation of concerns

๏ Implementations leave much to be desired

๏ Stateful objects everywhere

Page 9: Immutability, Interactivity & JavaScriptgotocon.com/dl/goto-chicago-2014/slides/DavidNolen_TheFunctional… · & JavaScript. Immutability, Interactivity & JavaScript (er ClojureScript)
Page 10: Immutability, Interactivity & JavaScriptgotocon.com/dl/goto-chicago-2014/slides/DavidNolen_TheFunctional… · & JavaScript. Immutability, Interactivity & JavaScript (er ClojureScript)
Page 11: Immutability, Interactivity & JavaScriptgotocon.com/dl/goto-chicago-2014/slides/DavidNolen_TheFunctional… · & JavaScript. Immutability, Interactivity & JavaScript (er ClojureScript)

Mutable DOM

Page 12: Immutability, Interactivity & JavaScriptgotocon.com/dl/goto-chicago-2014/slides/DavidNolen_TheFunctional… · & JavaScript. Immutability, Interactivity & JavaScript (er ClojureScript)
Page 13: Immutability, Interactivity & JavaScriptgotocon.com/dl/goto-chicago-2014/slides/DavidNolen_TheFunctional… · & JavaScript. Immutability, Interactivity & JavaScript (er ClojureScript)
Page 14: Immutability, Interactivity & JavaScriptgotocon.com/dl/goto-chicago-2014/slides/DavidNolen_TheFunctional… · & JavaScript. Immutability, Interactivity & JavaScript (er ClojureScript)

Functional Programming?

๏ Functional Reactive Programming (FRP), still active area of research

๏ Rx, doesn't address rendering

๏ Communicating Sequential Processes (CSP), a coordination language, doesn't address rendering

Page 15: Immutability, Interactivity & JavaScriptgotocon.com/dl/goto-chicago-2014/slides/DavidNolen_TheFunctional… · & JavaScript. Immutability, Interactivity & JavaScript (er ClojureScript)
Page 16: Immutability, Interactivity & JavaScriptgotocon.com/dl/goto-chicago-2014/slides/DavidNolen_TheFunctional… · & JavaScript. Immutability, Interactivity & JavaScript (er ClojureScript)
Page 17: Immutability, Interactivity & JavaScriptgotocon.com/dl/goto-chicago-2014/slides/DavidNolen_TheFunctional… · & JavaScript. Immutability, Interactivity & JavaScript (er ClojureScript)
Page 18: Immutability, Interactivity & JavaScriptgotocon.com/dl/goto-chicago-2014/slides/DavidNolen_TheFunctional… · & JavaScript. Immutability, Interactivity & JavaScript (er ClojureScript)

Functional Programming and Data• immutable values, not mutable objects

• “change” returns a new value, leaving the old one unmodified

• they’re persistent

• they’re fast

Page 19: Immutability, Interactivity & JavaScriptgotocon.com/dl/goto-chicago-2014/slides/DavidNolen_TheFunctional… · & JavaScript. Immutability, Interactivity & JavaScript (er ClojureScript)

Simple example: Linked List

X

Page 20: Immutability, Interactivity & JavaScriptgotocon.com/dl/goto-chicago-2014/slides/DavidNolen_TheFunctional… · & JavaScript. Immutability, Interactivity & JavaScript (er ClojureScript)

Simple example: Linked List

XY

Page 21: Immutability, Interactivity & JavaScriptgotocon.com/dl/goto-chicago-2014/slides/DavidNolen_TheFunctional… · & JavaScript. Immutability, Interactivity & JavaScript (er ClojureScript)

Simple example: Linked List

X

Z

Y

Page 22: Immutability, Interactivity & JavaScriptgotocon.com/dl/goto-chicago-2014/slides/DavidNolen_TheFunctional… · & JavaScript. Immutability, Interactivity & JavaScript (er ClojureScript)

Simple example: Linked List

X

Z

Y

structural sharing

Page 23: Immutability, Interactivity & JavaScriptgotocon.com/dl/goto-chicago-2014/slides/DavidNolen_TheFunctional… · & JavaScript. Immutability, Interactivity & JavaScript (er ClojureScript)

Sharing structure

• space efficiency

• computational efficiency – avoids copying

Page 24: Immutability, Interactivity & JavaScriptgotocon.com/dl/goto-chicago-2014/slides/DavidNolen_TheFunctional… · & JavaScript. Immutability, Interactivity & JavaScript (er ClojureScript)

Phil Bagwell

• Array Mapped Trie

• Hash Array Mapped Trie

Page 25: Immutability, Interactivity & JavaScriptgotocon.com/dl/goto-chicago-2014/slides/DavidNolen_TheFunctional… · & JavaScript. Immutability, Interactivity & JavaScript (er ClojureScript)

Bitmapped Vector Trie

• data lives in the leaves

• e.g. prefix tree used for string lookup

• bitwise trie

Page 26: Immutability, Interactivity & JavaScriptgotocon.com/dl/goto-chicago-2014/slides/DavidNolen_TheFunctional… · & JavaScript. Immutability, Interactivity & JavaScript (er ClojureScript)

Persistent Vector

Page 27: Immutability, Interactivity & JavaScriptgotocon.com/dl/goto-chicago-2014/slides/DavidNolen_TheFunctional… · & JavaScript. Immutability, Interactivity & JavaScript (er ClojureScript)

Persistent Vector

Page 28: Immutability, Interactivity & JavaScriptgotocon.com/dl/goto-chicago-2014/slides/DavidNolen_TheFunctional… · & JavaScript. Immutability, Interactivity & JavaScript (er ClojureScript)

Persistent Vector

Page 29: Immutability, Interactivity & JavaScriptgotocon.com/dl/goto-chicago-2014/slides/DavidNolen_TheFunctional… · & JavaScript. Immutability, Interactivity & JavaScript (er ClojureScript)

Persistent Vector

Page 30: Immutability, Interactivity & JavaScriptgotocon.com/dl/goto-chicago-2014/slides/DavidNolen_TheFunctional… · & JavaScript. Immutability, Interactivity & JavaScript (er ClojureScript)

Persistent Vector

108 109 110 111104 105 106 107100 101 102 10396 97 98 99

Page 31: Immutability, Interactivity & JavaScriptgotocon.com/dl/goto-chicago-2014/slides/DavidNolen_TheFunctional… · & JavaScript. Immutability, Interactivity & JavaScript (er ClojureScript)

Persistent Vector

getindex

Page 32: Immutability, Interactivity & JavaScriptgotocon.com/dl/goto-chicago-2014/slides/DavidNolen_TheFunctional… · & JavaScript. Immutability, Interactivity & JavaScript (er ClojureScript)

Persistent Vector

108 109 110 111104 105 106 107100 101 102 10396 97 98 99

Page 33: Immutability, Interactivity & JavaScriptgotocon.com/dl/goto-chicago-2014/slides/DavidNolen_TheFunctional… · & JavaScript. Immutability, Interactivity & JavaScript (er ClojureScript)

Persistent Vector

108 109 110 111104 105 106 107100 101 102 10396 97 98 99

0b01101010

Page 34: Immutability, Interactivity & JavaScriptgotocon.com/dl/goto-chicago-2014/slides/DavidNolen_TheFunctional… · & JavaScript. Immutability, Interactivity & JavaScript (er ClojureScript)

Persistent Vector

108 109 110 111104 105 106 107100 101 102 10396 97 98 99

0b01101010

Page 35: Immutability, Interactivity & JavaScriptgotocon.com/dl/goto-chicago-2014/slides/DavidNolen_TheFunctional… · & JavaScript. Immutability, Interactivity & JavaScript (er ClojureScript)

Persistent Vector

108 109 110 111104 105 106 107100 101 102 10396 97 98 99

0b01101010

Page 36: Immutability, Interactivity & JavaScriptgotocon.com/dl/goto-chicago-2014/slides/DavidNolen_TheFunctional… · & JavaScript. Immutability, Interactivity & JavaScript (er ClojureScript)

Persistent Vector

108 109 110 111104 105 106 107100 101 102 10396 97 98 99

0b01101010

Page 37: Immutability, Interactivity & JavaScriptgotocon.com/dl/goto-chicago-2014/slides/DavidNolen_TheFunctional… · & JavaScript. Immutability, Interactivity & JavaScript (er ClojureScript)

Persistent Vector

108 109 110 111104 105 106 107100 101 102 10396 97 98 99

0b01101010

Page 38: Immutability, Interactivity & JavaScriptgotocon.com/dl/goto-chicago-2014/slides/DavidNolen_TheFunctional… · & JavaScript. Immutability, Interactivity & JavaScript (er ClojureScript)

Persistent Vector

assoc

Page 39: Immutability, Interactivity & JavaScriptgotocon.com/dl/goto-chicago-2014/slides/DavidNolen_TheFunctional… · & JavaScript. Immutability, Interactivity & JavaScript (er ClojureScript)

Persistent Vector

108 109 110 111104 105 106 107100 101 102 10396 97 98 99

Page 40: Immutability, Interactivity & JavaScriptgotocon.com/dl/goto-chicago-2014/slides/DavidNolen_TheFunctional… · & JavaScript. Immutability, Interactivity & JavaScript (er ClojureScript)

Persistent Vector

108 109 110 111104 105 106 107100 101 102 10396 97 98 99

Page 41: Immutability, Interactivity & JavaScriptgotocon.com/dl/goto-chicago-2014/slides/DavidNolen_TheFunctional… · & JavaScript. Immutability, Interactivity & JavaScript (er ClojureScript)

Persistent Vector

108 109 110 111104 105 106 107100 101 102 10396 97 98 99

Page 42: Immutability, Interactivity & JavaScriptgotocon.com/dl/goto-chicago-2014/slides/DavidNolen_TheFunctional… · & JavaScript. Immutability, Interactivity & JavaScript (er ClojureScript)

Persistent Vector

108 109 110 111104 105 106 107100 101 102 10396 97 98 99

Page 43: Immutability, Interactivity & JavaScriptgotocon.com/dl/goto-chicago-2014/slides/DavidNolen_TheFunctional… · & JavaScript. Immutability, Interactivity & JavaScript (er ClojureScript)

Persistent Vector

108 109 110 111104 105 106 107100 101 102 10396 97 98 99104 105 foo 107

Page 44: Immutability, Interactivity & JavaScriptgotocon.com/dl/goto-chicago-2014/slides/DavidNolen_TheFunctional… · & JavaScript. Immutability, Interactivity & JavaScript (er ClojureScript)

Persistent Vector

Length 4 internal vectors?

Page 45: Immutability, Interactivity & JavaScriptgotocon.com/dl/goto-chicago-2014/slides/DavidNolen_TheFunctional… · & JavaScript. Immutability, Interactivity & JavaScript (er ClojureScript)

Persistent Vector32

From Bagwell, Rompf 2011

Page 46: Immutability, Interactivity & JavaScriptgotocon.com/dl/goto-chicago-2014/slides/DavidNolen_TheFunctional… · & JavaScript. Immutability, Interactivity & JavaScript (er ClojureScript)

327

Page 47: Immutability, Interactivity & JavaScriptgotocon.com/dl/goto-chicago-2014/slides/DavidNolen_TheFunctional… · & JavaScript. Immutability, Interactivity & JavaScript (er ClojureScript)

34,359,738,368 elements

Page 48: Immutability, Interactivity & JavaScriptgotocon.com/dl/goto-chicago-2014/slides/DavidNolen_TheFunctional… · & JavaScript. Immutability, Interactivity & JavaScript (er ClojureScript)

Om

Page 49: Immutability, Interactivity & JavaScriptgotocon.com/dl/goto-chicago-2014/slides/DavidNolen_TheFunctional… · & JavaScript. Immutability, Interactivity & JavaScript (er ClojureScript)
Page 50: Immutability, Interactivity & JavaScriptgotocon.com/dl/goto-chicago-2014/slides/DavidNolen_TheFunctional… · & JavaScript. Immutability, Interactivity & JavaScript (er ClojureScript)

f(D0) = V0

Page 51: Immutability, Interactivity & JavaScriptgotocon.com/dl/goto-chicago-2014/slides/DavidNolen_TheFunctional… · & JavaScript. Immutability, Interactivity & JavaScript (er ClojureScript)

f(D1) = V1

Page 52: Immutability, Interactivity & JavaScriptgotocon.com/dl/goto-chicago-2014/slides/DavidNolen_TheFunctional… · & JavaScript. Immutability, Interactivity & JavaScript (er ClojureScript)

diff(V0,V1) = CHANGES

Page 53: Immutability, Interactivity & JavaScriptgotocon.com/dl/goto-chicago-2014/slides/DavidNolen_TheFunctional… · & JavaScript. Immutability, Interactivity & JavaScript (er ClojureScript)
Page 54: Immutability, Interactivity & JavaScriptgotocon.com/dl/goto-chicago-2014/slides/DavidNolen_TheFunctional… · & JavaScript. Immutability, Interactivity & JavaScript (er ClojureScript)

demo

Page 55: Immutability, Interactivity & JavaScriptgotocon.com/dl/goto-chicago-2014/slides/DavidNolen_TheFunctional… · & JavaScript. Immutability, Interactivity & JavaScript (er ClojureScript)
Page 56: Immutability, Interactivity & JavaScriptgotocon.com/dl/goto-chicago-2014/slides/DavidNolen_TheFunctional… · & JavaScript. Immutability, Interactivity & JavaScript (er ClojureScript)

demo

Page 57: Immutability, Interactivity & JavaScriptgotocon.com/dl/goto-chicago-2014/slides/DavidNolen_TheFunctional… · & JavaScript. Immutability, Interactivity & JavaScript (er ClojureScript)
Page 58: Immutability, Interactivity & JavaScriptgotocon.com/dl/goto-chicago-2014/slides/DavidNolen_TheFunctional… · & JavaScript. Immutability, Interactivity & JavaScript (er ClojureScript)

Persistent Data Structures … ROCK

Page 59: Immutability, Interactivity & JavaScriptgotocon.com/dl/goto-chicago-2014/slides/DavidNolen_TheFunctional… · & JavaScript. Immutability, Interactivity & JavaScript (er ClojureScript)
Page 60: Immutability, Interactivity & JavaScriptgotocon.com/dl/goto-chicago-2014/slides/DavidNolen_TheFunctional… · & JavaScript. Immutability, Interactivity & JavaScript (er ClojureScript)

Questions?