Download - Event streams all the way down
![Page 1: Event streams all the way down](https://reader033.vdocuments.mx/reader033/viewer/2022052514/589e21fe1a28ab605b8b6c57/html5/thumbnails/1.jpg)
Event streams all
the way down
@paulswilliamsuk @birminghamfp
@blackpepperltd
![Page 2: Event streams all the way down](https://reader033.vdocuments.mx/reader033/viewer/2022052514/589e21fe1a28ab605b8b6c57/html5/thumbnails/2.jpg)
Not a Clojure intro
![Page 3: Event streams all the way down](https://reader033.vdocuments.mx/reader033/viewer/2022052514/589e21fe1a28ab605b8b6c57/html5/thumbnails/3.jpg)
Clojure is a lisp on the JVM
![Page 4: Event streams all the way down](https://reader033.vdocuments.mx/reader033/viewer/2022052514/589e21fe1a28ab605b8b6c57/html5/thumbnails/4.jpg)
React.JS knowledge?
![Page 6: Event streams all the way down](https://reader033.vdocuments.mx/reader033/viewer/2022052514/589e21fe1a28ab605b8b6c57/html5/thumbnails/6.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052514/589e21fe1a28ab605b8b6c57/html5/thumbnails/7.jpg)
single tree state similar to redux
![Page 8: Event streams all the way down](https://reader033.vdocuments.mx/reader033/viewer/2022052514/589e21fe1a28ab605b8b6c57/html5/thumbnails/8.jpg)
Takes inspiration from Elm Lang
![Page 9: Event streams all the way down](https://reader033.vdocuments.mx/reader033/viewer/2022052514/589e21fe1a28ab605b8b6c57/html5/thumbnails/9.jpg)
html > events > event handlers > app-db > subscriptions > html
![Page 10: Event streams all the way down](https://reader033.vdocuments.mx/reader033/viewer/2022052514/589e21fe1a28ab605b8b6c57/html5/thumbnails/10.jpg)
As all lisp-heads say
Let’s start with the data so…
![Page 11: Event streams all the way down](https://reader033.vdocuments.mx/reader033/viewer/2022052514/589e21fe1a28ab605b8b6c57/html5/thumbnails/11.jpg)
Let’s look at app-db
![Page 12: Event streams all the way down](https://reader033.vdocuments.mx/reader033/viewer/2022052514/589e21fe1a28ab605b8b6c57/html5/thumbnails/12.jpg)
@re-frame.db/app-db
![Page 13: Event streams all the way down](https://reader033.vdocuments.mx/reader033/viewer/2022052514/589e21fe1a28ab605b8b6c57/html5/thumbnails/13.jpg)
"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](https://reader033.vdocuments.mx/reader033/viewer/2022052514/589e21fe1a28ab605b8b6c57/html5/thumbnails/14.jpg)
but Clojure data is immutable?
![Page 15: Event streams all the way down](https://reader033.vdocuments.mx/reader033/viewer/2022052514/589e21fe1a28ab605b8b6c57/html5/thumbnails/15.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052514/589e21fe1a28ab605b8b6c57/html5/thumbnails/16.jpg)
@re-frame.db/app-db
![Page 17: Event streams all the way down](https://reader033.vdocuments.mx/reader033/viewer/2022052514/589e21fe1a28ab605b8b6c57/html5/thumbnails/17.jpg)
So let’s swap!
![Page 18: Event streams all the way down](https://reader033.vdocuments.mx/reader033/viewer/2022052514/589e21fe1a28ab605b8b6c57/html5/thumbnails/18.jpg)
(swap! re-frame.db/app-db assoc :server-add-status :requested)
![Page 19: Event streams all the way down](https://reader033.vdocuments.mx/reader033/viewer/2022052514/589e21fe1a28ab605b8b6c57/html5/thumbnails/19.jpg)
(swap! re-frame.db/app-db assoc :server-add-status :success)
![Page 20: Event streams all the way down](https://reader033.vdocuments.mx/reader033/viewer/2022052514/589e21fe1a28ab605b8b6c57/html5/thumbnails/20.jpg)
html > events > event handlers > app-db > subscriptions > html
![Page 21: Event streams all the way down](https://reader033.vdocuments.mx/reader033/viewer/2022052514/589e21fe1a28ab605b8b6c57/html5/thumbnails/21.jpg)
One way data bind
![Page 22: Event streams all the way down](https://reader033.vdocuments.mx/reader033/viewer/2022052514/589e21fe1a28ab605b8b6c57/html5/thumbnails/22.jpg)
The view is a React component written as a function
![Page 23: Event streams all the way down](https://reader033.vdocuments.mx/reader033/viewer/2022052514/589e21fe1a28ab605b8b6c57/html5/thumbnails/23.jpg)
And they nest
![Page 24: Event streams all the way down](https://reader033.vdocuments.mx/reader033/viewer/2022052514/589e21fe1a28ab605b8b6c57/html5/thumbnails/24.jpg)
Subscriptions are a form of indirection
![Page 25: Event streams all the way down](https://reader033.vdocuments.mx/reader033/viewer/2022052514/589e21fe1a28ab605b8b6c57/html5/thumbnails/25.jpg)
Could transform data to aid view logic
![Page 26: Event streams all the way down](https://reader033.vdocuments.mx/reader033/viewer/2022052514/589e21fe1a28ab605b8b6c57/html5/thumbnails/26.jpg)
And that’s half of the client flow
![Page 27: Event streams all the way down](https://reader033.vdocuments.mx/reader033/viewer/2022052514/589e21fe1a28ab605b8b6c57/html5/thumbnails/27.jpg)
views > events > event handlers > app-db > subscriptions > views
![Page 28: Event streams all the way down](https://reader033.vdocuments.mx/reader033/viewer/2022052514/589e21fe1a28ab605b8b6c57/html5/thumbnails/28.jpg)
Downward event flow
![Page 29: Event streams all the way down](https://reader033.vdocuments.mx/reader033/viewer/2022052514/589e21fe1a28ab605b8b6c57/html5/thumbnails/29.jpg)
Back to the view…
![Page 30: Event streams all the way down](https://reader033.vdocuments.mx/reader033/viewer/2022052514/589e21fe1a28ab605b8b6c57/html5/thumbnails/30.jpg)
And the event handler is a function that implicitly replaces app-db
![Page 31: Event streams all the way down](https://reader033.vdocuments.mx/reader033/viewer/2022052514/589e21fe1a28ab605b8b6c57/html5/thumbnails/31.jpg)
views > events > event handlers > app-db > subscriptions > views
![Page 32: Event streams all the way down](https://reader033.vdocuments.mx/reader033/viewer/2022052514/589e21fe1a28ab605b8b6c57/html5/thumbnails/32.jpg)
@re-frame.db/app-db
![Page 33: Event streams all the way down](https://reader033.vdocuments.mx/reader033/viewer/2022052514/589e21fe1a28ab605b8b6c57/html5/thumbnails/33.jpg)
And back to the server...
![Page 34: Event streams all the way down](https://reader033.vdocuments.mx/reader033/viewer/2022052514/589e21fe1a28ab605b8b6c57/html5/thumbnails/34.jpg)
Datomic events at in the DB
![Page 35: Event streams all the way down](https://reader033.vdocuments.mx/reader033/viewer/2022052514/589e21fe1a28ab605b8b6c57/html5/thumbnails/35.jpg)
Records data
![Page 36: Event streams all the way down](https://reader033.vdocuments.mx/reader033/viewer/2022052514/589e21fe1a28ab605b8b6c57/html5/thumbnails/36.jpg)
As facts
![Page 37: Event streams all the way down](https://reader033.vdocuments.mx/reader033/viewer/2022052514/589e21fe1a28ab605b8b6c57/html5/thumbnails/37.jpg)
And replaces facts transactionally
![Page 38: Event streams all the way down](https://reader033.vdocuments.mx/reader033/viewer/2022052514/589e21fe1a28ab605b8b6c57/html5/thumbnails/38.jpg)
Time based queries are simpler
![Page 39: Event streams all the way down](https://reader033.vdocuments.mx/reader033/viewer/2022052514/589e21fe1a28ab605b8b6c57/html5/thumbnails/39.jpg)
Let’s travel time…
![Page 40: Event streams all the way down](https://reader033.vdocuments.mx/reader033/viewer/2022052514/589e21fe1a28ab605b8b6c57/html5/thumbnails/40.jpg)
And a quick sniff around the whole solution
![Page 41: Event streams all the way down](https://reader033.vdocuments.mx/reader033/viewer/2022052514/589e21fe1a28ab605b8b6c57/html5/thumbnails/41.jpg)
Tech stack review
![Page 42: Event streams all the way down](https://reader033.vdocuments.mx/reader033/viewer/2022052514/589e21fe1a28ab605b8b6c57/html5/thumbnails/42.jpg)
re-frame reagent React.js
Ring Datomic
![Page 43: Event streams all the way down](https://reader033.vdocuments.mx/reader033/viewer/2022052514/589e21fe1a28ab605b8b6c57/html5/thumbnails/43.jpg)
What I like immutability fast simple live repl + figwheel React
![Page 44: Event streams all the way down](https://reader033.vdocuments.mx/reader033/viewer/2022052514/589e21fe1a28ab605b8b6c57/html5/thumbnails/44.jpg)
What I like immutability fast simple live repl + figwheel React
![Page 45: Event streams all the way down](https://reader033.vdocuments.mx/reader033/viewer/2022052514/589e21fe1a28ab605b8b6c57/html5/thumbnails/45.jpg)
What I like immutability fast simple live repl + figwheel React
![Page 46: Event streams all the way down](https://reader033.vdocuments.mx/reader033/viewer/2022052514/589e21fe1a28ab605b8b6c57/html5/thumbnails/46.jpg)
What I like immutability fast simple live repl + figwheel React
![Page 47: Event streams all the way down](https://reader033.vdocuments.mx/reader033/viewer/2022052514/589e21fe1a28ab605b8b6c57/html5/thumbnails/47.jpg)
What I like immutability fast simple live repl + figwheel React
![Page 48: Event streams all the way down](https://reader033.vdocuments.mx/reader033/viewer/2022052514/589e21fe1a28ab605b8b6c57/html5/thumbnails/48.jpg)
What I like immutability fast simple live repl + figwheel React
![Page 49: Event streams all the way down](https://reader033.vdocuments.mx/reader033/viewer/2022052514/589e21fe1a28ab605b8b6c57/html5/thumbnails/49.jpg)
What I like immutability fast simple live repl + figwheel React
![Page 50: Event streams all the way down](https://reader033.vdocuments.mx/reader033/viewer/2022052514/589e21fe1a28ab605b8b6c57/html5/thumbnails/50.jpg)
// 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](https://reader033.vdocuments.mx/reader033/viewer/2022052514/589e21fe1a28ab605b8b6c57/html5/thumbnails/51.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052514/589e21fe1a28ab605b8b6c57/html5/thumbnails/52.jpg)
Questions?