getting started with cljs- Siva Jagadeesan

1Monday, February 11, 13

About me

Siva Jagadeesan

Zolodeck :: Clojure + Storm + Datomic + CLJS

@sivajag

siva@zololabs.com

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

siva@zololabs.com

58Monday, February 11, 13