JavaFX GUI architecture with Clojure core.async
3 likes2,472 views
The document discusses the challenges and architecture of GUI development using JavaFX and Clojure's core.async, emphasizing the need for asynchronous processing to maintain a responsive user interface. It outlines various patterns such as MVC and MVVM, explaining the advantages of a clean separation of concerns, and introduces a prototype framework for handling asynchronous UI operations. The author argues for a reactive representation of system state to better manage user interactions and event handling in GUIs.
![events
state
1) is a representation of system state
A user interface ...
{:name {:value "Foo"
:message nil}
:addresses [{:name "Bar"
:street "Barstr"
:city "Berlin"}
{:name "Baz"
:street "Downstr"
:city "Bonn"}]
:selected [1]}](https://image.slidesharecdn.com/javafxwithclojurecore-150123070354-conversion-gate02/85/JavaFX-GUI-architecture-with-Clojure-core-async-15-320.jpg)
![events
state
1) is a representation of system state
2) allows us to transform system state
A user interface ...
{:name {:value "Foo"
:message nil}
:addresses [{:name "Bar"
:street "Barstr"
:city "Berlin"}
{:name "Baz"
:street "Downstr"
:city "Bonn"}]
:selected [1]}
2)
1)](https://image.slidesharecdn.com/javafxwithclojurecore-150123070354-conversion-gate02/85/JavaFX-GUI-architecture-with-Clojure-core-async-16-320.jpg)
![A user interface ...
… consists of two functions ...
which – for technical reasons –
need to be executed asynchronously.
[state] → ⊥ ;; update UI (side effects!)
[state event] → state ;; presentation logic
( )](https://image.slidesharecdn.com/javafxwithclojurecore-150123070354-conversion-gate02/85/JavaFX-GUI-architecture-with-Clojure-core-async-17-320.jpg)
![Meet core.async: channels go blocks+
Based on Tony Hoare's CSP* approach (1978).
Communicating Sequential Processes
*
(require '[clojure.core.async :refer
[put! >! <! go chan go-loop]])
(def c1 (chan))
(go-loop [xs []]
(let [x (<! c1)]
(println "Got" x ", xs so far:" xs)
(recur (conj xs x))))
(put! c1 "foo")
;; outputs: Got bar , xs so far: [foo]
a blocking read
make a new channelcreates a
lightweight
process
async write
readwrite](https://image.slidesharecdn.com/javafxwithclojurecore-150123070354-conversion-gate02/85/JavaFX-GUI-architecture-with-Clojure-core-async-21-320.jpg)
![Expensive service call: it's your choice
(def events (chan))
(go-loop []
(let [evt (<! events)]
(case ((juxt :type :value) evt)
[:action :invoke-blocking]
(case (-> (<! (let [ch (chan)]
(future (put! ch (expensive-service-call)))
ch))
:state)
:ok (println "(sync) OK")
:nok (println "(sync) Error"))
[:action :invoke-non-blocking]
(future (put! events
{:type :call
:value (-> (expensive-service-call)
:state)}))
[:call :ok] (println "(async) OK")
[:call :nok] (println "(async) Error")))
(recur))
blocking
non-
blocking
ad-hoc new channel
use views events channel](https://image.slidesharecdn.com/javafxwithclojurecore-150123070354-conversion-gate02/85/JavaFX-GUI-architecture-with-Clojure-core-async-24-320.jpg)
![(spec) - View specification with data
(defn item-editor-spec
[data]
(-> (v/make-view "item-editor"
(window "Item Editor"
:modality :window
:content
(panel "Content" :lygeneral "wrap 2, fill"
:lycolumns "[|100,grow]"
:components
[(label "Text")
(textfield "text" :lyhint "growx")
(panel "Actions" :lygeneral "ins 0"
:lyhint "span, right"
:components [(button "OK")
(button "Cancel")])])))
(assoc :mapping (v/make-mapping :text ["text" :text])
:validation-rule-set (e/rule-set :text (c/min-length 1))
:data data)))
attach more
configuration data
a map with initial user data
specify contents](https://image.slidesharecdn.com/javafxwithclojurecore-150123070354-conversion-gate02/85/JavaFX-GUI-architecture-with-Clojure-core-async-29-320.jpg)
![(handler) - Event handler of a view
(defn item-editor-handler
[view event]
(go (case ((juxt :source :type) event)
["OK" :action]
(assoc view :terminated true)
["Cancel" :action]
(assoc view
:terminated true
:cancelled true)
view)))](https://image.slidesharecdn.com/javafxwithclojurecore-150123070354-conversion-gate02/85/JavaFX-GUI-architecture-with-Clojure-core-async-30-320.jpg)
![Using a view
(let [editor-view (<! (v/run-view
#'item-editor-spec
#'item-editor-handler
{:text (nth items index)}))]
. . .)
(defn item-editor-spec
[data]
(-> (v/make-view "item-editor"
(window "Item Editor"
:modality :window
:content
(panel "Content" :lygeneral "wrap 2, fill"
:lycolumns "[|100,grow]"
:components
[(label "Text")
(textfield "text":lyhint "growx")
(panel "Actions" :lygeneral "ins 0"
:lyhint "span, right"
:components [(button "OK")
(button "Cancel")])])))
(assoc :mapping (v/make-mapping :text ["text" :text])
:validation-rule-set (e/rule-set :text (c/min-length 1))
:data data)))
(defn item-editor-handler
[view event]
(go (case ((juxt :source :type) event)
["OK" :action]
(assoc view :terminated true)
["Cancel" :action]
(assoc view
:terminated true
:cancelled true)
view)))
a map with initial user data
spec handler
calling view process waits for callee](https://image.slidesharecdn.com/javafxwithclojurecore-150123070354-conversion-gate02/85/JavaFX-GUI-architecture-with-Clojure-core-async-31-320.jpg)
JavaFX GUI architecture with Clojure core.async
- 1. JavaFX GUI architecture with Clojure core.async @friemens
- 4. GUI implementation causes significant LOC numbers
- 5. GUIs require frequent changes
- 6. Automatic GUI testing is expensive
- 7. GUI code needs a suitable architecture
- 9. Model Controller View MVC makes you think of mutable things
- 10. MVC Variations MVP a.k.a Passive View View Model Presenter View Model View Model MVVM a.k.a PresentationModel
- 11. A real-world OO GUI architecture ControllerViewModel ViewImpl UI Toolkit Impl UIView Other parts of the system two-way databinding updates action events only data!
- 12. Benefits so far ControllerViewModel ViewImpl UI Toolkit Impl UIView Other parts of the system two-way databinding updates action events only data! Dumb Views => generated code Dumb ViewModels => generated code Controllers are unit-testable
- 13. Remaining annoyances ControllerViewModel ViewImpl UI Toolkit Impl UIView Other parts of the system two-way databinding updates action events only data! Unpredicatble execution paths Coordination with long runnning code Merging of responses into ViewModels Window modality is based on a hack
- 14. Think again... what is a user interface?
- 15. events state 1) is a representation of system state A user interface ... {:name {:value "Foo" :message nil} :addresses [{:name "Bar" :street "Barstr" :city "Berlin"} {:name "Baz" :street "Downstr" :city "Bonn"}] :selected [1]}
- 16. events state 1) is a representation of system state 2) allows us to transform system state A user interface ... {:name {:value "Foo" :message nil} :addresses [{:name "Bar" :street "Barstr" :city "Berlin"} {:name "Baz" :street "Downstr" :city "Bonn"}] :selected [1]} 2) 1)
- 17. A user interface ... … consists of two functions ... which – for technical reasons – need to be executed asynchronously. [state] → ⊥ ;; update UI (side effects!) [state event] → state ;; presentation logic ( )
- 19. GUI can become unresponsive Java FX application thread Event loop Your code Service call What happens if a service call takes seconds?
- 20. Keep GUI responsive (callback based solution) Service call Your code 1 Your code 2 Use other thread Java FX application thread Event loop Some worker thread Delegate execution Schedule to event loop
- 21. Meet core.async: channels go blocks+ Based on Tony Hoare's CSP* approach (1978). Communicating Sequential Processes * (require '[clojure.core.async :refer [put! >! <! go chan go-loop]]) (def c1 (chan)) (go-loop [xs []] (let [x (<! c1)] (println "Got" x ", xs so far:" xs) (recur (conj xs x)))) (put! c1 "foo") ;; outputs: Got bar , xs so far: [foo] a blocking read make a new channelcreates a lightweight process async write readwrite
- 22. The magic of go sequential code in go block read write macro expansion state machine code snippets
- 23. Keep GUI responsive (CSP based solution) core.async process core.async process Java FX application thread Your code Update UI <! >! <! put! go-loop one per viewexactly one events state
- 24. Expensive service call: it's your choice (def events (chan)) (go-loop [] (let [evt (<! events)] (case ((juxt :type :value) evt) [:action :invoke-blocking] (case (-> (<! (let [ch (chan)] (future (put! ch (expensive-service-call))) ch)) :state) :ok (println "(sync) OK") :nok (println "(sync) Error")) [:action :invoke-non-blocking] (future (put! events {:type :call :value (-> (expensive-service-call) :state)})) [:call :ok] (println "(async) OK") [:call :nok] (println "(async) Error"))) (recur)) blocking non- blocking ad-hoc new channel use views events channel
- 25. Properties of CSP based solution „Blocking read“ expresses modality A views events channel takes ALL async results ✔ long-running calculations ✔ service calls ✔ results of other views Each view is an async process Strong separation of concerns
- 27. JavaFX + Tk-process + many view-processes JavaFX Many view processes One toolkit oriented process (run-view) (run-tk) Event handler (spec) (handler) Each view has one events channel
- 28. Data representing view state :id ;; identifier :spec ;; data describing visual components :vc ;; instantiated JavaFX objects :data ;; user data :mapping ;; mapping user data <-> VCs :events ;; core.async channel :setter-fns ;; map of update functions :validation-rule-set ;; validation rules :validation-results ;; current validation messages :terminated ;; window can be closed :cancelled ;; abandon user data
- 29. (spec) - View specification with data (defn item-editor-spec [data] (-> (v/make-view "item-editor" (window "Item Editor" :modality :window :content (panel "Content" :lygeneral "wrap 2, fill" :lycolumns "[|100,grow]" :components [(label "Text") (textfield "text" :lyhint "growx") (panel "Actions" :lygeneral "ins 0" :lyhint "span, right" :components [(button "OK") (button "Cancel")])]))) (assoc :mapping (v/make-mapping :text ["text" :text]) :validation-rule-set (e/rule-set :text (c/min-length 1)) :data data))) attach more configuration data a map with initial user data specify contents
- 30. (handler) - Event handler of a view (defn item-editor-handler [view event] (go (case ((juxt :source :type) event) ["OK" :action] (assoc view :terminated true) ["Cancel" :action] (assoc view :terminated true :cancelled true) view)))
- 31. Using a view (let [editor-view (<! (v/run-view #'item-editor-spec #'item-editor-handler {:text (nth items index)}))] . . .) (defn item-editor-spec [data] (-> (v/make-view "item-editor" (window "Item Editor" :modality :window :content (panel "Content" :lygeneral "wrap 2, fill" :lycolumns "[|100,grow]" :components [(label "Text") (textfield "text":lyhint "growx") (panel "Actions" :lygeneral "ins 0" :lyhint "span, right" :components [(button "OK") (button "Cancel")])]))) (assoc :mapping (v/make-mapping :text ["text" :text]) :validation-rule-set (e/rule-set :text (c/min-length 1)) :data data))) (defn item-editor-handler [view event] (go (case ((juxt :source :type) event) ["OK" :action] (assoc view :terminated true) ["Cancel" :action] (assoc view :terminated true :cancelled true) view))) a map with initial user data spec handler calling view process waits for callee
- 32. You can easily build it yourself! JavaFX API update build Toolkit Impl View process fns Toolkit process fns core.clj tk.clj builder.clj binding.clj bind < 400 LOC
- 33. Wrap up
- 34. MVC leads to thinking in terms of mutation UIs introduce asynchronity UI is a reactive representation of system state
- 35. Thank you for listening! Questions? @friemens www.itemis.de@itemis https://github.com/friemen/async-ui