@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
Designing for productivity—even if that requires retraining—is often the correct decision
- Jeff Raskin, The Humane Interface
unified-interfaces-with-clojurescript
By Priyatam Mudivarti
unified-interfaces-with-clojurescript
Designing user-interfaces on modern browsers depend on wiring up code, HTML5, and handcrafted CSS3 with Less and Sass. The experience isn’t fluid, and leaves a hole at the intersection of code and design. Clojurescript builds on the power of Javascript, the minimalism of Coffeescript, along with its own expressive syntax that you can bend at will. The result is a fun, exploratory process, to unify code and markup and styles that push your imagination.
