Gently Introducing Re-frame

Gently Introducing Re-frame

Minh Tran & David Humphreys

What is Re-frame?

Not another ...

Just patterns*

(* with some code attached)

Why?

Large-scale code exaggerates problems

Large CLJS apps

Some patterns emerge

• Cross-component chatter
  • chans everywhere
• State
  • Synchronising
  • Updating
  • Naming
• &c.
• etc.
• et cetera
• How to structure the code?

Channels, Resets & App-state

• One large app-state
• core.async
• Cursors for access (think getters & setters)
• Reactions: read-only signals

Not Enough

Better patterns (not more!)

Anatomy

(defn widget [prop1 prop2]
  (fn render [prop1 prop2]
   [:div
    (if (:a @prop1) ...)]))

Better

(defn widget [prop1 prop2]
  (let [val (reaction (:a @prop1))]
    (fn render [prop1 prop2]
      [:div
        (if @val ...)])))

But Channels

Won't work this way.

Enter Re-frame

[Reagent remains on stage]

Why Re-frame?

• One-way data-flow
• Isolate logic
• Testable
• Reasonable

Re-frame

• dispatch
• handler
• subscribe
• middleware

Dispatch

(dispatch [:go-to-page "/page-one/"])

fire & forget

Handler

(register-handler
 :go-to-page
 [middleware]
 (fn [db [action page-url]]
 ;;mutate the snapshot
 db))

pure handlers please

Subscribe

(register-sub
  :active-page
  (fn [db _]
    ;;computation on the app-state
    (reaction (:active-page @db))))

Middleware

Transform the messages

• Clean
• Validate
• Debug

Demo