THE IMMUTABLE FRONTEND IN CLOJURESCRIPT Logan Linn (@loganlinn) - - PowerPoint PPT Presentation

▶
the immutable frontend in clojurescript
SMART_READER_LITE
LIVE PREVIEW

THE IMMUTABLE FRONTEND IN CLOJURESCRIPT Logan Linn (@loganlinn) - - PowerPoint PPT Presentation

Apr 09, 2024 23 likes •596 views

THE IMMUTABLE FRONTEND IN CLOJURESCRIPT Logan Linn (@loganlinn) QCon SF 2014 1 PRISMATIC Personalized, interest-based newsfeeds Crawlers, Machine Learning, Clients Were very functional 99.9% Clojure backend ClojureScript frontend We

slide-1
SLIDE 1

THE IMMUTABLE FRONTEND IN CLOJURESCRIPT

Logan Linn (@loganlinn) QCon SF 2014

1

slide-2
SLIDE 2

PRISMATIC

Personalized, interest-based newsfeeds Crawlers, Machine Learning, Clients We’re very functional 99.9% Clojure backend ClojureScript frontend We <3 open-source

2

slide-3
SLIDE 3

3

slide-4
SLIDE 4

IMMUTABLE FRONTEND

ClojureScript gives us immutability and more Immutability simplifies data-flow React allows us to render predictably with pure functions

4

slide-5
SLIDE 5

IMMUTABLE FRONTEND

5

React App State User Events API Data Component Tree D O M

slide-6
SLIDE 6

OUTLINE

Challenges of a Building a Frontend Immutability ClojureScript An Immutable Frontend

6

slide-7
SLIDE 7

CHALLENGES OF BUILDING A FRONTEND

Interactive UIs have a human factor Asynchronous programming Complexity comes from every angle Software complexity is a compounding debt

7

slide-8
SLIDE 8

INCIDENTAL COMPLEXITY

Managing state

8

slide-9
SLIDE 9

INCIDENTAL COMPLEXITY

Managing state Mutating data

9

slide-10
SLIDE 10

MODEL-VIEW-*

Domain vs Presentational data Keeping data and DOM in sync MVC, MVP, MVVM, etc.

10

animate

slide-11
SLIDE 11

EVENTS AND DATA-BINDING

Most frameworks today structured around Models Models publish changes via global events Views subscribe to changes and update Data bindings let you be declarative

11

slide-12
SLIDE 12

Controller Model View

12

slide-13
SLIDE 13

EVENT AND DATA-BINDING

Encourages mutation Data-flow becomes opaque, potentially hazardous Makes it easier, but not simpler

13

slide-14
SLIDE 14

MVC DATA-FLOW

14

slide-15
SLIDE 15

MVC DATA-FLOW

15

Controller Model View

slide-16
SLIDE 16

MVC DATA-FLOW

16

Controller Model View

DOM User Events

slide-17
SLIDE 17

What if we prioritized a simple data-flow?

17

slide-18
SLIDE 18

SINGLE-DIRECTION DATA FLOW

Pure Render

18

DOM App State User Events

slide-19
SLIDE 19

IMMUTABILITY

19

slide-20
SLIDE 20

A MUTABLE WORLD

20

x = Domain.List.from([‘x']) y = x.unshift('y') z = x.unshift('z') print(z.second()) // 'x' or 'y'? print(x) // ['x'] or ['z', 'y', 'x']?

slide-21
SLIDE 21

AN IMMUTABLE WORLD…

21

x = Domain.List.from([‘x']) y = x.unshift('y') z = x.unshift('z') print(z.second()) // 'x', final answer! print(x) // ['x'], fasho!

slide-22
SLIDE 22

RENDERING WITH PURE FUNCTIONS

22

ƒ(S1) = D1 ƒ(S2) = D2 ƒ(S1) = D1

t

slide-23
SLIDE 23

IMMUTABILITY ON THE FRONTEND

Simplicity & Clarity

23

slide-24
SLIDE 24

IMMUTABILITY ON THE FRONTEND

Simplicity & Clarity Predictability

24

slide-25
SLIDE 25

IMMUTABILITY ON THE FRONTEND

Simplicity & Clarity Predictability Less defensive programming, i.e. _.cloneDeep(obj)

25

slide-26
SLIDE 26

IMMUTABILITY ON THE FRONTEND

Simplicity & Clarity Predictability Less defensive programming, i.e. _.cloneDeep(obj) Constant time dirty checking

26

slide-27
SLIDE 27

IMMUTABILITY & PERFORMANCE

Persistent data structures Structural sharing Memory efficiency Conjoin to collection in O(1) Update hash-map in O(log32 n) vs O(n)

27

a b c

slide-28
SLIDE 28

CLOJURE(SCRIPT)

28

slide-29
SLIDE 29

CLOJURE & CLOJURESCRIPT

Dynamic, Functional, Lisp Clojure Compiles to JVM bytecode 7 years old ClojureScript Compiles to JavaScript 3 years old

29

slide-30
SLIDE 30

WHY WE LIKE CLOJURESCRIPT

Clarity & Consistency Strong core library over clean abstractions Macros Share code with rest of code-base

30

"It is better to have 100 functions operate on one data structure than 10 functions on 10 data structures."

—Alan Perlis, 1982

slide-31
SLIDE 31

MUTATION REQUIRES OPT-IN

Immutable data by default State modeled with reference to immutable value Special functions to mutate reference & dereference value Easy to identify side-effects

31

slide-32
SLIDE 32

(def state-ref (atom {})) (deref state-ref) ;; => {} (reset! state-ref {:a 1}) @state-ref ;; => {:a 1} (defn increment-a [state] (update-in state [:a] inc)) (increment-a @state-ref) ;; => {:a 2} @state-ref ;; => {:a 1} (swap! state-ref increment-a) @state-ref ;; => {:a 2}

32

slide-33
SLIDE 33

SEPARATION OF CONCERNS

Time Relative moments when events occur State A value at a point in time Identity Entity associated with state over time

33

slide-34
SLIDE 34

AN IMMUTABLE ARCHITECTURE

34

slide-35
SLIDE 35

AN IMMUTABLE ARCHITECTURE

35

React App State User Events HTTP Data Component Tree D O M

slide-36
SLIDE 36

AN IMMUTABLE ARCHITECTURE

state

36

slide-37
SLIDE 37

AN IMMUTABLE ARCHITECTURE

component component component state component

37

slide-38
SLIDE 38

AN IMMUTABLE ARCHITECTURE

state component component component component

38

slide-39
SLIDE 39

AN IMMUTABLE ARCHITECTURE

state component component component component

39

slide-40
SLIDE 40

AN IMMUTABLE ARCHITECTURE

state component component

40

slide-41
SLIDE 41

AN IMMUTABLE ARCHITECTURE

state component

41

slide-42
SLIDE 42

AN IMMUTABLE ARCHITECTURE

state component

42

component tree

slide-43
SLIDE 43

actions

AN IMMUTABLE ARCHITECTURE

43

state component tree

slide-44
SLIDE 44

AN IMMUTABLE ARCHITECTURE

44

state component tree

slide-45
SLIDE 45

AN IMMUTABLE ARCHITECTURE

45

component tree

slide-46
SLIDE 46

AN IMMUTABLE ARCHITECTURE

46

S1

component tree

S2

slide-47
SLIDE 47

AN IMMUTABLE ARCHITECTURE

47

React App State User Events HTTP Data Component Tree D O M

slide-48
SLIDE 48

AN IMMUTABLE ARCHITECTURE

Immutable application state Business logic written as pure functions Declarative rendering

48

slide-49
SLIDE 49

APP STATE

Reference to an immutable value Updating state changes reference Business logic as pure functions Compose multiple operations & apply at once

49

App State

slide-50
SLIDE 50

REACT

UI rendering library from Facebook “Not templating. Not MVC. It’s like a declarative jQuery” -Pete Hunt Manipulates DOM & handles events (thats all) Trending, and rightfully so!

50

React D O M

slide-51
SLIDE 51

REACT

var HelloMessage = React.createClass({ render: function() { return DOM.div({}, "Hello " + this.props.name); } }); React.render(HelloMessage({name: "QCon"}), mountNode); React.render(HelloMessage({name: "QCon SF"}), mountNode);

51

slide-52
SLIDE 52

REACT

Basic building block is a component with render() method Data in, “virtual DOM” out When data changes, render() is re-run Performs diff between vDOM and actual DOM Pushes out minimal set of changes to keep in sync

52

React D O M

slide-53
SLIDE 53

REACT & CLOJURESCRIPT

Shared design principles pure and composable functions simplicity through predictability Actually useful API Easy to compose from ClojureScript Libraries like Om, Reagent, Quiescent

53

slide-54
SLIDE 54

DOM2

REACT & CLOJURESCRIPT

54

S1

D1

S2

D2

React DOM1

slide-55
SLIDE 55

SIMPLE OM EXAMPLE

55

slide-56
SLIDE 56

WRAP-UP

Immutability & referential transparency have many benefits Testing & Reasoning Application architecture Invest in languages & tools that prioritize simplicity Clojure & ClojureScript are great! React is great!

56

slide-57
SLIDE 57

THANKS!

@loganlinn @prismatic

57