Your SlideShare is downloading. ×
CoffeeScript - A Rubyist's Love Affair
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 - A Rubyist's Love Affair

3,512
views

Published on

Presented on 8/9/2011 to the Boston Ruby User's Group, this presentation talks about certain aspects of CoffeeScript and how it relates to Ruby. …

Presented on 8/9/2011 to the Boston Ruby User's Group, this presentation talks about certain aspects of CoffeeScript and how it relates to Ruby.

Published in: Technology, Business

0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,512
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
42
Comments
0
Likes
7
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
  • Transcript

    • 1. CoffeeScriptA Rubyist’s Love Affair
    • 2. Mark BatesRuby/RailsConsultantAuthor of“DistributedProgramming withRuby”
    • 3. “Insert Book Name Here”
    • 4. What CoffeeScript is not!
    • 5. No Just “Lack of Punctuation!
    • 6. NOT RJS!!!
    • 7. RJS Examplepage.replace_html(tasks-completed,Task.completed_count)page.replace_html(tasks-remaining,Task.remaining_count)page.replace_html(task-status- + @task.id.to_s,@task.status.description)page.visual_effect(:highlight, task-item- +@task.id.to_s, :duration => 1.0)
    • 8. So what isCoffeeScript?
    • 9. CoffeeScript is...“a little language that compiles intoJavaScript”Easier to read and writeA hybrid of Ruby and PythonHelpful
    • 10. So why should Iembrace (and love) CoffeeScript?
    • 11. String Interpolation name = Mark "Hello #{name}"
    • 12. var name;name = Mark;"Hello " + name;
    • 13. Heredochtml = """ <div class="comment" id="tweet-#{tweet.id_str}"> <hr> <div class=tweet> <span class="imgr"><imgsrc="#{tweet.profile_image_url}"></span> <span class="txtr"> <h5><a href="http://twitter.com/#{tweet.from_user}"target="_blank">@#{tweet.from_user}</a></h5> <p>#{tweet.text}</p> <p class="comment-posted-on">#{tweet.created_at}</p> </span> </div> </div>"""
    • 14. var html;html = "<div class="comment" id="tweet-"+ tweet.id_str + "">n <hr>n <divclass=tweet>n <span class="imgr"><img src="" + tweet.profile_image_url +""></span>n <span class="txtr">n<h5><a href="http://twitter.com/" +tweet.from_user + "" target="_blank">@"+ tweet.from_user + "</a></h5>n <p>"+ tweet.text + "</p>n <p class="comment-posted-on">" + tweet.created_at+ "</p>n </span>n </div>n</div>";
    • 15. 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]
    • 16. 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);
    • 17. Ruby Style ConditionalsUnlessIn-line Conditionals
    • 18. Conditionalsunless a console.log "a is false"console.log "a is false" unless a
    • 19. if (!a) { console.log("a is false");}if (!a) { console.log("a is false");}
    • 20. FunctionsBound FunctionsDefault ArgumentsSplatted Arguments
    • 21. Regular Functionsp = (name)-> console.log "hello: #{name}"p mark
    • 22. var p;p = function(name) { return console.log("hello: " + name);};p(mark);
    • 23. Regular Functionsp = (name)-> console.log "hello: #{name}"p mark
    • 24. Regular Functionsp = (name)-> console.log "hello: #{name}" CoffeeScriptp markp = ->(name) { puts "hello: #{name}"} Ruby 1.9p.call mark
    • 25. Bound Functions class Person def initialize(name) @name = name end def bind binding end end p = Person.new(mark) eval "puts @name", p.bind
    • 26. Bound FunctionsfetchData: => url = "http://search.twitter.com/search.json?q=#{encodeURIComponent(@hash_tag)}&rpp=#{@max_results}&callback=?" $.get url, {}, @handleData, jsonhandleData: (data) => if data[error]? @handleError() if data.results.length is 0 and @fall_back @handleEmptyData() else if data.results.length > 0 setTimeout (=> @fetchData()), 10000 @render data
    • 27. var __bind = function(fn, me){ return function(){ return fn.apply(me,arguments); }; };({ fetchData: __bind(function() { var url; url = "http://search.twitter.com/search.json?q=" +(encodeURIComponent(this.hash_tag)) + "&rpp=" + this.max_results + "&callback=?"; return $.get(url, {}, this.handleData, json); }, this), handleData: __bind(function(data) { if (data[error] != null) { this.handleError(); } if (data.results.length === 0 && this.fall_back) { return this.handleEmptyData(); } else if (data.results.length > 0) { setTimeout((__bind(function() { return this.fetchData(); }, this)), 10000); return this.render(data); } }, this)});
    • 28. Default ArgumentscreateElement: (name, attributes = {}) -> obj = document.createElement name for key, val of attributes obj.setAttribute key, val obj
    • 29. ({ 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; }});
    • 30. Splatted Argumentssplatter = (first, second, others...) -> console.log "First: #{first}" console.log "Second: #{second}" console.log "Others: #{others.join(, )}"splatter [1..5]...
    • 31. var splatter;var __slice = Array.prototype.slice;splatter = function() { var first, others, second; first = arguments[0], second = arguments[1], others = 3 <=arguments.length ? __slice.call(arguments, 2) : []; console.log("First: " + first); console.log("Second: " + second); return console.log("Others: " + (others.join(, )));};splatter.apply(null, [1, 2, 3, 4, 5]);
    • 32. Array Looparr = [1..5]for num in arr console.log num
    • 33. 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);}
    • 34. Hash Loopfor key, val of attributes console.log "key: #{key}" console.log "val: #{val}"
    • 35. var key, val;for (key in attributes) { val = attributes[key]; console.log("key: " + key); console.log("val: " + val);}
    • 36. ClassesEasy To DefineEasy To ExtendKeep Code Clean
    • 37. Classesclass Employee constructor: (@name, @options = {})-> job: -> @options.jobmark = new Employee(Mark, job: Developer)mark.job() # => Developermark.name # => Mark
    • 38. 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;
    • 39. Extending Classesclass Manager extends Employee job: -> "$$$ #{super}"steve = new Manager(Steve, job: CEO)steve.job() # => $$$ CEOsteve.name # => Steve
    • 40. 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;
    • 41. @class User constructor: (@name)-> @new_record = true @find: (id)-> # do some work
    • 42. @class User constructor: (name)-> @name = name @new_record = true @find: (id)-> # do some work
    • 43. var User;User = (function() { function User(name) { this.name = name; this.new_record = true; } User.find = function(id) {}; return User;})();
    • 44. Thank You @markbateshttp://www.markbates.com

    ×