Video and slides synchronized, mp3 and slide download available at URL http://bit.ly/14qqeTd. Logan Linn explores the design and implications of an architecture built around immutable data structures using ClojureScript and Om, a ClojureScript interface to Facebook's React. Filmed at qconsf.com. Logan Linn is a software engineer at Prismatic, a social news curation and content discovery app for web and mobile.

1. THE IMMUTABLE FRONTEND IN
CLOJURESCRIPT
Logan Linn (@loganlinn)
QCon SF 2014
1

2. InfoQ.com: News & Community Site
• 750,000 unique visitors/month
• Published in 4 languages (English, Chinese, Japanese and Brazilian
Portuguese)
• Post content from our QCon conferences
• News 15-20 / week
• Articles 3-4 / week
• Presentations (videos) 12-15 / week
• Interviews 2-3 / week
• Books 1 / month
Watch the video with slide
synchronization on InfoQ.com!
http://www.infoq.com/presentations
/immutable-frontend-clojurescript

3. Purpose of QCon
- to empower software development by facilitating the spread of
knowledge and innovation
Strategy
- practitioner-driven conference designed for YOU: influencers of
change and innovation in your teams
- speakers and topics driving the evolution and innovation
- connecting and catalyzing the influencers and innovators
Highlights
- attended by more than 12,000 delegates since 2007
- held in 9 cities worldwide
Presented at QCon San Francisco
www.qconsf.com

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

5. 3

6. IMMUTABLE FRONTEND
ClojureScript gives us immutability and more
Immutability simplifies data-flow
React allows us to render predictably with pure functions
4

7. IMMUTABLE FRONTEND
5
ReactApp
State
User
Events
API
Data
Component
Tree
D
O
M

8. OUTLINE
Challenges of a Building a Frontend
Immutability
ClojureScript
An Immutable Frontend
6

9. 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

10. INCIDENTAL COMPLEXITY
Managing state
8

11. INCIDENTAL COMPLEXITY
Managing state
Mutating data
9

12. MODEL-VIEW-*
Domain vs Presentational data
Keeping data and DOM in sync
MVC, MVP, MVVM, etc.
10
animate

13. 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

14. ControllerModel View
12

15. EVENT AND DATA-BINDING
Encourages mutation
Data-flow becomes opaque, potentially hazardous
Makes it easier, but not simpler
13

16. MVC DATA-FLOW
14

17. MVC DATA-FLOW
15
ControllerModel View

18. MVC DATA-FLOW
16
ControllerModel View
DOM
User
Events

19. What if we prioritized a simple data-flow?
17

20. SINGLE-DIRECTION DATA FLOW
Pure
Render
18
DOMApp
State
User
Events

21. IMMUTABILITY
19

22. 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']?

23. 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!

24. RENDERING WITH PURE FUNCTIONS
22
ƒ(S1) = D1
ƒ(S2) = D2
ƒ(S1) = D1
t

25. IMMUTABILITY ON THE FRONTEND
Simplicity & Clarity
23

26. IMMUTABILITY ON THE FRONTEND
Simplicity & Clarity
Predictability
24

27. IMMUTABILITY ON THE FRONTEND
Simplicity & Clarity
Predictability
Less defensive programming, i.e.
_.cloneDeep(obj)
25

28. IMMUTABILITY ON THE FRONTEND
Simplicity & Clarity
Predictability
Less defensive programming, i.e.
_.cloneDeep(obj)
Constant time dirty checking
26

29. 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
ab
c

30. CLOJURE(SCRIPT)
28

31. CLOJURE & CLOJURESCRIPT
Dynamic, Functional, Lisp
Clojure
Compiles to JVM bytecode
7 years old
ClojureScript
Compiles to JavaScript
3 years old
29

32. 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

33. 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

34. (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

35. 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

36. AN IMMUTABLE ARCHITECTURE
34

37. AN IMMUTABLE ARCHITECTURE
35
ReactApp
State
User
Events
HTTP
Data
Component
Tree
D
O
M

38. AN IMMUTABLE ARCHITECTURE
state
36

39. AN IMMUTABLE ARCHITECTURE
component
component
component
state
component
37

40. AN IMMUTABLE ARCHITECTURE
state
component
component component
component
38

41. AN IMMUTABLE ARCHITECTURE
state
component component
component
component
39

42. AN IMMUTABLE ARCHITECTURE
state
component component
40

43. AN IMMUTABLE ARCHITECTURE
state
component
41

44. AN IMMUTABLE ARCHITECTURE
state
component
42
component
tree

45. actions
AN IMMUTABLE ARCHITECTURE
43
state
component
tree

46. AN IMMUTABLE ARCHITECTURE
44
state
component
tree

47. AN IMMUTABLE ARCHITECTURE
45
component
tree

48. AN IMMUTABLE ARCHITECTURE
46
S1
component
tree
S2

49. AN IMMUTABLE ARCHITECTURE
47
ReactApp
State
User
Events
HTTP
Data
Component
Tree
D
O
M

50. AN IMMUTABLE ARCHITECTURE
Immutable application state
Business logic written as pure functions
Declarative rendering
48

51. 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

52. 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

53. 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

54. 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

55. 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

56. DOM2
REACT & CLOJURESCRIPT
54
S1
D1
S2
D2
React
DOM1

57. SIMPLE OM EXAMPLE
55

58. 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

59. THANKS!
@loganlinn
@prismatic
57

60. Watch the video with slide synchronization on
InfoQ.com!
http://www.infoq.com/presentations/immutable-
frontend-clojurescript