ClojureScript + React.js: How I learned to stop worrying and love the browser.

ClojureScript React.js &

@pithyless

Philosophy

LISP programmers know the cost of everything and the value
of nothing. Alan Perlis

LISP Programmers know the cost of everything and the value
of nothing. Alan Perlis Programmers Experience

NOUNS VERBS

DATA strings numbers keywords maps sets vectors

WebApplications

jQuery

jQuerySoup

MV*Soup

Pot Frogin a

Render Events &

react.js

your code react.js 60 fps Application Browser

your code react.js Data Model Virtual DOM Browser DOM

your code react.js [{:tweet “At @wroc_love.rb”}] [:ul [:li [:span “At
@wroc_love.rb”]]] <ul> <li><span>At @wroc_love.rb</span></li> </ul>

your code react.js [{:tweet “At @wroc_love.rb”} {:tweet “It’s awesome!”}] [:ul
[:li [:span “At @wroc_love.rb”]] [:li [:span “It’s awesome!”]]] <ul> <li><span>At @wroc_love.rb</span></li> <li><span>It’s awesome!</span></li> </ul>

code react.js #{:}

ClojureScript

• Lisp • STM • Runtime polymorphism • REPL •
Functional programming • Macros • Namespaces • Protocols • Interop with JVM • Transducers • Immutable datastructures • Uniform API over immutable datastructures • Lazy sequences • Destructuring • State vs Identity • core.async • core.logic • core.typed • And more! Clojure

• Lisp • STM • Runtime polymorphism • REPL •
Functional programming • Macros • Namespaces • Protocols • Interop with Javascript • Transducers • Immutable datastructures • Uniform API over immutable datastructures • Lazy sequences • Destructuring • State vs Identity • core.async • core.logic • core.typed • And more! ClojureScript

Clojure manages risk better than any other technology.

Hello World

(def elephant )

; this is a comment

(+ 1 2 3 4)

(defn greet [name] (str "Hello, " name))

(def profile {:name “Norbert" :fibonacci [0 1 1 2 3
5 8] :tags #{:clojure :tea}})

(profile :name) (:name profile) (assoc profile :name "Bob") (assoc-in profile
[:settings :color :error] "red")

(def greet [{:keys [name]} :as person] (str "Hello, " name))

boot* * lein

rum* * om, reagent

html/index.html html/main.css src/hello/core.cljs build.boot

<!doctype html> <html> <head> <title>My App</title> <link rel=“stylesheet" href="css/main.css"> </head>
<body> <div id="app"></div> <script src="main.js"></script> </body> </html> html/index.html

(ns hello.core (:require [rum :as r])) (def post {:text “First
Post" :author "Jane"}) (r/defc render-post [{:keys [:text :author]}] [:blockquote text [:cite author]]) (r/mount (render-post post) (.getElementById js/document "app")) src/hello/core.cljs

(set-env! :source-paths #{"src"} :resource-paths #{"html"} :dependencies '[[org.clojure/clojure "1.7.0-alpha5" :scope "provided"]
[org.clojure/clojurescript "0.0-2985" :scope "provided"] [rum "0.2.6"] [adzerk/boot-cljs "0.0-2814-3" :scope "test"] [cljsjs/boot-cljsjs "0.4.6" :scope "test"] [adzerk/boot-cljs-repl "0.1.9" :scope "test"] [adzerk/boot-reload "0.2.6" :scope "test"] [pandeiro/boot-http "0.6.3-SNAPSHOT" :scope "test"]]) (require '[adzerk.boot-cljs :refer [cljs]] '[cljsjs.boot-cljsjs :refer [from-cljsjs]] '[adzerk.boot-cljs-repl :refer [cljs-repl start-repl]] '[adzerk.boot-reload :refer [reload]] '[pandeiro.boot-http :refer [serve]]) build.boot

(deftask dev "Start the dev env..." [] (comp (watch) (serve
:dir "target" :port 3000) (cljs-repl) (from-cljsjs :profile :development) (cljs :unified true :source-map true :optimizations :none)) (reload))) build.boot

cljs.user=> (+ 1 "2") WARNING: cljs.core/+, all arguments must be
numbers, got [number string] instead. at line 1 <cljs repl> "12" cljs.user=> (js/alert "hello!") Auto-Reload via Websockets Browser REPL and

Rendering

code react.js #{:}

Rendering 1. Data Model 2. Data Transform 3. No Step
3

3 on change

(rum/defc component < mixins* [args*] content) (rum/mount (component args*) element)

rum < static

immutable datastructures

(rum/defc label < static [text] [:span text]) (label “Hello”) (label
“Hello”) (label “Goodbye”) no render

rum < reactive * reagent

(def tags (atom [])) (swap! tags conj :foo) (swap! tags
conj :bar) (count @tags)

(def todo (atom {:title “Hello”}})) (rum/defc item < reactive [state]
[:span (:title (rum/react state))]) (rum/mount (item todo) element) (swap! todo assoc :title “Hello”) (swap! todo assoc :title “Goodbye”)

(rum/defc search-box < reactive [] (let [val (atom "I'm looking
for...")] [:div [:input {:type “text" :value (:value (rum/react val)) :on-change #(reset! val (-> % .-target .-value))}] [:input {:type “button" :value "Search!" :on-click #(search-tweets world (rum/react val))}]]))

rum < cursored * om

(def state (atom {:app {:settings {:color "red"}} :text "Hello"})) (rum/defc
label < rum/cursored [color text] [:.label {:style {:color @color}} @text]) (rum/defc body < rum/cursored [state] [:div (label (rum/cursor state [:app :settings :color]) (rum/cursor state [:text]))])

rum < xyz

rum < datascript

(d/q '[ :find ?k ?x :in [[?k [?min ?max]] ...]
?range :where [(?range ?min ?max) [?x ...]] [(even? ?x)] ] { :a [1 7], :b [2 4] } range)

3 on change

Events

code react.js #{:}

#{:} Ajax WebSocket User Input JS Events

core.async

synchronous is the new async

(go (while true (<! (timeout 250)) (>! c 1))) (go
(while true (<! (timeout 1000)) (>! c 2))) (go (while true (<! (timeout 2000)) (>! c 3))) (go (loop [q []] (set-html! out (render q)) (recur (-> (conj q (<! c)) (peekn 10))))

queue everything is a

(let [c (chan) t (timeout 1000)] (go (>! c (<!
web query))) (go (>! c (<! image query))) (go (>! c (<! video query))) (go (>! c (<! local-storage query))) (alt! [c t] ([v] v)))

DRY remove coupling

promises what about? ¿

#{:} Ajax WebSocket User Input JS Events core.async

react native sente transit leaven transducers core.logic core.match prismatic/schema clojure.typed
“simple vs easy” “incidental vs inherent complexity”

bit.ly/cljs-hero @pithyless

ClojureScript + React.js: How I learned to stop...

ClojureScript + React.js: How I learned to stop worrying and love the browser.

More Decks by Norbert Wójtowicz

Other Decks in Programming

Featured

Transcript