CoffeeScript and You

coffeescript and you become a better javascript developer

what coffeescript is not

not just a lack of punctuation!

so what iscoffeescript?

coffeescript is...

coffeescript is...“a little language that compiles intoJavaScript”easier to read and writea hybrid of ruby and pythonhelpful

haven’t i heard this before?

other js compilers

other js compilersgwt (java)jsil (.net)pyjamas (python)

gwtimport com.google.gwt.core.client.EntryPoint;import com.google.gwt.user.client.Window;import com.google.gwt.user.client.ui.Button;import com.google.gwt.user.client.ui.ClickListener;import com.google.gwt.user.client.ui.RootPanel;import com.google.gwt.user.client.ui.Widget;/** * HelloWorld application. */public class Hello implements EntryPoint { public void onModuleLoad() { Button b = new Button("Click me", new ClickListener() { public void onClick(Widget sender) { Window.alert("Hello World"); } }); RootPanel.get().add(b); }}

jsilusing System;using System.Collections.Generic;public static class Program { public static void Main (string[] args) { var array = new[] { 1, 2, 4, 8, 16 }; foreach (var i in array) Console.WriteLine(i); var list = new List<int>(array); foreach (var j in list) Console.WriteLine(j); }}

pyjamasfrom pyjamas import Windowfrom pyjamas.ui import RootPanel, Buttondef greet(sender): Window.alert("Hello, AJAX!")b = Button("Click me", greet)RootPanel().add(b)

so why should iembrace (and love) coffeescript?

example

$(function() { $.get(example.php, function(data) { if (data.errors != null) { alert("There was an error!"); } else { $("#content").text(data.message); } })})

$(function() { $.get(example.php, function(data) { if (data.errors != null) { alert("There was an error!") } else { $("#content").text(data.message) } })})

$ function() { $.get example.php, function(data) { if data.errors != null { alert "There was an error!" } else { $("#content").text data.message } }}

$ function() $.get example.php, function(data) if data.errors != null alert "There was an error!" else $("#content").text data.message

$ ()-> $.get example.php, (data)-> if data.errors != null alert "There was an error!" else $("#content").text data.message

$ -> $.get example.php, (data)-> if data.errors? alert "There was an error!" else $("#content").text data.message

$(function() { $.get(example.php, function(data) { if (data.errors != null) { alert("There was an error!"); } else { $("#content").text(data.message); } })})

ranges

# 1, 2, 3, 4, 5[1..5]# 1,..., 4[1...5]#1,...,500[1..500]#5, 4, 3, 2, 1[5..1]#500,...,1[500..1]

var _i, _j, _results, _results2;[1, 2, 3, 4, 5];[1, 2, 3, 4];(function() { _results = []; for (_i = 1; _i <= 500; _i++){ _results.push(_i); } return _results;}).apply(this, arguments);[5, 4, 3, 2, 1];(function() { _results2 = []; for (_j = 500; _j >= 1; _j--){ _results2.push(_j); } return _results2;}).apply(this, arguments);

conditionals

if a console.log "a is true"else console.log "a is false"unless a console.log "a is false"console.log "a is false" unless a

if (a) { console.log("a is true");} else { console.log("a is false");}if (!a) { console.log("a is false");}if (!a) { console.log("a is false");}

if a is A console.log "a is A"if a == A console.log "a is A"

if (a === A) { console.log("a is A");}if (a === A) { console.log("a is A");}

existential operator

console?.log "Only log if there is aconsole"if $("#bid_form")?.html()? and @model? doSomething()

var _ref;if (typeof console !== "undefined" && console !== null) { console.log("Only log if there is a console");}if ((((_ref = $("#bid_form")) != null ? _ref.html() : void0) != null) && (this.model != null)) { doSomething();}

functions

sayHi = (name)-> console.log "hello: #{name}"sayHi marksayHi(mark)sayBye = -> console.log "bye!"sayBye()

var sayBye, sayHi;sayHi = function(name) { return console.log("hello: " + name);};sayHi(mark);sayHi(mark);sayBye = function() { return console.log("bye!");};sayBye();

bound functions

class User constructor: (@name) -> sayHi: -> console.log "Hello, #{@name}"u1 = new User(mark)u2 = new User(bob)jqxhr = $.get "example.php", -> alert "success"jqxhr.success u1.sayHijqxhr.success u2.sayHi

var User, jqxhr, u1, u2;User = (function() { function User(name) { this.name = name; } User.prototype.sayHi = function() { return console.log("Hello, " + this.name); }; return User;})();u1 = new User(mark);u2 = new User(bob);jqxhr = $.get("example.php", function() { return alert("success");});jqxhr.success(u1.sayHi);jqxhr.success(u2.sayHi);

Hello, undefinedHello, undefined

class User constructor: (@name) -> sayHi: -> console.log "Hello, #{@name}"u1 = new User(mark)u2 = new User(bob)jqxhr = $.get "example.php", -> alert "success"jqxhr.success u1.sayHijqxhr.success u2.sayHi

class User constructor: (@name) -> sayHi: => console.log "Hello, #{@name}"u1 = new User(mark)u2 = new User(bob)jqxhr = $.get "example.php", -> alert "success"jqxhr.success u1.sayHijqxhr.success u2.sayHi

var User, jqxhr, u1, u2;var __bind = function(fn, me){ return function(){ returnfn.apply(me, arguments); }; };User = (function() { function User(name) { this.name = name; this.sayHi = __bind(this.sayHi, this); } User.prototype.sayHi = function() { return console.log("Hello, " + this.name); }; return User;})();u1 = new User(mark);u2 = new User(bob);jqxhr = $.get("example.php", function() { return alert("success");});jqxhr.success(u1.sayHi);jqxhr.success(u2.sayHi);

Hello, markHello, bob

default arguments

createElement = (name, attributes = {}) -> obj = document.createElement name for key, val of attributes obj.setAttribute key, val obj

var createElement;createElement = function(name, attributes) { var key, obj, val; if (attributes == null) { attributes = {}; } obj = document.createElement(name); for (key in attributes) { val = attributes[key]; obj.setAttribute(key, val); } return obj;};

a = AmyFunc = -> a = AAA b = B

(function() { var a, myFunc; a = A; myFunc = function() { var b; a = AAA; return b = B; };}).call(this);

array loops

arr = [1..5]for num in arr console.log num

var arr, num, _i, _len;arr = [1, 2, 3, 4, 5];for (_i = 0, _len = arr.length; _i < _len; _i++) { num = arr[_i]; console.log(num);}

classeseasy to deﬁneeasy to extendhelp keep code clean

class Employee constructor: (@name, @options = {})-> job: -> @options.jobmark = new Employee(Mark, job: Developer)mark.job() # => Developermark.name # => Mark

var Employee, mark;Employee = (function() { function Employee(name, options) { this.name = name; this.options = options != null ? options : {}; } Employee.prototype.job = function() { return this.options.job; }; return Employee;})();mark = new Employee(Mark, { job: Developer});mark.job();mark.name;

extending classes

class Manager extends Employee job: -> "$$$ #{super}"steve = new Manager(Steve, job: CEO)steve.job() # => $$$ CEOsteve.name # => Steve

var Manager, steve;var __hasProp = Object.prototype.hasOwnProperty, __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor; child.__super__ = parent.prototype; return child;};Manager = (function() { __extends(Manager, Employee); function Manager() { Manager.__super__.constructor.apply(this, arguments); } Manager.prototype.job = function() { return "$$$ " + Manager.__super__.job.apply(this, arguments); }; return Manager;})();steve = new Manager(Steve, { job: CEO});steve.job();steve.name;

what the hell is @?

class User constructor: (@name)-> @new_record = true @find: (id)-> # do some work

class User constructor: (name)-> @name = name @new_record = true @find: (id)-> # do some work

var User;User = (function() { function User(name) { this.name = name; this.new_record = true; } User.find = function(id) {}; return User;})();

thank you @markbates http://www.markbates.comhttp://www.slideshare.net/markykang/coffeescript-and-you

http://paper.li	101
http://paper.li	101
http://introf11sou.wikispaces.com	32
http://a0.twimg.com	20
http://a0.twimg.com	20
http://us-w1.rockmelt.com	8
http://twicli.neocat.jp	2

CoffeeScript and You

by Mark

Accessibility

Categories

Upload Details

Usage Rights

7 Embeds 284

Statistics

CoffeeScript and You Presentation Transcript