Your SlideShare is downloading. ×
0
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...
jsilusing System;using System.Collections.Generic;public static class Program {    public static void Main (string[] args)...
pyjamasfrom pyjamas import Windowfrom pyjamas.ui import RootPanel, Buttondef greet(sender):    Window.alert("Hello, AJAX!"...
so why should iembrace (and love)  coffeescript?
example
$(function() {   $.get(example.php, function(data) {      if (data.errors != null) {        alert("There was an error!"); ...
$(function() {   $.get(example.php, function(data) {      if (data.errors != null) {        alert("There was an error!")  ...
$ function() {  $.get example.php, function(data) {    if data.errors != null {      alert "There was an error!"    } else...
$ function()  $.get example.php, function(data)    if data.errors != null      alert "There was an error!"    else      $(...
$ ()->  $.get example.php, (data)->    if data.errors != null       alert "There was an error!"    else       $("#content"...
$ ->  $.get example.php, (data)->     if data.errors?       alert "There was an error!"     else       $("#content").text ...
$(function() {   $.get(example.php, function(data) {      if (data.errors != null) {        alert("There was an error!"); ...
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++){...
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" unle...
if (a) {  console.log("a   is true");} else {  console.log("a   is false");}if (!a) {  console.log("a   is false");}if (!a...
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 ((((...
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 = funct...
bound functions
class User  constructor: (@name) ->  sayHi: ->    console.log "Hello, #{@name}"u1 = new User(mark)u2 = new User(bob)jqxhr ...
var User, jqxhr, u1, u2;User = (function() {  function User(name) {     this.name = name;  }  User.prototype.sayHi = funct...
Hello, undefinedHello, undefined
class User  constructor: (@name) ->  sayHi: ->    console.log "Hello, #{@name}"u1 = new User(mark)u2 = new User(bob)jqxhr ...
class User  constructor: (@name) ->  sayHi: =>    console.log "Hello, #{@name}"u1 = new User(mark)u2 = new User(bob)jqxhr ...
var User, jqxhr, u1, u2;var __bind = function(fn, me){ return function(){ returnfn.apply(me, arguments); }; };User = (func...
Hello, markHello, bob
default arguments
createElement = (name, attributes = {}) ->  obj = document.createElement name  for key, val of attributes    obj.setAttrib...
var createElement;createElement = function(name, attributes) {   var key, obj, val;   if (attributes == null) {     attrib...
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.l...
classeseasy to defineeasy to extendhelp keep code clean
class Employee  constructor: (@name, @options = {})->  job: ->    @options.jobmark = new Employee(Mark, job: Developer)mar...
var Employee, mark;Employee = (function() {  function Employee(name, options) {     this.name = name;     this.options = o...
extending classes
class Manager extends Employee  job: ->    "$$$ #{super}"steve = new Manager(Steve, job: CEO)steve.job() # => $$$ CEOsteve...
var Manager, steve;var __hasProp = Object.prototype.hasOwnProperty, __extends = function(child, parent) {   for (var key i...
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 = funct...
thank you                   @markbates           http://www.markbates.comhttp://www.slideshare.net/markykang/coffeescript-...
Upcoming SlideShare
Loading in...5
×

CoffeeScript and You

4,904

Published on

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

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,904
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
54
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • \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
  • Transcript of "CoffeeScript and You"

    1. 1. coffeescript and you become a better javascript developer
    2. 2. what coffeescript is not
    3. 3. not just a lack of punctuation!
    4. 4. so what iscoffeescript?
    5. 5. coffeescript is...
    6. 6. coffeescript is...“a little language that compiles intoJavaScript”easier to read and writea hybrid of ruby and pythonhelpful
    7. 7. haven’t i heard this before?
    8. 8. other js compilers
    9. 9. other js compilersgwt (java)jsil (.net)pyjamas (python)
    10. 10. 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); }}
    11. 11. 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); }}
    12. 12. pyjamasfrom pyjamas import Windowfrom pyjamas.ui import RootPanel, Buttondef greet(sender): Window.alert("Hello, AJAX!")b = Button("Click me", greet)RootPanel().add(b)
    13. 13. so why should iembrace (and love) coffeescript?
    14. 14. example
    15. 15. $(function() { $.get(example.php, function(data) { if (data.errors != null) { alert("There was an error!"); } else { $("#content").text(data.message); } })})
    16. 16. $(function() { $.get(example.php, function(data) { if (data.errors != null) { alert("There was an error!") } else { $("#content").text(data.message) } })})
    17. 17. $ function() { $.get example.php, function(data) { if data.errors != null { alert "There was an error!" } else { $("#content").text data.message } }}
    18. 18. $ function() $.get example.php, function(data) if data.errors != null alert "There was an error!" else $("#content").text data.message
    19. 19. $ ()-> $.get example.php, (data)-> if data.errors != null alert "There was an error!" else $("#content").text data.message
    20. 20. $ -> $.get example.php, (data)-> if data.errors? alert "There was an error!" else $("#content").text data.message
    21. 21. $(function() { $.get(example.php, function(data) { if (data.errors != null) { alert("There was an error!"); } else { $("#content").text(data.message); } })})
    22. 22. ranges
    23. 23. # 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]
    24. 24. 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);
    25. 25. conditionals
    26. 26. 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
    27. 27. 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");}
    28. 28. if a is A console.log "a is A"if a == A console.log "a is A"
    29. 29. if (a === A) { console.log("a is A");}if (a === A) { console.log("a is A");}
    30. 30. existential operator
    31. 31. console?.log "Only log if there is aconsole"if $("#bid_form")?.html()? and @model? doSomething()
    32. 32. 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();}
    33. 33. functions
    34. 34. sayHi = (name)-> console.log "hello: #{name}"sayHi marksayHi(mark)sayBye = -> console.log "bye!"sayBye()
    35. 35. var sayBye, sayHi;sayHi = function(name) { return console.log("hello: " + name);};sayHi(mark);sayHi(mark);sayBye = function() { return console.log("bye!");};sayBye();
    36. 36. bound functions
    37. 37. 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
    38. 38. 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);
    39. 39. Hello, undefinedHello, undefined
    40. 40. 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
    41. 41. 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
    42. 42. 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);
    43. 43. Hello, markHello, bob
    44. 44. default arguments
    45. 45. createElement = (name, attributes = {}) -> obj = document.createElement name for key, val of attributes obj.setAttribute key, val obj
    46. 46. 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;};
    47. 47. scope
    48. 48. a = AmyFunc = -> a = AAA b = B
    49. 49. (function() { var a, myFunc; a = A; myFunc = function() { var b; a = AAA; return b = B; };}).call(this);
    50. 50. array loops
    51. 51. arr = [1..5]for num in arr console.log num
    52. 52. 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);}
    53. 53. classeseasy to defineeasy to extendhelp keep code clean
    54. 54. class Employee constructor: (@name, @options = {})-> job: -> @options.jobmark = new Employee(Mark, job: Developer)mark.job() # => Developermark.name # => Mark
    55. 55. 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;
    56. 56. extending classes
    57. 57. class Manager extends Employee job: -> "$$$ #{super}"steve = new Manager(Steve, job: CEO)steve.job() # => $$$ CEOsteve.name # => Steve
    58. 58. 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;
    59. 59. what the hell is @?
    60. 60. class User constructor: (@name)-> @new_record = true @find: (id)-> # do some work
    61. 61. class User constructor: (name)-> @name = name @new_record = true @find: (id)-> # do some work
    62. 62. var User;User = (function() { function User(name) { this.name = name; this.new_record = true; } User.find = function(id) {}; return User;})();
    63. 63. thank you @markbates http://www.markbates.comhttp://www.slideshare.net/markykang/coffeescript-and-you
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×