ClojureScript Introduction
2 likes1,027 views
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.
![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)](https://image.slidesharecdn.com/clojurescriptintroduction-150823120942-lva1-app6892/85/ClojureScript-Introduction-7-320.jpg)
![Mutability causes cognitive load
var x = [1,2,3];
foo(x);
After foo,
what's in x?](https://image.slidesharecdn.com/clojurescriptintroduction-150823120942-lva1-app6892/85/ClojureScript-Introduction-11-320.jpg)
![ClojureScript is built on immutability
(def x [1 2 3])
(foo x)
(assert (= x [1 2 3]))](https://image.slidesharecdn.com/clojurescriptintroduction-150823120942-lva1-app6892/85/ClojureScript-Introduction-12-320.jpg)
![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](https://image.slidesharecdn.com/clojurescriptintroduction-150823120942-lva1-app6892/85/ClojureScript-Introduction-24-320.jpg)
![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)))](https://image.slidesharecdn.com/clojurescriptintroduction-150823120942-lva1-app6892/85/ClojureScript-Introduction-25-320.jpg)
ClojureScript Introduction
- 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)
- 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
- 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