Clojurescript

Why ClojureScript?

It’s Clojure!!!!!

• It’s Clojure run in JSVM
  • Share the same syntax
  • Could be cross complied and run in both client/server side
  • REPL
  • Share many excellent tools, libs & ecosystem with clojure, like lein, boot, core.async, schema etc.

• It’s also ClojureScript itself
  • Strong ecosystem
  • Tools, like figwheel …
  • Libraries, like Reagent, Om, re-frame …
  • Interop with Javascript
  • Run in different platform browser, node.js, java script engine, even mobile (iOS/Replete) …

Implement re-typerooni with Reagent/re-frame

Demo

re-typerooni

$ lein do clean, figwheel

or

$ boot serve -d target watch reload cljs-repl cljs target -d target

Reagent

Reagent is a simple ClojureScript interface to React.

(defn wpm-app []
   (let [test-words (subscribe [:test-words])
	 status (subscribe [:status])]
     [:div
      [:section#wpm-app
       [:header
	[:h1 "Words Per Minute"]]
       [:section#main
	[:div
	 [display-panel @test-words]
	 [control-panel @status]]
	(when (= @status :finished)
	  [stats-panel])]
       [:footer]]]))

;; render the page
(reagent/render [wpm-app] (.getElementById js/document "app"))

Reagent

• Create/combine components with render function
• simple render function
• function which return the render function
• a map of function, one of which is the renderer
• Manage state with reagent atom
• Describe UI using Hiccup-like syntax

re-frame

re-frame is a pattern for writing SPAs in ClojureScript, using Reagent.

app-db –> components –> Hiccup –> Reagent –> VDOM –> React –> DOM ^ |

handlers <–— router <–——————— (dispatch [event-id event params])

re-frame

• db.cljs (data layer)
• subs.cljs (query layer)
• handler.cljs (control layer and/or state transition layer)
• view.cljs (view layer)

re-typerooni

What’s Next

• Reagent Tutorial
• Reagent Project
• re-frame

Questions