getting started with clojurescript

getting started with cljs- Siva Jagadeesan

1Monday, February 11, 13

About me

Siva Jagadeesan

Zolodeck :: Clojure + Storm + Datomic + CLJS

@sivajag

[email protected]


mailto:[email protected]


What we will cover today

Compiling ClojureScript

Javascript Interop

Setting up development Environment

Building a simple Web Application using ClojureScript and Clojure


Why ClojureScript?


Why JavaScript?

Web 2.0 / Web 3.0

It is lightweight

It is flexible

Functions are first class

It is in every browser


Why not Javascript?


JavaScript as a Compilation Target

Tools

Google Web Toolkit

Languages

CoffeeScript

Dart


“ClojureScript is a new compiler for Clojure that targets JavaScript”


Why ClojureScript?


ClojureScript - Design

JVM

Clojure ClojureScript

JavaScript


ClojureScript - Compiler

No Minification

No OptimizationClojureScript

Compiler

ClojureScript

JavaScript


ClojureScript - Compiler

Uses Google Closure Compiler for minification and optimization


Google Closure Compiler - Optimization

Whitespace Only

Simple Optimization

Advanced Optimization


ClojureScript and Google Closure

ClojureScriptCompiler

ClojureScript

JavaScript Google ClosureCompiler

OptimizedJavaScript


Hello World

lein new cljspress


Project Structure


Edit project.clj


Create src/cljs/cljspress/client.cljs


Create resources/public/index.html


Compile

lein repl

(require 'cljs.closure)

(cljs.closure/build "src/cljs"

{:output-to "resources/public/cljspress.js"

:optimizations :advanced})


Compilation Demystified

(cljs.closure/build source options-map)


Compilation Demystified - Options

:optimizations

:output-to

:output-dir

:pretty-print

:target

:libs

:foreign-libs

:externs



:optimizations

:none

:whitespace

:simple

:advanced



:output-to & :ouput-dir

ClojureScriptCompiler

ClojureScript

JavaScript Google ClosureCompiler

OptimizedJavaScript

:output-dir

:output-to


Loading Optimized Code

<script src="cljspress.js" type="text/javascript"></script>

<script> cljspress.client.main();</script>


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



:pretty-print

Production - {:optimizations :advanced}

Development - {:optimizations :whitespace :pretty-print true}


Hello World ... The Date is ...


Edit src/cljs/cljspress/client.cljs



Wrong


JavaScript Interop

The js namespace

Methods and Fields

Constructor Functions

Scope of this

Exceptions


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


JavaScript Interop Methods and Fields

(def m “Hello World”)

(def l (.-length m)

(def r (.join m “-”)


JavaScript Interop Constructor Functions

(def d (js/Date.))


JavaScript Interop Scope of this

(def g (Raphael/color “00ff00”))

(def g (.color js/Raphael “00ff00”))


JavaScript Interop Exceptions

(throw (js/Error. “Bad”))


Hello Name ... The Date is ...


Edit project.clj


Create src/clj/cljspress/server.clj


Running

Start Server

lein run

Compile CLJS

Goto http://localhost:5000/index


http://localhost:5000/index

http://localhost:5000/index

Running


Consuming Libraries

Clojurescript Libraries

Javascript Google Closure Libraries

JavaScript Plain Old Libraries

Compatible with Advanced mode compilation

Not Compatible with Advanced mode compilation


Consuming LibrariesClojureScript Libraries

Simple Case

Include in Classpath

:require or :use

Invoke functions like normal ClojureScript Functions


Consuming LibrariesJavaScript Google Closure Libraries

Reference the relative path in :libs compiler options

:require or :use

Invoke functions using JS interop form


Reference the relative path and namespace in :foreign-libs compilation option

:require or :use


Consuming LibrariesJavaScript Plain Old Librarieswith Advanced Mode Compilation


Create an externs file and add it to :externs compilation option

Include the library directly as script tag in HTML


Consuming LibrariesJavaScript Plain Old Librarieswithout Advanced Mode Compilation


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.”


Edit project.clj to include lein-cljsbuid


Basic commands of lein-cljsbuild

lein trampoline cljsbuild once

lein trampoline cljsbuild auto

lein trampoline cljsbuild clean


Repl please

lein trampoline cljsbuild rhino-repl


Even better Browser Repl

ClojureScript REPL

bREPL Server

bREPL Client

Webpage

JVM Browser54Monday, February 11, 13

bRepl ClientCreate src/cljs/cljspress/core.cljs


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


Recap

All Compilation options

Consuming Different types of libraries

Using lein cljs-build

Interactive Development using Browser REPL


Thank you

@sivajag

[email protected]




getting started with clojurescript

Documents