Clojurescriptup and running

Timo Sulg, @timgluz

@Helsinki/JS, 27th November, 2013

What? And why?Was? und warum?

source:CoffeScript wiki has ~200 langs

- Erik Meijer, author of Rxand Linq

JS as assembler for web JavaScript is an assembly language. The JavaScript + HTML

generate is like a .NET assembly. The browser can execute it, but nohuman should really care what’s there.

source: Scott Hansemal's blog

Photoproof

Clojure's brith

Clojure?1. Functional2. Dynamically typed3. Lisp

Clojure/Script?Subset of Clojure

No concurrency primitivesInfluences from Host

Inner parts

source: Stuart Sierra's "Clojure - getting up and running;"

Best parts1. Generic data primitives2. Highly composable3. Expressinevess4. Extensible5. core.async

Little peak into syntaxquick steptrough

source: Kanaka's cheatsheet

Getting started;; into js console(.log js/console "Hello world!");

;; into Browser REPL(println "Hello world")

Code modularity(ns cljs.world.hello (:require '[stars.sun :as sun]) (:use '[planets.earth :only [day, night] :as earth]))

Primitive collections;; arrays(def a (array))(def a (array 1 2 3))(aget a 1) ;; 2

;; object(def o (js-obj))(def o (js-obj "foo" 1 "bar" 2))

Generic datastructures;; list(def a (list 1 2 3))(def b '(1 2 3))

;; vector(def c (vector 1 2 3))(def d [1 2 3 4])

;; sets(def f (set 1 1 2 3))(def g #{1,2,3})

;; hash-maps(def h (hash-map :foo 1 :bar 2 :baz 3))(def i {:foo 1, :bar 2, :bar 3})

Equality(def a ["red" "blue" "green"])(def b ["red" "blue" "green"])(= a b) ;; => true

Conditionals(if (pos? (count bug-numbers)) (println "Not ready for release") (println "Keep pushing"))

(when (> 0 x 12) (str "valid tie value"))

(cond (< n 0) "negative" (> n 0) "positive" :else "zero"))

Functions#(do-smt %1)(.on the-btn 'click' #(do-smt %1))

(def fun (fn [] (println "Lot of fun.")))

(defn fun [] (println "Lot of fun."))

(def fun "here is example of multiple arity" ([] nil) ([_] 1) ([_ _] 2) ([_ _ _] 3))

Destructuring;; can always destructure in binding expression;; including, let, function arguments, loops, etc.

(def m {:first "Bob" :middle "J" :last "Smith"})

(let [{:keys [first middle last]} m] ...)

(def color [255 255 100 0.5])

(let [[r g _ a] color] ...)

Variable arguments;; all arguments beyond two will be placed in a;; sequence bound to rest

(defn foo [a b & rest] ...)

Named parameters &defaults

(defn foo [& {:keys [bar baz]}] ...)

(foo :bar 1 :baz 2)

(defn foo [& {:keys [bar baz] :or {bar "default1", baz "default2"}}] ...)

Iterators(doseq [item [1,2,3]] (println item))(dotimes [i 5] (println "ABC"))

(loop [i 0] (println i) (recur (inc i)))

;;for;map;reduce;filter

MoreJoel Martin, @bus_kanaka, has done great job.

Source:http://kanaka.github.io/clojurescript/web/synonym.html

DemosSetting up

Interop with JSDommy in Action

Core.Async

Setting upand getting running

Setting up environmentDownload the (or on Windows lein.bat)Place it on your $PATH where your shell can find it (eg.~/bin)Set it to be executable (chmod a+x ~/bin/lein)Check the version: $> lein version

lein script

more info: http://leiningen.org/

Starting with new project$> lein help new

$> lein new ex1_intro

Result

Change into this

Set up project's file(defproject ex1_intro "0.1.0-SNAPSHOT" :description "Our initial project." :url "http://example.com/FIXME" :license {:name "Eclipse Public License" :url "http://www.eclipse.org/legal/epl-v10.html"} :dependencies [ ;;http://www.versioneye.com/java/org.clojure:clojure/1.5.1 [org.clojure/clojure "1.5.1"] ;;http://www.versioneye.com/java/org.clojure:clojurescript/0.0-2030 [org.clojure/clojurescript "0.0-2030"] [lein-light-nrepl "0.0.7"]]

:plugins [[lein-cljsbuild "1.0.1-SNAPSHOT"] ;; makes clojurescripting easier [lein-simpleton "1.2.0"]] :repl-options {:nrepl-middleware [lighttable.nrepl.handler/lighttable-ops]} ;; comprehensive example: https://github.com/emezeske/lein-cljsbuild/blob/master/sample :cljsbuild { :builds [{ ; The path to the top-level ClojureScript source directory: :source-paths ["src/cljs"] :compiler { :output-to "resources/public/js/core.js" :optimizations :whitespace ; :none, :simple, :advanced :warnings true :pretty-print true}}]})

ex1_intro/core.cljs(ns ex1-intro.core ;; use when you want to repl into this page (:require [clojure.browser.repl :as repl]))

(defn ̂:export main [] ;;sorry about that (.write js/document "<h1 style="\"color:red;\""> Hello, Hel/JS!</h1>")

;;this part is required for connecting into b-repl(repl/connect "http://localhost:9000/repl"))

index.html<!--<h1 id = "area1">First demo</h1><script src="/js/core.js"></script><script type="text/example"> ex1_intro.core.main(); //calling our first app;</script>-->

Run it$> lein deps ;; only when you changed deps$> lein cljsbuild clean ;;$> lein cljsbuild once ;; or use auto$> lein simpleton 3000 file :from resources/public$> goto http://127.0.0.1:3000/index

REPLing with Rhino$> lein trampoline cljsbuild repl-rhino

$> (dotimes [i 5] (println i))$> :cljs/quit

Interop with JSLeap.JS

Dommya app for FirefoxOS

Run it$> lein repl$> (require '[foxyeye.handler] :reload-all)$> goto: 127.0.0.1:8080...$> (foxyeye.handler/stop-server)

Mainpage

State of projectdependencies

Search

Dommy(defn ̂:export init [] (.log js/console "Search app is initialized") (dommy/listen! (sel1 :#search-btn) :click on-search) (doseq [item (sel :.facets-language-item)] (dommy/listen! item :click toggle-facets-item)))

Templating with Hiccups(require '[foxyeye.views.search :as search-view])

...

(defn render [& content] (html5 (include-css "/css/modern.css" "/css/modern-responsive.css" "/css/app.css") [:body.metrouicss [:section#application {:class "grid centered" :style "max-width: 380px; background: white;"} content]]))

(render (search-view search-items))

Source: foxyeye.search.cljs

Little Dommy in Action;; get all selected languages(defn get-selected-langs [& selectors] (apply str (interpose \, (for [selected (sel selectors)] (dommy/attr selected :data-language)))))

Source: foxyeye.search.cljs

Core.asyncthe last demo

Linkshttps://github.com/timgluz/heljshttps://github.com/clojure/clojurescripthttp://clojure.org/cheatsheethttps://himera.herokuapp.com/synonym.htmlhttps://github.com/magomimmo/modern-cljshttp://kanaka.github.io/clojurescript/web/synonym.htmlhttp://lukevanderhart.com/2011/09/30/using-javascript-and-clojurescript.html

THE END@timgluz