Event streams all the way down

52
Event streams all the way down @paulswilliamsuk @birminghamfp @blackpepperltd

Transcript of Event streams all the way down

Page 1: Event streams all the way down

Event streams all

the way down

@paulswilliamsuk @birminghamfp

@blackpepperltd

Page 2: Event streams all the way down

Not a Clojure intro

Page 3: Event streams all the way down

Clojure is a lisp on the JVM

Page 4: Event streams all the way down

React.JS knowledge?

Page 5: Event streams all the way down

Let’s start with an example

Page 6: Event streams all the way down

re-framea framework that enables standard React.js components,

written as functions, to bind one way to reactions, which are streams upon app state.

Page 7: Event streams all the way down

single tree state similar to redux

Page 8: Event streams all the way down

Takes inspiration from Elm Lang

Page 9: Event streams all the way down

html > events > event handlers > app-db > subscriptions > html

Page 10: Event streams all the way down

As all lisp-heads say

Let’s start with the data so…

Page 11: Event streams all the way down

Let’s look at app-db

Page 12: Event streams all the way down

@re-frame.db/app-db

Page 13: Event streams all the way down

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

Page 14: Event streams all the way down

but Clojure data is immutable?

Page 15: Event streams all the way down

AtomsAtoms provide a way to manage shared, synchronous,

independent state. They are a reference type like refs and vars. You create an atom with atom, and can access its state

with deref/@.

Page 16: Event streams all the way down

@re-frame.db/app-db

Page 17: Event streams all the way down

So let’s swap!

Page 18: Event streams all the way down

(swap! re-frame.db/app-db assoc :server-add-status :requested)

Page 19: Event streams all the way down

(swap! re-frame.db/app-db assoc :server-add-status :success)

Page 20: Event streams all the way down

html > events > event handlers > app-db > subscriptions > html

Page 21: Event streams all the way down

One way data bind

Page 22: Event streams all the way down

The view is a React component written as a function

Page 23: Event streams all the way down

And they nest

Page 24: Event streams all the way down

Subscriptions are a form of indirection

Page 25: Event streams all the way down

Could transform data to aid view logic

Page 26: Event streams all the way down

And that’s half of the client flow

Page 27: Event streams all the way down

views > events > event handlers > app-db > subscriptions > views

Page 28: Event streams all the way down

Downward event flow

Page 29: Event streams all the way down

Back to the view…

Page 30: Event streams all the way down

And the event handler is a function that implicitly replaces app-db

Page 31: Event streams all the way down

views > events > event handlers > app-db > subscriptions > views

Page 32: Event streams all the way down

@re-frame.db/app-db

Page 33: Event streams all the way down

And back to the server...

Page 34: Event streams all the way down

Datomic events at in the DB

Page 35: Event streams all the way down

Records data

Page 36: Event streams all the way down

As facts

Page 37: Event streams all the way down

And replaces facts transactionally

Page 38: Event streams all the way down

Time based queries are simpler

Page 39: Event streams all the way down

Let’s travel time…

Page 40: Event streams all the way down

And a quick sniff around the whole solution

Page 41: Event streams all the way down

Tech stack review

Page 42: Event streams all the way down

re-frame reagent React.js

Ring Datomic

Page 43: Event streams all the way down

What I like immutability fast simple live repl + figwheel React

Page 44: Event streams all the way down

What I like immutability fast simple live repl + figwheel React

Page 45: Event streams all the way down

What I like immutability fast simple live repl + figwheel React

Page 46: Event streams all the way down

What I like immutability fast simple live repl + figwheel React

Page 47: Event streams all the way down

What I like immutability fast simple live repl + figwheel React

Page 48: Event streams all the way down

What I like immutability fast simple live repl + figwheel React

Page 49: Event streams all the way down

What I like immutability fast simple live repl + figwheel React

Page 50: Event streams all the way down

// todo Clojure hands on? Follow on Datomic session? WebSocket stream - SSE Date picker More HighCharts / fields Publish code

Page 51: Event streams all the way down

Links http://www.infoq.com/presentations/Simple-Made-Easy

https://facebook.github.io/react/docs/tutorial.html https://github.com/Day8/re-frame

https://github.com/paulspencerwilliams/paul-reduce https://github.com/paulspencerwilliams/paul-reduce/tree/datomic-pro

http://gigasquidsoftware.com/blog/2015/08/15/conversations-with-datomic/

Page 52: Event streams all the way down

Questions?