Your SlideShare is downloading. ×
CoffeeScript and You
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

CoffeeScript and You

4,695

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 …

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,695
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
53
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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

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

    ×