Kevin Lynagh - Keming Labs · ;;src/clj/my_stuff.clj (ns my-stuff) (defn thing [x] ) (defn another...

ClojureScriptJavaScript

Kevin LynaghKeming Labs

1.

Clojure

SimplerJavaScript

than

is

2.JavaScript

MOARFun!

Using

from

ClojureScript

than using JavaScript from JavaScript.

is

Safe!

2.JavaScript

MOAR

Using

from

ClojureScript

than using JavaScript from JavaScript.

is

Extendable!

2.JavaScript

MOAR

Using

from

ClojureScript

than using JavaScript from JavaScript.

is

3..jsThe trip from

.cljsAdventure!

to

is an

(you might get hurt)

0.story

Imperial

Metric::

JavaScript

Clojure::

JavaScript

Clojure::

JavaScript

Clojure::

JSLetstalkabout

JS has a lot of

BrendanEich (creator of

JavaScript)

—

News at 11.stupid in it

x = 12;var

Attack Globalsof thekiller

x = 12;

Attack Globalsof thekiller

ClojureSolution

ClojureSolution

Things

ClojureSolution

Thingsdon’t

ClojureSolution

Thingsdon’t

change

JavaScriptNamespaces

(function(){ })();

JavaScriptNamespaces

(function( $ ){

var methods = { init: function( options ) {}, show: function( ) {}, hide: function( ) {}, update: function( content ) {} };

$.fn.tooltip = function( method ) { if ( methods[method] ) { return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 )); } else if ( typeof method === 'object' || ! method ) { return methods.init.apply( this, arguments ); } else { $.error( 'Method ' + method + ' does not exist!' ); } };

})( jQuery );

This is

Crazy

( )

CoffeeScriptwill not

save you( )

ClojureSolution

ClojureSolution

Use

ClojureSolution

UseName-

ClojureSolution

UseName-spaces

;;src/clj/my_stuff.clj(ns my-stuff)

(defn thing [x] )(defn another [x y] )

ClojureNamespaces

;;src/clj/elsewhere.clj(ns elsewhere)

ClojureNamespaces

(ns elsewhere (:use [my-stuff :only [thing]]))

;;src/clj/elsewhere.clj

ClojureNamespaces

(ns elsewhere (:use [my-stuff :only [thing] :rename {thing other-thing}]))

;;src/clj/elsewhere.clj

ClojureNamespaces

1.

Clojure

SimplerJavaScript

than

isReca

p

Only

Geniusesuse

functional languages

Only

Geniusesuse

functional languages

Myth

2.JavaScriptUsing

from

ClojureScript

(. js/console log "hello")

InteropReview

(. js/console log "hello")js/

InteropReview

(. js/console log "hello")

(.log js/console "hello")

InteropReview

(.aMethod js/anObject)

ADifference

(.aMethod js/anObject)

(. js/anObject (aMethod))

ADifference

Types

TypesScalars

TypesNativeScalars

TypesNativeScalars

Collections

TypesNativeScalars

CollectionsForeign ( lazy in Clojure)

(array 1 2 3) ;;=> [1,2,3];(apply array [1 2 3]) ;;=> [1,2,3];

(cljs.core.Vector/fromArray js/x) ;;=> [1 2 3]

JS array <=> Cljs vector

(let [o (js-obj)] (aset o "x" 1) (set! (.y o) 2) o) ;;=> {"x":1,"y":2};

JS Objects

#js[1 2 3]

#js{"key1" "val1", "key2" "val2"}

Reader Literals

?

Extendable!

2.JavaScript

MOAR

Using

from

ClojureScript

than using JavaScript from JavaScript.

is

jQuery.select("#main") .append("<span>") .text("hello");

jQuery.select("#main") .append("<span>") .text("hello");

(-> js/jQuery (.select "#main")

(.text "hello")) (.append "<span>")

jQuery.select("#main") .append("<span>") .text("hello");

(-> js/jQuery (.select "#main")

(.text "hello")) (my-append "<span>")

CompareJavaScript

var $main = jQuery.select("#main");my_appender($main, "<span>");$main.text("hello");

CompareJavaScript

var $main = jQuery.select("#main");my_appender($main, "<span>");$main.text("hello");

jQuery.fn.my_appender = function(x){};

CompareJavaScript

Build façades

(defn append [sel node-type] (.append sel node-type))

(defn select [sel selector] (.select sel selector))

(-> js/jQuery (select "#main") (append "svg"))

Build façades

façades

decoupleintent implementation

2.JavaScriptUsing

from

ClojureScript

than using JavaScript from JavaScript.

is

Reca

p

2.JavaScript

MOARFun!

Using

from

ClojureScript

than using JavaScript from JavaScript.

is

Reca

p

Safe!

2.JavaScript

MOAR

Using

from

ClojureScript

than using JavaScript from JavaScript.

is

Reca

p

Extendable!

2.JavaScript

MOAR

Using

from

ClojureScript

than using JavaScript from JavaScript.

is

Reca

p

3..jsThe trip from

.cljsAdventure!

to

is an

(you might get hurt)

3.ClojureScript

until

we thought we knew

showed us

otherwise

What

Lets talk about

this

var f = function(){ return this; };

this this this this

var f = function(){ return this; };f(); //=> DOMWindow

this this this this

var dog = {};dog.name = "Rex";dog.bark = function(){ return "My name is " + this.name;};

var f = function(){ return this; };f(); //=> DOMWindow

this this this this

var dog = {};dog.name = "Rex";dog.bark = function(){ return "My name is " + this.name;};

var f = function(){ return this; };

dog.bark(); // => "My name is Rex"

f(); //=> DOMWindow

this this this this

Bewareapply

(apply (. js/dog bark) 1 2 3)

Bewareapply

(apply (. js/dog bark) 1 2 3)

cljs.core.apply.call( null, dog.bark, cljs.core.Vector.fromArray([1,2,3]));

Bewareapply

YOU WANT IT TO BE ONE WAY. BUT IT’S THE OTHER WAY.

EFERENTIAL TRANSPARENCR Y

1.

Clojure

SimplerJavaScript

than

isReca

p

2.JavaScript

MOARFun!

Using

from

ClojureScript

than using JavaScript from JavaScript.

is

Reca

p

Safe!

2.JavaScript

MOAR

Using

from

ClojureScript

than using JavaScript from JavaScript.

is

Reca

p

Extendable!

2.JavaScript

MOAR

Using

from

ClojureScript

than using JavaScript from JavaScript.

is

Reca

p

3..jsThe trip from

.cljsAdventure!

to

is an

(you might get hurt)

Recap

4.A free pieceunsolicited

Advice:of

Tools don’t

makeartistth

e

Kevin LynaghKeming Labs keminglabs.com/talks

slides, notes, &c.