CoffeeScript and You

5,730 views
5,615 views

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
5,730
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
56
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
  • 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

    ×