Clojure and ClojureScript programming competition September 28-29 Signup opens September 7, 03:00 EEST clojurecup.com @clojurecup 

@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 

No content

Help Needed • Monitoring, IRC ops, contestant support during the competition. • May not participate in compo • Ping me at [email protected] 

Single Page Webapps in ClojureScript with Pedestal Tero Parviainen clojuTRE 2013 

Tero Parviainen @teropa Freelance software maker. Clojure, Java, Ruby, JavaScript. Web, Android, iOS, WP. 

tinyurl.com/vertxbook September 2013 Packt Publishing 

Webapps: A Personal History 

Web Frameworks 

AJAX 

http://www.flickr.com/photos/andrec/109984452/ 

Google Web Toolkit 

http://www.flickr.com/photos/seattlemunicipalarchives/8284074749/ 

Single-page 

http://hipstergrammers.tumblr.com/ 

ClojureScript 

http://www.flickr.com/photos/32820477@N02/3619048502/ 

Pedestal 

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 "

" new-state " Hello Worlds

"))) (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)) 

“If you have ever built a ClojureScript application, this is the way you start.” 

No content

What Pedestal Is Pedestal Services Pedestal Applications Clojure ClojureScript Web Services Tooling Browser Applications Tooling 

What Pedestal Is Pedestal Applications ClojureScript Browser Applications Tooling 

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 

Data Model {:todos ["one" "two" "three"]} 

Application Model {:main {:todos ["one" "two" "three"] :todo-count 3}} 

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 

DOM

3 ToDos

• one
• two
• three



Verbs over Nouns Data Model Messages User actions HTTP responses SSEs WebSocket input Timer events Transforms Transforms 

Verbs over Nouns Application Model Data Model Transforms Data Flow 

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 

Decoupling http://www.flickr.com/photos/marfis75/5983944342/ 

Models from Processes Data Model Messages User actions HTTP responses SSEs WebSocket input Timer events Transforms Transforms Pure functions 

Models from Processes Application Model Data Model Transforms Data Flow Pure functions 

Messages from Events Data Model Messages User actions HTTP responses SSEs WebSocket input Timer events Transforms Transforms Simulated Simulated Simulated Simulated Simulated 

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”} 

Dispatch from Execution Messages Transforms Data Flow Data Model Application Model Rendering DOM Input Queue App Model Queue 

Dispatch from Execution Messages Transforms Data Flow Data Model Application Model Rendering DOM Input Queue App Model Queue Foreground Background Web Worker 

Code 

Resources https://github.com/pedestal/app-tutorial/ http://pedestal.io/ twitter.com/teropa