Clojurescript, Om and the future of the SPA

How did I get here?

The Guardian

The Guardian is...

• shockingly...

The Guardian is...

• shockingly...
• hiring!

The Guardian is...

• shockingly...
• hiring!
  

http://developers.theguardian.com

Clojure Exchange talk

• Use Wisp to get macros and better functions
• Use Mori to get great data structures
• Ship the result via NPM modules

No code
No demos
All talk

OM

David Nolan

React
Immutablity
CSP

Improve your SPA performance with this one weird trick

How do we render our content?

When should we render our content?

How should we model our app?

The takeaway

• State should be singular and atomic
• Rendering should be deferred until necessary and avoid access mutable low-level APIs
• Events should be abstracted to a higher-level and only the abstraction should be used in code

Making it happen

They told me I had to use Clojure

And I said...

• No
• No
• No

But I already know Javascript!

And Attwood's Law

Javascript

How much does syntax matter?

Languages

• Javascript
• Clojurescript
• Elm
• Purescript

Dialects

• Typescript
• Coffeescript/LiveScript
• ES6/7

Web
Assembly

Does anyone read source code now?

"I installed it via NPM"

Re-implementing all the things in Javascript

Pros & Cons

The three pillars

• Immutable data
• Event streams
• DOM rendering

Immutable
data
 

Immutable data and React

Lee Byron

Mori versus ImmutableJS

We need immutable data

• To reason about code
• To simplify scope
• And equality
• To reduce bugs
• And make us think about state transistions

There is no sensible reason to not use ImmutableJS

Event
handling

Why can't we just get by with events?

"Functional reactive programming"

"Reactive programming"

Why event buses don't work

• Queues
• Bounded
• Unbounded

CSP

Communicating Sequential Processes

Clojurescript or ES6 (js-csp)

The evolution of events

• Callbacks
• Listeners
• Observables
• Event streams

The trouble with observables

• Complex stream combinations (RxMarbles)
• Require care to separate reading from writing
• No access to events before subscribing
• Stateful and complex

Implementations

• RxJS
• Bacon/Kefir
• One hundred homebrews
• es-observable

No recommendations

Rendering
HTML

What's wrong with React?

• Component model
• Difference computations
• Doesn't use templating
• Mutable by default
• Unopinionated about state

The Reactive Loop

Sébastien Cevey

http://slides.com/theefer/reactive-loop-jscamp#/

Model

Events

View

Intents

To Virtual-Dom or not

FFS... yes

Frameworks that dom-diff

• RiotJS
• Deku
• Ractive
• Omniscient
• Mithril
• Mercury
• Cycle

Frameworks that dom-diff and integrate immutable data

• Omniscient

Frameworks that dom-diff and integrate immutable data and use lightweight vdom rendering

• Well...

Final thoughts

What can browsers and standards do for us?

• New DOM APIs
• Immutable data structures in ES

What can we do for ourselves?

• Get behind native observables
• Develop a habit of const
• Use immutable data

The three pillars

• Immutable data
• Unidirectional event streams
• Data-driven atomic model rendering

Thank you!

• Twitter/Github: rrees
• Blog: rrees.me