Clojure+ClojureScript Webapps

Webapps with
Clojure & ClojureScript
@friemens

Dear audience,
a word of caution:

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

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)

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

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

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

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

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

Tooling
Sourcecode
Browser REPL
JVM REPL

Tooling
Sourcecode
Frontend
Browser Console
State

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

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

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

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

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

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

Remote Communication: Frontend
core.async
+
Transit
+
POST

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

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

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

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

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

Clojure+ClojureScript Webapps

More Related Content

What's hot

Viewers also liked

Similar to Clojure+ClojureScript Webapps

Recently uploaded

Clojure+ClojureScript Webapps