2. About me
Siva Jagadeesan
Zolodeck :: Clojure + Storm + Datomic + CLJS
@sivajag
siva@zololabs.com
Monday, February 11, 13 2
3. What we will cover today
Compiling ClojureScript
Javascript Interop
Setting up development Environment
Building a simple Web Application using ClojureScript
and Clojure
Monday, February 11, 13 3
11. ClojureScript - Compiler
ClojureScript
No Minification ClojureScript
No Optimization Compiler
JavaScript
Monday, February 11, 13 11
12. ClojureScript - Compiler
Uses Google Closure Compiler for minification and
optimization
Monday, February 11, 13 12
13. Google Closure Compiler - Optimization
Whitespace Only
Simple Optimization
Advanced Optimization
Monday, February 11, 13 13
14. ClojureScript and Google Closure
ClojureScript
Optimized
JavaScript
ClojureScript
Compiler
Google Closure
JavaScript Compiler
Monday, February 11, 13 14
15. Hello World
lein new cljspress
Monday, February 11, 13 15
26. Loading Unoptimized Code
<script src="js/goog/base.js"></script>
<script src="cljspress.js"></script>
<script> goog.require('cljspress.client'); </script>
<script> cljspress.client.main(); </script>
loads the Google Closure Library from goog/base.js
loads the dependency information for your application
load your application
launches your application
Monday, February 11, 13 26
27. Compilation Demystified - Options
:pretty-print
Production - {:optimizations :advanced}
Development - {:optimizations :whitespace :pretty-print true}
Monday, February 11, 13 27
31. JavaScript Interop
The js namespace
Methods and Fields
Constructor Functions
Scope of this
Exceptions
Monday, February 11, 13 31
32. JavaScript Interop
The js namespace
Javascript does not have a concept of namespace
People use Java Objects as “modules”
ClojureScript has built-in support for namespaces
js namespace refers to JavaScript Global namespace
Monday, February 11, 13 32
33. JavaScript Interop
Methods and Fields
(def m “Hello World”)
(def l (.-length m)
(def r (.join m “-”)
Monday, February 11, 13 33
34. JavaScript Interop
Constructor Functions
(def d (js/Date.))
Monday, February 11, 13 34
35. JavaScript Interop
Scope of this
(def g (Raphael/color “00ff00”))
(def g (.color js/Raphael “00ff00”))
Monday, February 11, 13 35
45. Consuming Libraries
Clojurescript Libraries
Javascript Google Closure Libraries
JavaScript Plain Old Libraries
Compatible with Advanced mode compilation
Not Compatible with Advanced mode compilation
Monday, February 11, 13 45
46. Consuming Libraries
ClojureScript Libraries
Simple Case
Include in Classpath
:require or :use
Invoke functions like normal ClojureScript Functions
Monday, February 11, 13 46
47. Consuming Libraries
JavaScript Google Closure Libraries
Reference the relative path in :libs compiler options
:require or :use
Invoke functions using JS interop form
Monday, February 11, 13 47
48. Consuming Libraries
JavaScript Plain Old Libraries
with Advanced Mode Compilation
Reference the relative path and namespace in :foreign-libs compilation option
:require or :use
Invoke functions using JS interop form
Monday, February 11, 13 48
49. Consuming Libraries
JavaScript Plain Old Libraries
without Advanced Mode Compilation
Create an externs file and add it to :externs compilation option
Include the library directly as script tag in HTML
Invoke functions using JS interop form
Monday, February 11, 13 49
50. lein cljs-build
“is a Leiningen plugin that makes it quick and easy to
automatically compile your ClojureScript code into
Javascript whenever you modify it.”
Monday, February 11, 13 50
54. Even better Browser Repl
ClojureScript Webpage
REPL
bREPL bREPL
Server Client
JVM Browser
Monday, February 11, 13 54
55. bRepl Client
Create src/cljs/cljspress/core.cljs
Monday, February 11, 13 55
56. bRepl Server and cljs REPL
lein trampoline cljsbuild repl-listen
Refresh the web page
in Repl type “(js/alert "cool")”
You should see a alert box in your web page
Monday, February 11, 13 56
57. Recap
All Compilation options
Consuming Different types of libraries
Using lein cljs-build
Interactive Development using Browser REPL
Monday, February 11, 13 57
58. Thank you
@sivajag
siva@zololabs.com
Monday, February 11, 13 58
