Download as PDF, PPTX
![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)
Uploaded byFalko Riemenschneider
ClojureScript Introduction
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.
More Related Content
![Getting Started with Apache Spark: Big Data Made Simple [Free Meetup]](https://cdn.slidesharecdn.com/ss_thumbnails/apachesparkgettingstarted-260203175547-8361bcc3-thumbnail.jpg?width=640&height=640&fit=bounds)
ClojureScript Introduction
- 1. Clojure compiled toJS 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? Functionalprogramming One language in backend and frontend
- 4. Unfamiliar tooling Why not? Toomuch for quick-and-dirty UI enhancements An alien language
- 5. Sweet spot: fullstack Clojure ClojureScript Clojure Datomic „Rich-Client“ in a browser Backend Database
- 6. Fundamentals (a.k.a things-we-need-to-understand-first) It's aLisp (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.
- 9. Pure functions Side effects Context Thecore idea of Functional Programming
- 10. Thou shalt notmutate in place
- 11. Mutability causes cognitiveload var x = [1,2,3]; foo(x); After foo, what's in x?
- 12. ClojureScript is builton immutability (def x [1 2 3]) (foo x) (assert (= x [1 2 3]))
- 13. … on efficientimmutability Structural sharing x x'
- 14. ClojureScript is ahosted language Your host: the browser Clojure Script
- 15. Getting started withthe tooling
- 16.
- 17.
- 18. Or follow thesteps 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 ofUIs View Model Controller
- 20. Dataflow approach toUI 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!* PublicEnemy (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 needfor 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.
- 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 resourceson GitHub https://github.com/friemen/cugb/
- 30. Thank you forlistening! Questions? @friemens riemenschneider@doctronic.de