Fork me on GitHub
@timglabisch | blog

npm install -g coffee-script

@timglabisch

bei fragen - fragen! ;)

wer nutzt

- CoffeeScript?

- JavaScript?

- "oop"?

... compile to JavaScript ...?

Coffeescript Basic's

syntax und so.

live coding!!!

var \u1000 = '😻'; က
if(0 === -0) { var a = 1; } a
THERE IS NO FUCKING MAGIC, REALLY THERE(IS(NO(FUCKING(MAGIC, REALLY)))) THERE IS ( NO ( FUCKING MAGIC, REALLY) )
(function() { return 5; })()
a = ->->->->->5 a()()()()()
console.log "up" if console?.log
a = (cb) -> cb? "data"
x('._foo').html """ a href="#{getRouter().url 'user', user.id}"> img src="#{getUserImageService().getImage(user).getSrc()}"/> /a> """
document.a ?= c
function add(a, b) { return a + b; } add("Why am I a ", typeof + "");
$(document).ready(function() { $("body").removeClass("noscript") });

The golden rule of CoffeeScript is:


"It's just JavaScript".

The compiled output is readable
and pretty-printed, ...

will work in every
JavaScript runtime, ...

... and tends to run as fast or faster
than the equivalent
handwritten JavaScript.

ASM.js for speed

GWT for nerds working @google

Dart for hipsters

JavaScript for runtime

CoffeeScript for humans (and PHP dev's :))

var someInt = 4; add = function(x, y) { return x + y; } add(someInt, add(someInt, 5));
greeter = (name) -> "hello " + name x = (cb, arr) -> cb name for name in arr x(greeter, ["Andy", "Mario", "..."]).join ', '
names = -> name for name in ["Andy", 'Maro', '...'] names().join ', '
$('meta') .toArray() .map((el) -> $(el).attr 'name') .filter((x) -> x && x.length) .reduce((a, b) -> a + ', ' + b)
$('some_selector').css({top: 42, left: 42})
$.ajax url: url timeout: 5 data: form: "workspace" dataType: "jsonp" success: (data) => @setXData data
x = (keyCode) -> switch keyCode when 38 command = "previous" when 40 command = "next" return command if command x 38
x = (keyCode) -> switch keyCode when 38 then "previous" when 40 then "next" x 38

CoffeeScript in the wild

$('#dialog').dialog()
var a = (function() { function a() {} a.prototype.foo = function() { return "bar"; }; return a; })(); (new a).foo()

a bit oop

class a foo: -> "bar" (new a).foo()
class a constructor: -> @foo = foo; (new a "bar").foo
class a setFoo: (@foo) -> @ getFoo: -> @foo (new a "bar").foo
class a constructor: (@foo = new ( class a: -> 5 )) -> (new a).foo.a()
class a @foo: -> "bar" a.foo()
class a foo: -> "bar" class b extends a (new a).foo()
class a constructor: (@dom) -> @dom.find('.foo').click (e) -> @handelClickFoo e handelClickFoo: (e) -> 0

real world application

class main di: null getContainer: -> return @di if @di @di = new di @di.configure factories: dispatcher: (di)-> new dispatcher di controllerHello: (di) -> new controllerHello di.get('serviceGreeter') serviceGreeter: -> new serviceGreeter @di handle: (request) -> @getContainer().get('dispatcher')().dispatch request.controller (new main).handle controller: 'Hello'

CoffeeScript

using php Storm.


CoffeeScript

using CoffeeScript.

clean:
	find . -iname "*.js" -exec rm {} \;
	find . -iname "*.map" -exec rm {} \;
	rm -rf build

js:
	coffee -bjc -o build/ \
	lib/di.coffee \
	lib/dispatcher.coffee \
	controller/abstract.coffee \
	controller/hello.coffee \
	service/greeter.coffee \
	main.coffee

run: clean js
	reset
	node build/.js
... 
make run
... 
node build/.js
YAAYYYY!!
hello!! folks

Demo?

gut?

js:
	coffee -bjc -o build/ \
	lib/di.coffee \
	lib/dispatcher.coffee \
	controller/abstract.coffee \
	controller/hello.coffee \
	service/greeter.coffee \
	main.coffee
_di = require './lib/di.coffee' _dispatcher = require './lib/dispatcher.coffee' _controllerLeft = require './controller/left.coffee' _controllerContent = require './controller/content.coffee' _controllerFooter = require './controller/footer.coffee' _serviceGreeter = require './service/greeter.coffee' class main di: null getContainer: -> return @di if @di @di = new _di @di.configure factories: dispatcher: (di)-> new _dispatcher di controllerLeft: (di) -> new _controllerLeft di.get('serviceGreeter') controllerContent: (di) -> new _controllerContent controllerFooter: (di) -> new _controllerFooter serviceGreeter: -> new _serviceGreeter @di handle: (request) -> @getContainer().get('dispatcher')().dispatchRoute request app = new main $('document').ready -> $('.app_controller').each (i, el) -> app.handle controller: $(el).data('controller') dom: $(el)

Demo?

mehr?



Fragen?

thx.



@timglabisch