This document discusses building web applications using Clojure and ClojureScript. It covers the Lispy syntax of Clojure, cross-platform coding using reader conditionals, and popular Clojure libraries. It demonstrates the frontend architecture using React and core.async for asynchronous programming. Remote communication involves serialization with Transit. The backend uses small libraries without frameworks, with routing and handler functions. Overall it provides an overview of building full-stack webapps with the Clojure ecosystem.

1. Webapps with
Clojure & ClojureScript
@friemens

3. Dear audience,
a word of caution:

4. ((((λ))))

5. Language & Tooling
Demos of Webapps
Frontend Architecture
Remoting
Backend Architecture
Overview

6. Language & Tooling
Demos of Webapps
Frontend Architecture
Remoting
Backend Architecture
Overview

7. 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)

8. Cross-Plattform Coding
#?(:clj (Clojure expression)
:cljs (ClojureScript expression)
:cljr (Clojure CLR expression))
(defn str->int [s]
#?(:clj (java.lang.Integer/parseInt s)
:cljs (js/parseInt s)))
Example
Reader Conditionals

9. Why is Clojure a Lisp-style language?
Lisp!
Other Languages
Time
Expressive
Power

10. Cross-Plattform Coding
#?(:clj (Clojure expression)
:cljs (ClojureScript expression)
:cljr (Clojure CLR expression))
(defn str->int [s]
#?(:clj (java.lang.Integer/parseInt s)
:cljs (js/parseInt s)))
Example
Reader Conditionals

11. Language features „a la carte“
core.logic
core.async
clojure.spec
core.match Haskell style pattern matching
Logic programming
CSP style programming
Schematizing data
overtone SuperCollider synthesizers

12. Functional programming meets the Real World(TM)
Pure functions
Side effects
Context

13. Language & Tooling
Demos of Webapps
Frontend Architecture
Remoting
Backend Architecture
Overview

14. ClojureScript
Compiler
Leiningen
Build Tool
Sass
Compiler
nREPL
clojure.jar
Java Virtual Machine
Figwheel
CIDER
Emacs
Tooling

15. Tooling
Sourcecode
Browser REPL
JVM REPL

16. Tooling
Sourcecode
Frontend
Browser Console
State

17. Language & Tooling
Demos of Webapps
Frontend Architecture
Remoting
Backend Architecture
Overview

18. Language & Tooling
Demos of Webapps
Frontend Architecture
Remoting
Backend Architecture
Overview

19. App
state
DOM
event
updates
mutations
Controller
e.g. Angular
transform
render
diff + merge
DOM
App
state
swap
React
+ Cljs Library
Virtual DOM
event
DOM operations are
soooo sloooow.
It's not MVC as you know it

20. 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?
callback 1
callback 2

21. 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

22. 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)))

23. Application State
ƒsubscription
ƒdispatch
ƒrender
Browser
DOM
Channel
ƒtransform
Virtual
DOM
Event
Event
Current state
swap!
State
State
DOM
New
state
Controller process
Big picture: uni-directional data flow

24. Language & Tooling
Demos of Webapps
Frontend Architecture
Remoting
Backend Architecture
Overview

25. Remote Communication: De-/Serialization
> (def msg {:service :add-contact
:payload {:firstname "Foo"
:lastname "Bar"}})
> (pr-str msg)
;= "{:service :add-contact, :payload {:firstname "Foo",
:lastname "Bar"}}"
> (clojure.edn/read-string "{:service :add-contact, :payload
{:firstname "Foo", :lastname "Bar"}}")
;= {:service :add-contact
:payload {:firstname "Foo"
:lastname "Bar"}}
Pro tip: use Cognitects Transit
Serialization
Deserialization
Data
Data

26. Remote Communication: Frontend
core.async
+
Transit
+
POST

27. Remote Communication: Backend
Friend-Authentication
+
Transit-Middleware
+
DIY Dispatching

28. Language & Tooling
Demos of Webapps
Frontend Architecture
Remoting
Backend Architecture
Overview

29. Webapp Backend
Small libraries,
no big frameworks!
HTTP
server
Middle-
ware
functions
Routing
function
Handler
functions
Page
renderer

30. Component decouples backend code
System definition
Implementation
namespaces
Protocols
+
Schemas/Types

31. Wrap up

32. Webapp development with Clojure + ClojureScript ...
... gives you rapid feedback
… provides a mature full-stack ecosystem
… is demanding to learn, but this will pay-off

33. Thank you for listening!
Questions?
@friemens www.doctronic.de