CoffeeScript and You
Upcoming SlideShare
Loading in...5
×
 

CoffeeScript and You

on

  • 4,944 views

What is CoffeeScript? Why is everyone talking about? How can it make me a better JavaScript developer? Let's find out together. We will discuss what CoffeeScript is, how it works, and why you should ...

What is CoffeeScript? Why is everyone talking about? How can it make me a better JavaScript developer? Let's find out together. We will discuss what CoffeeScript is, how it works, and why you should use it. We'll cover the basics of writing CoffeeScript and find out how the => function call is your best friend for writing jQuery AJAX calls. You'll wonder where CoffeeScript has been your whole life. You may also want to buy CoffeeScript dinner and drinks afterwards, but please try to remember it's just a language (but it's flattered anyway).

Presented at jQueryConf Boston 10/2/2011

Statistics

Views

Total Views
4,944
Views on SlideShare
4,660
Embed Views
284

Actions

Likes
2
Downloads
53
Comments
0

7 Embeds 284

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
More...

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

CoffeeScript and You CoffeeScript and You Presentation Transcript

  • 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;};
  • scope
  • 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 defineeasy 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