unified user interfaces

in Clojurescript

forwardjs 4 feb 2015

@priyatam mudivarti

facjure

Learning another language is like becoming another person

- Haruki Murakami

HTML5 markup, dom, semantics

SVG markup, math, and graphics

Canvas more math and graphics!

CSS3/Less/Sass
rules, selectors, prefixes, variables,
mixins, typography and responsive design

Javascript
vars, functions, scope, event handling, dom, modules

where are we?

my experience

programming, ui design

fiction writing, street-photography

First solve the problem, then write the code

- John Johnson

perspective matters

context matters

idioms matter,

how we think in code while designing

matters.

Learning cooking is not about guessing the functionality of your kitchen appliances. It's about understanding how ingredients can be combined.

— Brett Victor

data

functions

abstractions

var javascript = (function() {

console.log("is lisp in C clothing");

})();

(->> "javascript in lisp clothing"

log

(. js/console))

Clojurescript 202

(def a-vector [1 2 3 4 5])


(def a-nested-map 
  {:customer-id 1e6
   :preferences {:nickname "Bob"
                 :avatar "http://en.gravatar.com/userimage/0/0.jpg"}
                 :services {:alerts {:daily true}}})


(def complex-map 
  {[1 2] :one-two 
   [3 4] :three-four})


(def a-set 
  #{:cat :dog :bird})

Clojurescript 202: immutable data structures

;; Unlike JavaScript there is no hoisting in ClojureScript. ClojureScript has lexical scoping.

(def some-x 1)

(let [some-x 2]
  some-x)


;; functions parameters, let bindings locals, and loop locals are not mutable!

(let [fns (loop [i 0 ret []]
            (if (< i 10)
              (recur (inc i) (conj ret (fn [] i)))
              ret))]
  (map #(%) fns))

Clojurescript 202: scope


; simple function
(defn add [a b]
  (+ a b))

;; function with multiple args and default values
(defn another-function
  ([x] (defaults x :default))
  ([x y] [x y]))


;; closure

(let [a 1e3]
  (defn foo []
    (* a a))
  (defn bar []
    (+ (foo) a)))


;; higher order functions

Clojurescript 202: functions

;; list comprehension
(for [x (range 1 10)
      y (range 1 10)
      :when (and (zero? (rem x y))
                 (even? (quot x y)))]
  [x y])


;; higher order functions over sequences
(map inc [0 1 2 3 4 5 6 7 8 9])

(filter even? (range 10))

(reduce + (range 100))

(partition 2 [:a 1 :b 2 :c 3 :d 4 :e 5])

(remove odd? (range 10))

(take 5 (interleave (repeat "red") (repeat "blue")))

;; Protocols, a.k,a Interfaces
(defprotocol MyProtocol (awesome [this]))
(extend-protocol MyProtocol
  js/Date
  (awesome [_] "Having an awesome time!")
  number
  (awesome [_] "I'm an awesome number!"))

(awesome #inst "2014")
(awesome 5)

Clojurescript 202: abstractions

and much more

You get power by interacting

with your interface

not with code

— Jeff Raskin

Demo #1

a simple autocomplete

markup in clojurescript data structures

styles in clojurescript data structures (with namespaces and functions!)

event handling as functions

Demo #2

static site templating

like jquery, apply selectors and transform a static html

into a dynamic app

Code manipulates data. To understand code, a learner must see the data, and see the effect of code on the data.

- Brett Victor

Demo #3

live coding in the canvas api

Liveness means the user interface is always active and reactive—objects respond to user actions, animations run, layout happens, and information displays update continuously.

- John H Maloney

Demo #4

a web pixel editor

built entirely in Om

with undo/redo, kb events, async channels ...

~ 1200 lines, no other deps

bending language

at will

hoplon, a dsl to program the web

html evaluator, first-class custom dom components, spreadsheet-like dataflow programming to manage client state, fast rpc

Demo #5

data flow programming

functional composition of code, styles, and markup

abstractions with protocols, not object inheritance

lexical binding, and first-class namespaces

... and live coding and design!

Clojurescript

common themes

Credits

Special thanks to David Nolen, Chris Granger, Alan Dipert, and Joel Holdbrooks, and many others for their persistence and commitment in building the Clojurescript community.

demos

figwheel (flappy bird), goya, libre

artwork

matt martini

b/w photography

priyatam mudivarti

References

tutorials

clojurescript tutorials

clojurescript-koans

amazing libraries

c2, dommy, enfocus, freactive, garden, hoplon, kioo, jayq,

mondarin, om, zelkova

boilerplates

mies, chestnut, ringo

editors

cider, lighttable