ClojureScript Introduction

Clojure compiled to JS

A Introduction

@friemens

Agenda

Some general remarks (a.k.a „blah-blah“)

Getting started with the tooling

Exploring the language and core library

React / Om / core.async

Wrap up

Powerful core library

Why?

Functional programming

One language in backend and frontend

Unfamiliar tooling

Why not?

Too much for quick-and-dirty UI enhancements

An alien language

Sweet spot: full stack Clojure

ClojureScript

Clojure

Datomic

„Rich-Client“in a browser

Backend

Database

Fundamentals(a.k.a things-we-need-to-understand-first)

It's a Lisp (OMG!)

The core idea of Functional Programming™

A hosted language

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)

The REPL*

Read-Eval-Print-Loop*

Pure functions

Side effects

Context

The core idea of Functional Programming

Thou shalt not mutate in place

Mutability causes cognitive load

var x = [1,2,3];foo(x);

After foo,what's in x?

ClojureScript is built on immutability

(def x [1 2 3])(foo x)(assert (= x [1 2 3]))

… on efficient immutability

Structuralsharing

x x'

ClojureScript is a hosted language

Your host: the browser

Clojure Script

Getting started with the tooling

Ideal tooling

Browser

Console

Editor

REPL

Instant feedback

Highly recommended tutorial:

https://github.com/clojure/clojurescript/wiki/Quick-Start

cljs.jar

Or follow the steps onhttps://github.com/adzerk-oss/boot-cljs-example

Getting started with Boot

Either use the example fromhttps://github.com/friemen/cugb/tree/master/cljsintro

Traditional architecture of UIs

View

Model Controller

Dataflow approach to UI

Om / React

core.async

App. State View

Databinding

Appstate

DOM

event

updates

mutations

Controller

e.g. Angular

transform

renderdiff + merge

DOM

Appstate

swap

React+Om

Virtual DOM

event

DOM operations are soooo sloooow.

Bi-directional

Uni-directional

Burn Hollywood Burn!*

Public Enemy (1990)*

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?

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

Getting started withReact / Om / core.async

Wrap up

ClojureScript is ...

... overkill for little enhancements

… a mature language to tackle UI complexity

… demanding to learn, but this will pay-of

Links to resources on GitHub

https://github.com/friemen/cugb/

Thank you for listening!

Questions?

@friemens [email protected]