clojure_dart_tea_example
ClojureDart Flutter project with demonstration of:
- Graphql usage;
- managing business logic and state with TEA*-like MVU architecture.
- widget and nest macro from ClojureDart/alpha.
* The Elm architecture
Warnings!
This approach is not ready for production, just the idea demo.
MVU TEA-like architecture
You may read about TEA approaches in other libraries (dart, kotlin).
Here I will provide my vision to the TEA.
There are 4 components:
- Model - application state.
- Effects - side effect functions.
- Message - events that happens, like user click or effect result
- Update - function that takes old model and message, and return new model with list of effects.
To allow all this to work we have a dispatch function, that takes messages from all the sources.
MVU Components example:
- Model - atom with map:
{:selected-country-code nil
:country nil
:continent nil
:expanded nil}
- Effects - functions with the signature like
(defn some-effect [dispatch-fn] ...):
(defn- effect-load-countries [dispatch!]
(dispatch! :loaded-countries (await (api/get-countries))))
;; effect with additional arg (code)
(defn- effect-load-continent [dispatch! code]
(dispatch! :loaded-continent (await (api/get-continent code))))
;; effect as a lambda that ignores args
#(log "country selected")
- Messages - Keywords:
:user-openes-app
:loaded-continent
:loaded-countries
...
- Update - function that takes state-map, message and message-data and returns vector with new state and effects:
(defn- tea-update [state message data]
(case message
:user-openes-app [state [effect-load-countries effect-select-default-country]]
;; changing state and passing two lambda-effects
:user-choose-country [(assoc state :selected-country-code data :continent nil :expanded nil)
[#(effect-load-country % data)
#(log "country selected")]]
;; effects may vary based on condifions
:user-click-expand-continent [(assoc state :expanded (not (:expanded state)))
(if (:continent state) [] [#(effect-load-continent % data)])]
;; effects could be omited
:loaded-countries [(assoc state :countries data)]
;; default state
[state [#(log "don't know how to process the message")]]))
For all this to work you don't need a framework, just 1 dispatch function:
(defn- ^:async dispatch! [tea-update state-atom message data]
(let [[new-state effects] (tea-update @state-atom message data)
dispatch-for-effet-fn (partial dispatch! state-atom)]
(reset! state-atom new-state) ;; state modification
(doseq [e effects] (await (e dispatch-for-effet-fn)))))
Resources
- ClojureDart
- ClojureDart differences from clojure.
- The dart project that I used as a base for graphql and ui at the begining.
30 Oct 6, 2022
60 Nov 12, 2022
2 Apr 9, 2022
1.5k Dec 31, 2022
25 Dec 15, 2022
8 Jul 21, 2022
324 Dec 25, 2022
2 Sep 22, 2022
4 Aug 4, 2022
10 Dec 16, 2022