ClojureScript is a functional Lisp dialect that compiles to JavaScript and runs in browsers. It uses immutable data and core.async channels to enable functional reactive programming approaches like Om on top of React. ClojureScript avoids callbacks with its channel-based concurrency system, allowing asynchronous code to be written linearly and avoiding callback hell. The language promotes an immutable and referentially transparent style to reduce cognitive load and enable more robust applications.

1. ClojureScript
A functional Lisp for the browser
@friemens

3. Oh, what an alien look!

4. Lispy syntax
Ordered
Associative
Function
Invocation
var x = [1,2,3];(def x [1 2 3])
(def m {:a “Foo“}) var m = {a: “Foo“};
function bar (a) {
return a + 42;
}
(defn bar [a]
(+ a 42))
bar(0);(bar 0)

5. Interactive Development Demo
https://github.com/friemen/zackzack

6. Thou shalt not mutate in place

7. Mutability causes cognitive load
var x = [1,2,3];
foo(x);
After foo,
what's in x?

8. ClojureScript is built on immutability
(def x [1 2 3])
(foo x)
(assert (= x [1 2 3]))

9. … on efficient immutability
Structural
sharing
x x'

10. Om on top of React

11. Databinding
App
state
DOM
event
updates
mutations
Controller
e.g. Angular
transform
render
diff + merge
DOM
App
state
swap
React+Om
Shadow DOM
event
DOM operations are
soooo sloooow.

12. Burn Hollywood Burn!*
Public Enemy (1990)
*

13. Callbacks are ok, but, uhm ...
function reloadAddressbook (state, event) {
ask("Are you sure?", function (answer) {
if (answer) {
ajax.get("/addresses", function (response) {
if (response.statusCode == 200) {
state.addresses.items = response.body;
}
});
}
});
}
Ask for confirmation
ok?
Issue GET request
success?
Replace items
But how do you implement concurrent requests?

14. CSP* with core.async = channels + go blocks
Communicating Sequential Processes, Tony Hoare (1978)
*
(def c1 (chan))
(go-loop [xs []]
(let [x (<! c1)]
(println "Got" x ", xs so far:" xs)
(recur (conj xs x))))
(put! c1 "foo")
;; outputs: Got bar , xs so far: [foo]
a blocking read
make a new channelcreates a
lightweight
process
async write

15. core.async: no need for callbacks
Ask for confirmation
ok?
Issue GET request
success?
Replace items
(defn <addressbook-reload
[state event]
(go (if (= :ok (<! (<ask "Are you sure?")))
(let [{s :status addresses :body}
(<! (http/get "/addresses"))]
(if (= 200 s)
(assoc-in state
[:addresses :items]
addresses)
state)))

16. Wrap up

17. ClojureScript is ...
... overkill for little enhancements
… a mature language to tackle UI complexity
… demanding to learn, but this will pay-off

18. Thank you for listening!
Questions?
@friemens www.itemis.de