React in the Land of Parentheses

Daniel Janus

React in the Land of Parentheses: ClojureScript, Reagent, re-frame

2016-08-10

@nathell

Me

Full-stack developer, Rebased
Main stack: Rails
Writing Clojure since 2008, ClojureScript since 2016
https://github.com/nathell

My journey to ClojureScript

Smyrna: a search tool for collections of texts in Polish

2011: first version
(backend: Clojure, frontend: Backbone + CoffeeScript)

2016: new backend,
frontend fully rewritten in
ClojureScript + Reagent + re-frame

ClojureScript what?

Like Clojure, only Script
A Lisp compiled to JS via Google Closure Compiler
Seamless interop with host platform (JS)
Immutable by default, persistent data structures
Extremely expressive and concise
Explicit about state manipulation

ClojureScript syntax

(func arg1 arg2 arg3)
call func with arguments arg1, arg2, arg3
(js/console.log "Hello from ClojureScript")
JS interop
[42 100 :cljs "WarsawJS"]
an immutable vector
{:first 1, :second 2}
an immutable map

Reagent

One of several ClojureScript wrappers for React

Others: Om, Quiescent, Rum

Hides most of React’s complexity behind a simple API
Built around a single powerful abstraction: the reactive atom
Most components can be pure functions
Exposes full React API for when it’s needed

Reagent: a simple component

            
(defn hello []
  [:div
    [:h1 "Hello, WarsawJS!"]])

Pure function, returning a ClojureScript data structure
Easily testable and runnable in isolation
Composable
No JSX!

Reagent: composing components

            
(defn coloured-hello [col]
  [:div
    [:h1 {:style (str "color: " col)}]
         "Hello!"]])

(defn rainbow-hellos []
  [:div
    (for [col ["red" "orange" "yellow" "green"
               "blue" "indigo" "violet"]]
      [coloured-hello col])])

Atom

A stateful container for a value

            (def foo (atom 42))
;=> #<atom 42>

(swap! foo + 10)
;=> nil

(deref foo) ;; or @foo
;=> 52

Reactive atom (ratom)

A variant of Atom that re-renders all components derefing it when the value changes

            
(def count (reagent.core/atom 0))

(defn counter []
  [:div
   "Count:" @count
   [:input {:type "button" :value "Click!"
            :on-click #(swap! count inc)}]])

Global and local state

Reactive atoms can be passed around
Multiple components can share state held by the same ratom
State can be local to components

            
(defn counter []
  (let [count (reagent.core/atom 0)]
    (fn []
      [:div
       "Count:" @count
       [:input {:type "button" :value "Click!"
                :on-click #(swap! count inc)}]])

re-frame

It’s MVC, Jim, but not as we know it.

RACES (Reactive-Atom Component Event Subscription) framework

Derived Data All The Way Down!

re-frame is to Reagent what Redux is to React.

re-frame: Unidirectional data flow

app-db: entire state of the app in one central ratom
Named queries (subscriptions) allow components to access the portion of global state they’re interested in
State is mutated only by event handlers

re-frame: Counter example


(def initial-state {:count 0})

(register-handler :initialize
  (fn [empty-state event]
    initial-state))

(register-handler :bump
  (fn [state event]
    (update-in state [:count] inc)))

re-frame: Counter example (2)


(register-sub :current-count
  (fn [state params]
    (reaction (:count state))))

(defn counter []
  (let [count (subscribe [:current-count])]
    (fn []
      "Count:" @count
      [:button {:on-click #(dispatch [:bump])}
        "Click!"]]))

Lessons learned

A different way to think about UI than DOM manipulation
I don’t know about shouldComponentUpdate
…unless I need to interface with D3
re-frame makes the code maintainable
Smyrna: about 20 elements in the global state