Single Page Webapps in ClojureScript with Pedestal

Including a Clojure Cup status report.
Presented at ClojuTRE 2013, August 28 at Tampere, Finland.

Transcript

1. Clojure and ClojureScript programming competition September 28-29 Signup opens September 7, 03:00 EEST clojurecup.com @clojurecup
2. @abedra @amitrathore @marick @cemerick @ibdknox @chrishouser @cgrand @lisperati @swannodette @deanwampler @garybernhardt @hlship @weavejester @w01fe @antiheroine @nrrrdcore @lynaghk @michaelklishin @bmf @nathanmarz @neal4d @usabilitycounts@technomancy @samaaron @venkat_s
4. Help Needed • Monitoring, IRC ops, contestant support during the competition. • May not participate in compo • Ping me at tero@clojurecup.com
5. Single Page Webapps in ClojureScript with Pedestal Tero Parviainen clojuTRE 2013
6. Tero Parviainen @teropa Freelance software maker. Clojure, Java, Ruby, JavaScript. Web, Android, iOS, WP.
7. tinyurl.com/vertxbook September 2013 Packt Publishing
8. Webapps: A Personal History
9. Web Frameworks
10. AJAX
11. http://www.flickr.com/photos/andrec/109984452/
12. Google Web Toolkit
13. http://www.flickr.com/photos/seattlemunicipalarchives/8284074749/
14. Single-page
15. http://hipstergrammers.tumblr.com/
16. ClojureScript
17. http://www.flickr.com/photos/32820477@N02/3619048502/
18. Pedestal
19. The Hook (ns hello-world (:require [domina :as dom])) (def application-state (atom 0)) (defn render [old-state new-state] (dom/destroy-children! (dom/by-id "content")) (dom/append! (dom/by-id "content") (str "<h1>" new-state " Hello Worlds</h1>"))) (add-watch application-state :app-watcher (fn [key reference old-state new-state] (render old-state new-state))) (defn receive-input [] (swap! application-state inc) (.setTimeout js/window #(receive-input) 3000)) (defn ^:export main [] (receive-input))
20. “If you have ever built a ClojureScript application, this is the way you start.”
22. What Pedestal Is Pedestal Services Pedestal Applications Clojure ClojureScript Web Services Tooling Browser Applications Tooling
23. What Pedestal Is Pedestal Applications ClojureScript Browser Applications Tooling
24. Three Models Google http://domain.com Web Page Title DERP ERP Human Resources 90% Process Compliance 300Hz Big Data Synergy 20 clouds Data Model Application Model DOM
25. Data Model {:todos ["one" "two" "three"]}
26. Application Model {:main {:todos ["one" "two" "three"] :todo-count 3}}
27. Application Model [:node-create [] :map] [:node-create [:main] :map] [:node-create [:main :todos] :map] [:value [:main :todos] nil ["one" "two" "three"]] [:node-create [:main :todo-count] :map] [:value [:main :todo-count] nil 3] Deltas
28. DOM <h2> 3 ToDos </h2> <ul> <li>one</li> <li>two</li> <li>three</li> </ul>
29. Verbs over Nouns Data Model Messages User actions HTTP responses SSEs WebSocket input Timer events Transforms Transforms
30. Verbs over Nouns Application Model Data Model Transforms Data Flow
31. Verbs over Nouns DOM Application Model Render Google http://domain.com Web Page Title DERP ERP Human Resources 90% Process Compliance 300Hz Big Data Synergy 20 clouds
32. Decoupling http://www.flickr.com/photos/marfis75/5983944342/
33. Models from Processes Data Model Messages User actions HTTP responses SSEs WebSocket input Timer events Transforms Transforms Pure functions
34. Models from Processes Application Model Data Model Transforms Data Flow Pure functions
35. Messages from Events Data Model Messages User actions HTTP responses SSEs WebSocket input Timer events Transforms Transforms Simulated Simulated Simulated Simulated Simulated
36. App Model From DOM Data UI Application Model Render Google http://domain.com Web Page Title :metrics :human-resources :compliance :big-data-synergy Automated {:amt 90 :unit “%”} {:amt 300 :unit “Hz”} {:amt 20 :unit “Clouds”}
37. Dispatch from Execution Messages Transforms Data Flow Data Model Application Model Rendering DOM Input Queue App Model Queue
38. Dispatch from Execution Messages Transforms Data Flow Data Model Application Model Rendering DOM Input Queue App Model Queue Foreground Background Web Worker
39. Code
40. Resources https://github.com/pedestal/app-tutorial/ http://pedestal.io/ twitter.com/teropa