ClojureScript
A functional Lisp for the browser
@friemens
Oh, what an alien look!
Lispy syntax
Ordered
Associative
Function
Invocation
var x = [1,2,3];(def x [1 2 3])
(def m {:a “Foo“}) var m = {a: “Foo“}...
Interactive Development Demo
https://github.com/friemen/zackzack
Thou shalt not mutate in place
Mutability causes cognitive load
var x = [1,2,3];
foo(x);
After foo,
what's in x?
ClojureScript is built on immutability
(def x [1 2 3])
(foo x)
(assert (= x [1 2 3]))
… on efficient immutability
Structural
sharing
x x'
Om on top of React
Databinding
App
state
DOM
event
updates
mutations
Controller
e.g. Angular
transform
render
diff + merge
DOM
App
state
swap...
Burn Hollywood Burn!*
Public Enemy (1990)
*
Callbacks are ok, but, uhm ...
function reloadAddressbook (state, event) {
ask("Are you sure?", function (answer) {
if (an...
CSP* with core.async = channels + go blocks
Communicating Sequential Processes, Tony Hoare (1978)
*
(def c1 (chan))
(go-lo...
core.async: no need for callbacks
Ask for confirmation
ok?
Issue GET request
success?
Replace items
(defn <addressbook-rel...
Wrap up
ClojureScript is ...
... overkill for little enhancements
… a mature language to tackle UI complexity
… demanding to learn...
Thank you for listening!
Questions?
@friemens www.itemis.de
ClojureScript - A functional Lisp for the browser
Nächste SlideShare
Wird geladen in …5
×

ClojureScript - A functional Lisp for the browser

814 Aufrufe

Veröffentlicht am

Some highlights of ClojureScript, an advanced Lisp that compiles to JavaScript: Interactive development, persistent data structures, Om+React and core.sync

Veröffentlicht in: Technologie
0 Kommentare
2 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
814
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
40
Aktionen
Geteilt
0
Downloads
11
Kommentare
0
Gefällt mir
2
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

ClojureScript - A functional Lisp for the browser

  1. 1. ClojureScript A functional Lisp for the browser @friemens
  2. 2. Oh, what an alien look!
  3. 3. 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)
  4. 4. Interactive Development Demo https://github.com/friemen/zackzack
  5. 5. Thou shalt not mutate in place
  6. 6. Mutability causes cognitive load var x = [1,2,3]; foo(x); After foo, what's in x?
  7. 7. ClojureScript is built on immutability (def x [1 2 3]) (foo x) (assert (= x [1 2 3]))
  8. 8. … on efficient immutability Structural sharing x x'
  9. 9. Om on top of React
  10. 10. 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.
  11. 11. Burn Hollywood Burn!* Public Enemy (1990) *
  12. 12. 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?
  13. 13. 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
  14. 14. 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)))
  15. 15. Wrap up
  16. 16. ClojureScript is ... ... overkill for little enhancements … a mature language to tackle UI complexity … demanding to learn, but this will pay-off
  17. 17. Thank you for listening! Questions? @friemens www.itemis.de

×