Upload
siva-jagadeesan
View
8.944
Download
0
Embed Size (px)
Citation preview
getting started with cljs- Siva Jagadeesan
1Monday, February 11, 13
About me
Siva Jagadeesan
Zolodeck :: Clojure + Storm + Datomic + CLJS
@sivajag
2Monday, February 11, 13
What we will cover today
Compiling ClojureScript
Javascript Interop
Setting up development Environment
Building a simple Web Application using ClojureScript and Clojure
3Monday, February 11, 13
Why ClojureScript?
4Monday, February 11, 13
Why JavaScript?
Web 2.0 / Web 3.0
It is lightweight
It is flexible
Functions are first class
It is in every browser
5Monday, February 11, 13
Why not Javascript?
6Monday, February 11, 13
JavaScript as a Compilation Target
Tools
Google Web Toolkit
Languages
CoffeeScript
Dart
7Monday, February 11, 13
“ClojureScript is a new compiler for Clojure that targets JavaScript”
8Monday, February 11, 13
Why ClojureScript?
9Monday, February 11, 13
ClojureScript - Design
JVM
Clojure ClojureScript
JavaScript
10Monday, February 11, 13
ClojureScript - Compiler
No Minification
No OptimizationClojureScript
Compiler
ClojureScript
JavaScript
11Monday, February 11, 13
ClojureScript - Compiler
Uses Google Closure Compiler for minification and optimization
12Monday, February 11, 13
Google Closure Compiler - Optimization
Whitespace Only
Simple Optimization
Advanced Optimization
13Monday, February 11, 13
ClojureScript and Google Closure
ClojureScriptCompiler
ClojureScript
JavaScript Google ClosureCompiler
OptimizedJavaScript
14Monday, February 11, 13
Hello World
lein new cljspress
15Monday, February 11, 13
Project Structure
16Monday, February 11, 13
Edit project.clj
17Monday, February 11, 13
Create src/cljs/cljspress/client.cljs
18Monday, February 11, 13
Create resources/public/index.html
19Monday, February 11, 13
Compile
lein repl
(require 'cljs.closure)
(cljs.closure/build "src/cljs"
{:output-to "resources/public/cljspress.js"
:optimizations :advanced})
20Monday, February 11, 13
Compilation Demystified
(cljs.closure/build source options-map)
21Monday, February 11, 13
Compilation Demystified - Options
:optimizations
:output-to
:output-dir
:pretty-print
:target
:libs
:foreign-libs
:externs
22Monday, February 11, 13
Compilation Demystified - Options
:optimizations
:none
:whitespace
:simple
:advanced
23Monday, February 11, 13
Compilation Demystified - Options
:output-to & :ouput-dir
ClojureScriptCompiler
ClojureScript
JavaScript Google ClosureCompiler
OptimizedJavaScript
:output-dir
:output-to
24Monday, February 11, 13
Loading Optimized Code
<script src="cljspress.js" type="text/javascript"></script>
<script> cljspress.client.main();</script>
25Monday, February 11, 13
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
26Monday, February 11, 13
Compilation Demystified - Options
:pretty-print
Production - {:optimizations :advanced}
Development - {:optimizations :whitespace :pretty-print true}
27Monday, February 11, 13
Hello World ... The Date is ...
28Monday, February 11, 13
Edit src/cljs/cljspress/client.cljs
29Monday, February 11, 13
Edit src/cljs/cljspress/client.cljs
Wrong
30Monday, February 11, 13
JavaScript Interop
The js namespace
Methods and Fields
Constructor Functions
Scope of this
Exceptions
31Monday, February 11, 13
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
32Monday, February 11, 13
JavaScript Interop Methods and Fields
(def m “Hello World”)
(def l (.-length m)
(def r (.join m “-”)
33Monday, February 11, 13
JavaScript Interop Constructor Functions
(def d (js/Date.))
34Monday, February 11, 13
JavaScript Interop Scope of this
(def g (Raphael/color “00ff00”))
(def g (.color js/Raphael “00ff00”))
35Monday, February 11, 13
JavaScript Interop Exceptions
(throw (js/Error. “Bad”))
36Monday, February 11, 13
Edit src/cljs/cljspress/client.cljs
37Monday, February 11, 13
Hello Name ... The Date is ...
38Monday, February 11, 13
Edit project.clj
39Monday, February 11, 13
Create src/clj/cljspress/server.clj
40Monday, February 11, 13
Edit src/cljs/cljspress/client.cljs
41Monday, February 11, 13
Running
Start Server
lein run
Compile CLJS
Goto http://localhost:5000/index
42Monday, February 11, 13
Running
43Monday, February 11, 13
Running
44Monday, February 11, 13
Consuming Libraries
Clojurescript Libraries
Javascript Google Closure Libraries
JavaScript Plain Old Libraries
Compatible with Advanced mode compilation
Not Compatible with Advanced mode compilation
45Monday, February 11, 13
Consuming LibrariesClojureScript Libraries
Simple Case
Include in Classpath
:require or :use
Invoke functions like normal ClojureScript Functions
46Monday, February 11, 13
Consuming LibrariesJavaScript Google Closure Libraries
Reference the relative path in :libs compiler options
:require or :use
Invoke functions using JS interop form
47Monday, February 11, 13
Reference the relative path and namespace in :foreign-libs compilation option
:require or :use
Invoke functions using JS interop form
Consuming LibrariesJavaScript Plain Old Librarieswith Advanced Mode Compilation
48Monday, February 11, 13
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
Consuming LibrariesJavaScript Plain Old Librarieswithout Advanced Mode Compilation
49Monday, February 11, 13
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.”
50Monday, February 11, 13
Edit project.clj to include lein-cljsbuid
51Monday, February 11, 13
Basic commands of lein-cljsbuild
lein trampoline cljsbuild once
lein trampoline cljsbuild auto
lein trampoline cljsbuild clean
52Monday, February 11, 13
Repl please
lein trampoline cljsbuild rhino-repl
53Monday, February 11, 13
Even better Browser Repl
ClojureScript REPL
bREPL Server
bREPL Client
Webpage
JVM Browser54Monday, February 11, 13
bRepl ClientCreate src/cljs/cljspress/core.cljs
55Monday, February 11, 13
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
56Monday, February 11, 13
Recap
All Compilation options
Consuming Different types of libraries
Using lein cljs-build
Interactive Development using Browser REPL
57Monday, February 11, 13
Thank you
@sivajag
58Monday, February 11, 13