Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Single Page Webapps in ClojureScript with Pedestal
Search
Tero Parviainen
August 28, 2013
Technology
4
89k
Single Page Webapps in ClojureScript with Pedestal
Including a Clojure Cup status report.
Presented at ClojuTRE 2013, August 28 at Tampere, Finland.
Tero Parviainen
August 28, 2013
Tweet
Share
More Decks by Tero Parviainen
See All by Tero Parviainen
Hot Loading in Angular 2
teropa
0
96
Refactoring Angular Apps to Components (HelsinkiJS 11/15)
teropa
1
410
Immutable Java
teropa
4
7.8k
Clojure Cup Update
teropa
0
170
Vältä sulkeutuneen softan toimittajaloukut
teropa
2
330
Clojure: An Introduction
teropa
11
370
The Age of Our Mutant Overlords is Over
teropa
11
20k
Other Decks in Technology
See All in Technology
オープンソースでどこまでできる?フォーマル検証チャレンジ
msyksphinz
0
130
20251014_Pythonを実務で徹底的に使いこなした話
ippei0923
0
180
社内お問い合わせBotの仕組みと学び
nish01
1
570
コンテキストエンジニアリング入門〜AI Coding Agent作りで学ぶ文脈設計〜
kworkdev
PRO
0
210
業務効率化をさらに加速させる、ノーコードツールとStep Functionsのハイブリッド化
smt7174
2
130
Wasmのエコシステムを使った ツール作成方法
askua
0
120
プロダクトのコードから見るGoによるデザインパターンの実践 #go_night_talk
bengo4com
1
2.4k
能登半島災害現場エンジニアクロストーク 【JAWS FESTA 2025 in 金沢】
ditccsugii
0
480
Large Vision Language Modelを用いた 文書画像データ化作業自動化の検証、運用 / shibuya_AI
sansan_randd
0
130
SwiftUIのGeometryReaderとScrollViewを基礎から応用まで学び直す:設計と活用事例
fumiyasac0921
0
160
AWS Control Tower に学ぶ! IAM Identity Center 権限設計の第一歩 / IAM Identity Center with Control Tower
y___u
0
140
Developer Advocate / Community Managerなるには?
tsho
0
130
Featured
See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
870
Embracing the Ebb and Flow
colly
88
4.8k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Building a Scalable Design System with Sketch
lauravandoore
463
33k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
BBQ
matthewcrist
89
9.8k
Speed Design
sergeychernyshev
32
1.2k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
Being A Developer After 40
akosma
91
590k
4 Signs Your Business is Dying
shpigford
185
22k
Code Review Best Practice
trishagee
72
19k
Transcript
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
None
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 "<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))
“If you have ever built a ClojureScript application, this is
the way you start.”
None
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 <h2> 3 ToDos </h2> <ul> <li>one</li> <li>two</li> <li>three</li> </ul>
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