Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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

872 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
  • Als Erste(r) kommentieren

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

×