kevin lynagh - keming labs · ;;src/clj/my_stuff.clj (ns my-stuff) (defn thing [x] ) (defn another...

86
ClojureScript JavaScript Kevin Lynagh Keming Labs

Upload: others

Post on 17-Oct-2020

2 views

Category:

Documents


0 download

TRANSCRIPT

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

ClojureScriptJavaScript

Kevin LynaghKeming Labs

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

1.

Clojure

SimplerJavaScript

than

is

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

2.JavaScript

MOARFun!

Using

from

ClojureScript

than using JavaScript from JavaScript.

is

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

Safe!

2.JavaScript

MOAR

Using

from

ClojureScript

than using JavaScript from JavaScript.

is

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

Extendable!

2.JavaScript

MOAR

Using

from

ClojureScript

than using JavaScript from JavaScript.

is

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

3..jsThe trip from

.cljsAdventure!

to

is an

(you might get hurt)

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

0.story

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

Imperial

Metric::

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

JavaScript

Clojure::

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

JavaScript

Clojure::

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

JavaScript

Clojure::

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

JSLetstalkabout

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

JS has a lot of

BrendanEich (creator of

JavaScript)

News at 11.stupid in it

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

x = 12;var

Attack Globalsof thekiller

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

x = 12;

Attack Globalsof thekiller

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

ClojureSolution

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

ClojureSolution

Things

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

ClojureSolution

Thingsdon’t

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

ClojureSolution

Thingsdon’t

change

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

JavaScriptNamespaces

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

(function(){ })();

JavaScriptNamespaces

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

(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 );

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

This is

Crazy

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

( )

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

CoffeeScriptwill not

save you( )

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

ClojureSolution

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

ClojureSolution

Use

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

ClojureSolution

UseName-

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

ClojureSolution

UseName-spaces

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

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

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

ClojureNamespaces

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

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

ClojureNamespaces

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

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

;;src/clj/elsewhere.clj

ClojureNamespaces

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

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

;;src/clj/elsewhere.clj

ClojureNamespaces

Page 34: Kevin Lynagh - Keming Labs · ;;src/clj/my_stuff.clj (ns my-stuff) (defn thing [x] ) (defn another [x y] ) ClojureNamespaces
Page 35: Kevin Lynagh - Keming Labs · ;;src/clj/my_stuff.clj (ns my-stuff) (defn thing [x] ) (defn another [x y] ) ClojureNamespaces

1.

Clojure

SimplerJavaScript

than

isReca

p

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

Only

Geniusesuse

functional languages

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

Only

Geniusesuse

functional languages

Myth

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

2.JavaScriptUsing

from

ClojureScript

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

(. js/console log "hello")

InteropReview

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

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

InteropReview

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

(. js/console log "hello")

(.log js/console "hello")

InteropReview

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

(.aMethod js/anObject)

ADifference

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

(.aMethod js/anObject)

(. js/anObject (aMethod))

ADifference

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

Types

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

TypesScalars

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

TypesNativeScalars

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

TypesNativeScalars

Collections

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

TypesNativeScalars

CollectionsForeign ( lazy in Clojure)

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

(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

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

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

JS Objects

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

#js[1 2 3]

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

Reader Literals

?

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

Extendable!

2.JavaScript

MOAR

Using

from

ClojureScript

than using JavaScript from JavaScript.

is

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

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

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

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

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

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

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

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

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

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

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

CompareJavaScript

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

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

CompareJavaScript

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

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

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

CompareJavaScript

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

Build façades

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

(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

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

façades

decoupleintent implementation

Page 62: Kevin Lynagh - Keming Labs · ;;src/clj/my_stuff.clj (ns my-stuff) (defn thing [x] ) (defn another [x y] ) ClojureNamespaces
Page 63: Kevin Lynagh - Keming Labs · ;;src/clj/my_stuff.clj (ns my-stuff) (defn thing [x] ) (defn another [x y] ) ClojureNamespaces

2.JavaScriptUsing

from

ClojureScript

than using JavaScript from JavaScript.

is

Reca

p

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

2.JavaScript

MOARFun!

Using

from

ClojureScript

than using JavaScript from JavaScript.

is

Reca

p

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

Safe!

2.JavaScript

MOAR

Using

from

ClojureScript

than using JavaScript from JavaScript.

is

Reca

p

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

Extendable!

2.JavaScript

MOAR

Using

from

ClojureScript

than using JavaScript from JavaScript.

is

Reca

p

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

3..jsThe trip from

.cljsAdventure!

to

is an

(you might get hurt)

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

3.ClojureScript

until

we thought we knew

showed us

otherwise

What

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

Lets talk about

this

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

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

this this this this

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

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

this this this this

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

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

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

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

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

Bewareapply

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

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

Bewareapply

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

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

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

Bewareapply

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

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

EFERENTIAL TRANSPARENCR Y

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

1.

Clojure

SimplerJavaScript

than

isReca

p

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

2.JavaScript

MOARFun!

Using

from

ClojureScript

than using JavaScript from JavaScript.

is

Reca

p

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

Safe!

2.JavaScript

MOAR

Using

from

ClojureScript

than using JavaScript from JavaScript.

is

Reca

p

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

Extendable!

2.JavaScript

MOAR

Using

from

ClojureScript

than using JavaScript from JavaScript.

is

Reca

p

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

3..jsThe trip from

.cljsAdventure!

to

is an

(you might get hurt)

Recap

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

4.A free pieceunsolicited

Advice:of

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

Tools don’t

makeartistth

e

Page 85: Kevin Lynagh - Keming Labs · ;;src/clj/my_stuff.clj (ns my-stuff) (defn thing [x] ) (defn another [x y] ) ClojureNamespaces
Page 86: Kevin Lynagh - Keming Labs · ;;src/clj/my_stuff.clj (ns my-stuff) (defn thing [x] ) (defn another [x y] ) ClojureNamespaces

Kevin LynaghKeming Labs keminglabs.com/talks

slides, notes, &c.