Pedestal Notes I

from

What is Pedestal

• On the client side Pedestal is a purely functional, reactive, message-oriented framework.
• All the state is defined in two pieces: the data model and application model. On the surface each of those models is just a single Clojure map, effectively a tree.
• function is emitter: In response to certain messages it emits commands (deltas) to update the application model
• in the application level, you can define functions that change something in the behavior or in DOM in response to those deltas.
• Everything goes through this pipeline. If an event happens anywhere in the application, it appends a message to the queue and kicks off all the transforms that bubble up from data model through application model to DOM.

Data Model

• arbitrary

To define a Clojure map below:

  {:todos ["Wash dog" "Brush cat" "Address wounds"]}

Pedestal use Transform Message:

  {msg/topic [:todos], msg/type :add-item, :value "Wash dog"}
  {msg/topic [:todos], msg/type :add-item, :value "Brush cat"}
  {msg/topic [:todos], msg/type :add-item, :value "Address wounds"}

and Transformation:

;;[msg/type msg/topic transform-fn]
[:add-item [:todos] add-transform]

Code of transform fn:

  (defn add-transform [old-value msg]
      ((fnil conj []) old-value (:value msg)))

• No explict schema , but Transform functions (verbs instead of Nouns)

Application Model

• tree: Follow structure of DOM: {:main {:todos ["one" "two" "three"]}}
• Application model as a sequence of deltas
• define Application Model by Emit Functions
  • Emit functions act on changes of data model and produce deltas:

  1. Emit everything from :todos in the data model

  2. using Pedestal's default emitter function

  3. under the :main key of the application model
     [#{[:todos]} (app/default-emitter [:main])]

         [:node-create []             :map]
         [:node-create [:main]        :map]
         [:node-create [:main :todos] :map]
         [:value       [:main :todos] nil ["one" "two" "three"]]
     

DOM

The rendering of the To-Do app could be hooked up to the deltas as follows:

  Root node created -> Render the basic application structure
  Root -> :main node created -> Render the main screen
  Root -> :main -> :todos node created -> Render the (initially empty) To-Do list
  Root -> :main -> :todos node value changed -> Render the new set of To-Dos
  Root -> :main -> :todos node destroyed -> Remove the To-Do list from the DOM
  Root -> :main node destroyed -> Remove the main screen from the DOM
  Root node destroyed -> Remove the application from the DOM

Hooking this up is just a matter of telling Pedestal which functions should be called from which deltas in the application model:

[[:node-create    []             render-app]
 [:node-create    [:main]        render-main-page]
 [:node-create    [:main :todos] render-todo-list]
 [:value          [:main :todos] render-todo-items]
 [:node-desroy    [:main :todos] remove-todo-list]
 [:node-destroy   [:main]        remove-main-page]
 [:node-destroy   []             remove-app]]