reactive programming in clojurescript using react.js wrappers · 2020. 8. 18. · clojurescript...
TRANSCRIPT
![Page 1: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/1.jpg)
Reactive programming in ClojureScript using React.js wrappers
Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016
![Page 2: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/2.jpg)
State of the web development
More and more complex apps
Solving elaborate problems
Myriad of web browsers and devices
Performance and resources
![Page 3: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/3.jpg)
Plain vanilla JavaScript
![Page 4: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/4.jpg)
JQuery
![Page 5: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/5.jpg)
MVC
![Page 6: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/6.jpg)
React.js
![Page 7: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/7.jpg)
What does it mean reactive?
Erik Meijer - What does it mean to be Reactive?
Lots of definitions
Difficult to agree
![Page 8: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/8.jpg)
Components reacting to events and changing state
![Page 9: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/9.jpg)
Apples
Oranges
Grapes
![Page 10: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/10.jpg)
Add pineapple
But how exactly?
![Page 11: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/11.jpg)
Solution #1
Insert a new list item
Find the right place
![Page 12: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/12.jpg)
Solution #2
Throw out the entire list and rebuild it
Rendering large scale amounts of DOM is slow
![Page 13: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/13.jpg)
Most JS frameworks help to mitigate problem #1
Make DOM easier to navigate
Tie element to a controller keeping it up to date
![Page 14: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/14.jpg)
React solves problem #2
![Page 15: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/15.jpg)
Virtual DOM (two copies)
Original
Updated
![Page 16: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/16.jpg)
Compare new virtual DOM with previous
Render only bits that have changed
![Page 17: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/17.jpg)
Pretending to re-render entire page is fast
Easier to reason about
![Page 18: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/18.jpg)
V in MVC
Interfaces with changing data
Can combine with frameworks e.g. AngularJS
![Page 19: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/19.jpg)
Flux architecture
Once-directional data flow
Action → Dispatcher → Store → View
![Page 20: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/20.jpg)
JavaScript sucks
![Page 21: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/21.jpg)
this
Verbose syntax
Confusing, inconsistent automatic operator conversions
NaN
Global variables by default
etc.
![Page 22: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/22.jpg)
We need JavaScript
JS is (almost) everywhere
Runtime is improving
Web Sockets
WebRTC
Canvas
Push notifications
![Page 23: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/23.jpg)
Build “better” language on top of JS
![Page 24: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/24.jpg)
1 + 2 // simple, clear
(+ 1 2) ; OMG! So confusing
Clearly programmers aren't that smart as some think
![Page 25: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/25.jpg)
ClojureScript
Modern LISP
Immutable data structures
State vs Identity
REPL
Transducers
core.async
And much much more
![Page 26: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/26.jpg)
ClojureScript + React.js
![Page 27: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/27.jpg)
Pure React.js is not idiomatic in ClojureScript
Leverage immutable data structures
![Page 28: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/28.jpg)
ClojureScript React.js wrappers on steroids
![Page 29: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/29.jpg)
Rum
Not a framework but a library
![Page 30: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/30.jpg)
Om, Reagent, Quiescent have built-in component behaviour model
![Page 31: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/31.jpg)
Rum
Two-level API
![Page 32: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/32.jpg)
Rum
Define your component and render it
![Page 33: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/33.jpg)
(rum/defc name doc-string? [params*] render-body+)
![Page 34: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/34.jpg)
(rum/defc h1 [text] [:h1 text])
(rum/mount (h1 "important") js/document.body)
![Page 35: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/35.jpg)
Simple component not reactive
Agnostic of data storage and behaviour model
![Page 36: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/36.jpg)
Use mixins to control component's behaviour
![Page 37: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/37.jpg)
Pre-built component mixins
Mimic behaviour of other wrappers
![Page 38: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/38.jpg)
(rum/defc name doc-string? [< mixins+]? [params*] render-body+)
![Page 39: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/39.jpg)
Static mixin
Checks if args have changed
Avoids re-rendering if they are the same
![Page 40: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/40.jpg)
(rum/defc h1 < rum/static [text][:h1 text])
![Page 41: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/41.jpg)
(rum/mount (h1 "important text") body)
(rum/mount (h1 "important text") body) ;; render won’t be called
(rum/mount (h1 "important") body) ;; this will cause re-rendering
![Page 42: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/42.jpg)
Local Mixin
Rum local
Per-component local state
![Page 43: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/43.jpg)
![Page 44: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/44.jpg)
![Page 45: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/45.jpg)
![Page 46: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/46.jpg)
(rum/defcs make-service < (rum/local "") [state service](let [local (:rum/local state)]
[:p {:class @local
:on-click (fn [_] (swap! local toggle-class service))}
(:name service)
[:b (str " £" (:price service))]]))
![Page 47: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/47.jpg)
(defn toggle-class [current-class service] (let [price (:price service)]
(if (= current-class "active")
(do (swap! order-form-total - price)
"")
(do (swap! order-form-total + price)
"active"))))
![Page 48: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/48.jpg)
Reactive mixin
Creates “reactive” component
Tracks references to data
Auto-updates when value stored changes
Reactive mixin is like Reagent wrapper
![Page 49: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/49.jpg)
![Page 50: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/50.jpg)
(def order-form-total (atom 0))
(rum/defc total-sum < rum/reactive [] [:p {:id "total"} (str "Total: £" (rum/react order-form-total))])
![Page 51: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/51.jpg)
(defn toggle-class [current-class service] (let [price (:price service)]
(if (= current-class "active")
(do (swap! order-form-total - price)
"")
(do (swap! order-form-total + price)
"active"))))
![Page 52: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/52.jpg)
Cursored mixin
Interface to sub-trees inside an atom
Like an Om wrapper
![Page 53: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/53.jpg)
(def state (atom {:app { :settings {:header {:colour "#cc3333" }}}}))
![Page 54: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/54.jpg)
(rum/defc label < rum/cursored [colour text] [:label {:style {:colour @colour}} text])
![Page 55: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/55.jpg)
(rum/defc body < rum/cursored [state] [:div
(label (rum/cursor state [:app :settings :headers :colour]) "First label" )])
![Page 56: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/56.jpg)
(swap! state-cursor assoc-in [:app :settings :header :colour] "#cc56bb")
![Page 57: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/57.jpg)
One global state
Atomic swaps
Always consistent
Easy to implement undo – reset to previous state
Serialize app state and send it over the wire
![Page 58: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/58.jpg)
Custom mixin
Use React.js life-cycle functions
Will mount
Did mount
Should update
Will unmount
![Page 59: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/59.jpg)
Scrolling mixin
![Page 60: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/60.jpg)
(defn scroll-view [height] {:did-mount (fn [state]
(if-not (::scrolled state)
(do
(set-scroll-top! height)
(assoc state ::scrolled true))
state))
:transfer-state (fn [old new]
(assoc new ::scrolled (::scrolled old)
::with-scroll-view true))})
![Page 61: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/61.jpg)
Build new mixins easily
![Page 62: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/62.jpg)
Mix and match different mixins
![Page 63: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/63.jpg)
The curious case of Om
![Page 64: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/64.jpg)
The good, the bad and the future
![Page 65: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/65.jpg)
Root UI is given root cursor
Passes sub-trees of cursors to its sub-components
![Page 66: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/66.jpg)
{:list {:title "My list:" :colour :brown My list:
:items
{:item_1 {:text "text1" :colour :blue} - text1
:item_2 {:text "text2" :colour :green} - text2
:item_3 {:text "text3" :colour :red}}}} - text3
![Page 67: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/67.jpg)
Case #1
UI cross-cutting concerns?
![Page 68: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/68.jpg)
Dashboard with a list that can be expanded, shrank
![Page 69: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/69.jpg)
Save the list presentation options to general settings?
![Page 70: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/70.jpg)
Cursor-oriented architecture requires you to structure app state as a tree (matching UI)
![Page 71: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/71.jpg)
Quite often your data are not a tree
![Page 72: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/72.jpg)
Changing item's text is easy
![Page 73: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/73.jpg)
Case #2
Deleting an item should be easy too, right?
![Page 74: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/74.jpg)
Does delete button/option belong to an item or a list?
![Page 75: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/75.jpg)
Deleting an item requires list manipulation
![Page 76: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/76.jpg)
Rum is flexible use it if you can
![Page 77: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/77.jpg)
Enter Om.next
New version of Om
![Page 78: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/78.jpg)
Actually a reboot
![Page 79: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/79.jpg)
Experience of the last few years
Inspired by:
Facebook's Relay
Netflix's Falcor
Cognitect's Datomic
![Page 80: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/80.jpg)
Display date of past purchases of certain item
![Page 81: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/81.jpg)
{:current-user
{:purchases
[{:id 146
:product-name "organic rice"
:date #inst "2015-12-17T17:13:59.167-00:00"
:previous {:id 140
:product-name "organic rice"
:date #inst "2015-12-14T17:05:58.144-00:00"
:previous {:id 136
:product-name "organic rice"
:date #inst "2015-12-10T17:05:13.512-00:00"
:previous ; and so on... }}}
{:id 145
:product-name "soy milk"
:date #inst "2015-12-17T17:09:25.961-00:00"
:previous {:id 141
:product-name "soy milk"
:date #inst "2015-12-15T17:05:36.797-00:00"
:previous {:id 128
:product-name "soy milk"
:date #inst "2015-12-07T17:04:51.124-00:00"
:previous ; and so on... }}}]}}
![Page 82: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/82.jpg)
{:current-user {:recent-purchases [[:purchase-id 146]
[:purchase-id 145]]}
:purchased-items {146 {:id 146
:product-name "organic rice"
:date #inst "2015-12-17T17:13:59.167-00:00"
:previous [:purchase-id 144]}
145 {:id 145
:product-name "soy milk"
:date #inst "2015-12-17T17:09:25.961-00:00"
:previous [:purchase-id 143]}
144 {:id 144
:product-name "organic rice"
:date #inst "2015-12-17T17:05:58.144-00:00"
:previous [:purchase-id 141]}
143 {:id 143
:product-name "soy milk"
:date #inst "2015-12-17T17:05:36.797-00:00"
:previous [:purchase-id 138]}
;; and so on... }}
![Page 83: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/83.jpg)
In Om.next components define a query to data they need
![Page 84: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/84.jpg)
Cursor navigates a tree, query can navigate a graph
![Page 85: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/85.jpg)
[{:current-user [{:recent-purchases [{:previous [:date]}]}]}]
![Page 86: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/86.jpg)
{:current-user {:recent-purchases
[{:previous {:date #inst "2015-12-17T17:05:58.144-00:00"}}
{:previous {:date #inst "2015-12-17T17:05:36.797-00:00"}}]}}
![Page 87: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/87.jpg)
{:current-user {:recent-purchases [[:purchase-id 146]
[:purchase-id 145]]}
:purchased-items {146 {:id 146
:product-name "organic rice"
:date #inst "2015-12-17T17:13:59.167-00:00"
:previous [:purchase-id 144]}
145 {:id 145
:product-name "soy milk"
:date #inst "2015-12-17T17:09:25.961-00:00"
:previous [:purchase-id 143]}
144 {:id 144
:product-name "organic rice"
:date #inst "2015-12-17T17:05:58.144-00:00"
:previous [:purchase-id 141]}
143 {:id 143
:product-name "soy milk"
:date #inst "2015-12-17T17:05:36.797-00:00"
:previous [:purchase-id 138]}
;; and so on... }}
![Page 88: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/88.jpg)
{:current-user {:recent-purchases
[{:previous {:date #inst "2015-12-17T17:05:58.144-00:00"}}
{:previous {:date #inst "2015-12-17T17:05:36.797-00:00"}}]}}
![Page 89: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/89.jpg)
Om.next normalizes data* you have into one you expect
* with a little help from you
![Page 90: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/90.jpg)
{:list/one [{:product-name "soy milk" :price 10} {:product-name "eggs" :price 22}
{:product-name "juice" :price 26}]
:list/two [{:product-name "eggs" :price 22 :discount 7}
{:product-name "apples" :price 8}
{:product-name "cereals" :price 37 :discount 15}]}
![Page 91: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/91.jpg)
(defui Product static om/Ident
(ident [this {:keys [product-name]}]
[:product/by-name product-name])
static om/IQuery
(query [this]
'[:name :price :discount])
Object
(render [this]
;; ... elided ...))
![Page 92: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/92.jpg)
(d{:list/one [[:product/by-name "soy milk"]
[:product/by-name "eggs"]
[:product/by-name "juice"]],
:list/two
[[:product/by-name "eggs"]
[:product/by-name "apples"]
[:product/by-name "cereals"]],
:product/by-name
{"soy milk" {:name "soy milk", :price 10},
"eggs" {:name "eggs", :price 22, :discount 7},
"juice" {:name "juice", :price 26}, "apples" {:name "apples", :price 8},
"cereals" {:name "cereals", :price 37, :discount 15}}
![Page 93: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/93.jpg)
Store data the way you want and let Om.next convert data to match your UI
![Page 94: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/94.jpg)
Om.next
Currently in alpha stage
Production ready in a couple of months
![Page 95: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/95.jpg)
Datascript
Because good things come in pairs
Nikita Prokopov creator of Rum and Datascript
![Page 96: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/96.jpg)
Immutable in-memory database
Datalog as a query engine
![Page 97: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/97.jpg)
Central, uniform approach to manage all application state
![Page 98: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/98.jpg)
Schemaless DB < Datascript < Relational schema
Data already normalized
![Page 99: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/99.jpg)
{:db/id #db/id[:db.part/db]
:db/ident :product/name
:db/valueType :db.type/string
:db/cardinality :db.cardinality/one
:db/unique :db.unique/identity
:db/doc "Product's name"}
{:db/id #db/id[:db.part/db]
:db/ident :product/price
:db/valueType :db.type/number
:db/cardinality :db.cardinality/one
:db/doc "Product's price"}
![Page 100: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/100.jpg)
Datalog query
[:find ?name ?price ?discount :where [?p :product/name ?name] [?p :product/price ?price] [?p :product/discount ?discount]]
![Page 101: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/101.jpg)
(defui Product static om/Ident
(ident [this {:keys [product-name]}]
[:product/by-name product-name])
static om/IQuery
(query [this]
'[:name :price :discount])
Object
(render [this]
;; ... elided ...))
![Page 102: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/102.jpg)
Find specific item
[:find ?name ?price ?discount :in $ ?name :where [?p :product/name ?name] [?p :product/price ?price] [?p :product/discount ?discount]]
![Page 103: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/103.jpg)
(rum/defc product-item [db name]
(let [item (d/q '[:find ?name ?price ?discount :in $ ?name :where [?p :product/name ?name] [?p :product/price ?price] [?p :product/discount ?discount]] db name)]
(when item
[:p name "$" (:product/price item) "discount $" (:product/discount item)])))
![Page 104: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/104.jpg)
Write components that depend on return values of queries
![Page 105: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/105.jpg)
Database as a value
![Page 106: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/106.jpg)
Summary
React.js is interesting – give it a go
ClojureScript is interesting too
React.js + ClojureScript = awesome
Interesting wrappers for React.js in ClojureScript with some cool technologies
![Page 107: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/107.jpg)
Questions???
![Page 108: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/108.jpg)
Tweet me: @ryujinkony
Konrad Szydlogithub
retailic.com
![Page 109: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/109.jpg)
Retailic
Retailic helps retail to draw business conclusions from consumer behaviour and develop corresponding software solutions.
![Page 110: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/110.jpg)
Resources
https://www.youtube.com/watch?v=sTSQlYX5DU0 Eric Meijer
https://medium.com/@carloM/reactive-programming-with-kefir-js-and-react-a0e8bb3af636#.td9mdlfzr Reactive programming with react.js
http://blog.ractivejs.org/posts/whats-the-difference-between-react-and-ractive/ React.js vs Ractive
http://www.funnyant.com/reactjs-what-is-it/
![Page 111: Reactive programming in ClojureScript using React.js wrappers · 2020. 8. 18. · ClojureScript using React.js wrappers Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016. State](https://reader034.vdocuments.net/reader034/viewer/2022051815/603c9ef2fc33b2121a5bb031/html5/thumbnails/111.jpg)
Resources
https://www.destroyallsoftware.com/talks/wat
https://github.com/active-group/reacl
https://github.com/reagent-project/reagent
https://github.com/tonsky/rum
https://github.com/tonsky/datascript
https://github.com/omcljs/om/wiki