ClojureScript allows developers to use Clojure to build rich client applications that run in browsers. It offers powerful functional programming concepts like immutability, pure functions, and core.async for asynchronous programming. The presentation introduces ClojureScript fundamentals like Lisp syntax, REPL, and how it is a hosted language that runs on the browser. It also discusses recommended tools for getting started and explores Om and React for building UIs and core.async for managing asynchronous code. In the end, ClojureScript is concluded to be overkill for simple enhancements but mature for tackling complex UIs while being demanding to learn initially.

1. Clojure compiled to JS
A Introduction
@friemens

2. Agenda
Some general remarks (a.k.a „blah-blah“)
Getting started with the tooling
Exploring the language and core library
React / Om / core.async
Wrap up

3. Powerful core library
Why?
Functional programming
One language in backend and frontend

4. Unfamiliar tooling
Why not?
Too much for quick-and-dirty UI enhancements
An alien language

5. Sweet spot: full stack Clojure
ClojureScript
Clojure
Datomic
„Rich-Client“
in a browser
Backend
Database

6. Fundamentals
(a.k.a things-we-need-to-understand-first)
It's a Lisp (OMG!)
The core idea of Functional Programming™
A hosted language

7. 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)

8. The REPL*
Read-Eval-Print-Loop
*

9. Pure functions
Side effects
Context
The core idea of Functional Programming

10. Thou shalt not mutate in place

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

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

13. … on efficient immutability
Structural
sharing
x x'

14. ClojureScript is a hosted language
Your host: the browser
Clojure Script

15. Getting started with the tooling

16. Ideal tooling
Browser
Console
Editor
REPL
Instant feedback

17. Highly recommended tutorial:
https://github.com/clojure/clojurescript/wiki/Quick-Start
cljs.jar

18. Or follow the steps on
https://github.com/adzerk-oss/boot-cljs-example
Getting started with Boot
Either use the example from
https://github.com/friemen/cugb/tree/master/cljsintro

19. Traditional architecture of UIs
View
Model Controller

20. Dataflow approach to UI
Om / React
core.async
App. State View

21. Databinding
App
state
DOM
event
updates
mutations
Controller
e.g. Angular
transform
render
diff + merge
DOM
App
state
swap
React+Om
Virtual DOM
event
DOM operations are
soooo sloooow.
Bi-directional
Uni-directional

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

23. 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?

24. 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

25. 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)))

26. Getting started with
React / Om / core.async

27. Wrap up

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

29. Links to resources on GitHub
https://github.com/friemen/cugb/

30. Thank you for listening!
Questions?
@friemens riemenschneider@doctronic.de