Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
COFFEESCRIPT   A Rubyist’s Love Affair
Mark Bates
DistributedProgramming    with    Ruby     Addison-Wesley          2009http://books.markbates.com
Programming      in CoffeeScript      Addison-Wesley           2012 http://books.markbates.com
A (BRIEF) HISTORY LESSON
“I need to come up with a scripting languagefor web browsers.    I know! Ill make it cool and Lispy!      ”               ...
“   Yeah, So... Java is getting really popular.    So were going to need you to rewrite your    language into something a ...
var MyApp.Models.Product = Backbone.Model.extend({  isLiked: function() {     var _ref;     return ! ((_ref = this.like())...
FAST FORWARD    About 15 Years
var MyApp.Models.Product = Backbone.Model.extend({  isLiked: function() {     var _ref;     return ! ((_ref = this.like())...
class MyApp.Models.Product extends Backbone.Model  isLiked: ->    !@like()?.isNew()  like: ->    new MyApp.Models.Like(@ge...
WHAT IS COFFEESCRIPT?
What is CoffeeScript?
What is CoffeeScript?“A little language that compiles into JavaScript.”
What is CoffeeScript?“A little language that compiles into JavaScript.”Easily integrates with your current JavaScript
What is CoffeeScript?“A little language that compiles into JavaScript.”Easily integrates with your current JavaScriptEasie...
What is CoffeeScript?“A little language that compiles into JavaScript.”Easily integrates with your current JavaScriptEasie...
What is CoffeeScript?“A little language that compiles into JavaScript.”Easily integrates with your current JavaScriptEasie...
What CoffeeScript Is Not?Not Magic!Limited by what JavaScript can already do
“I’m happy writing JavaScript.I don’t need to learn another language.   ”
FINE WITH ME
BUT...
.MODEL SMALL                           DISP:                                               MOV BL,VAL1.STACK 64           ...
.MODEL SMALL                                      DISP:                                       Assembly           MOV BL,VA...
#include <stdio.h>            Cint fibonacci(){  int n = 100;  int a = 0;  int b = 1;  int sum;  int i;    for (i = 0; i <...
public static void fibonacci() {    Java  int n = 100;  int a = 0;  int b = 1;    for (int i = 0; i < n; i++) {      Syste...
def fibonacci           Ruby  a = 0  b = 1  100.times do    printf("%dn", a)    a, b = b, a + b  endend
“I can write an app just as well in Javaas I can in Ruby, but damn it if Rubyisn’t nicer to read and write!   ”
SAME GOES FORCOFFEESCRIPT
SYNTAX
$(function() {                             $ ->                                             success = (data) ->  success =...
Syntax RulesNo semi-colons (ever!)No curly braces*No ‘function’ keywordRelaxed parenthesesWhitespace significant formatting
Parentheses Rules# Not required without arguments:noArg1 = ->  # do something# Not required without arguments:noArg2 = () ...
Parentheses Rulesvar noArg1, noArg2, withArg;noArg1 = function() {};noArg2 = function() {};withArg = function(arg) {};noAr...
Parentheses Rules# Bad:$ "#some_id" .text()# $("#some_id".text());# Good:$("#some_id").text()# $("#some_id").text();
Whitespace
Whitespace$(function() {success = function(data) {if (data.errors != null) {alert("There was an error!");} else {$("#conte...
Whitespace$(function() {                      def fibonaccisuccess = function(data) {          a = 0if (data.errors != nul...
Whitespace$(function() {                             def fibonacci                                             a = 0  succ...
Whitespace$ ->  success = (data) ->     if data.errors?       alert "There was an error!"     else       $("#content").tex...
Whitespace$(function() {  var success;  success = function(data) {     if (data.errors != null) {       return alert("Ther...
RUBYSCRIPT?
Conditionals
Conditionalsif true  doSomething()unless true  doSomething()
Conditionalsif true                doSomething() if true  doSomething()                       doSomething() unless trueunl...
Conditionalsif true                    doSomething() if true  doSomething()                           doSomething() unless...
Objects/HashessomeObject = {conf: "RailsConf", talk: "CoffeeScript"}someObject =  conf: "RailsConf"  talk: "CoffeeScript"s...
Objects/Hashesvar someObject;someObject = {   conf: "RailsConf",   talk: "CoffeeScript"};someObject = {   conf: "RailsConf...
Rangesa = [1..5]b = [1...5]c = [1..100]d = [100..1]
Rangesa = [1..5]     var a, b, c, d, _i, _j, _results, _results1;               a = [1, 2, 3, 4, 5];b = [1...5]           ...
String Interpolationname = "RailsConf 2012"console.log "Hello #{name}"# Hello RailsConf 2012console.log Hello #{name}# Hel...
String Interpolationname = "RailsConf 2012"       var name;console.log "Hello #{name}"   name = "RailsConf 2012";# Hello R...
Heredocshtml = """  <div class="comment" id="tweet-#{tweet.id_str}">    <hr>    <div class=tweet>      <span class="imgr">...
Heredocsvar html;html = "<div class="comment" id="tweet-" + tweet.id_str+ "">n <hr>n <div class=tweet>n      <span class="...
Functionsp = (name) ->  console.log "Hello #{name}"p(RailsConf 2012)
Functionsvar p;p = function(name) {   return console.log("Hello " + name);};p(RailsConf 2012);
Functionsp = (name)->  console.log "Hello #{name}"p(RailsConf 2012)
Functionsp = (name)->  console.log "Hello #{name}"     CoffeeScriptp(RailsConf 2012)
Functionsp = (name)->  console.log "Hello #{name}"     CoffeeScriptp(RailsConf 2012)p = ->(name) {  puts "Hello #{name}"} ...
Default ArgumentscreateElement = (name, attributes = {}) ->  obj = document.createElement name  for key, val of attributes...
Default Argumentsvar createElement;createElement = function(name, attributes) {   var key, obj, val;   if (attributes == n...
Splats*splatter = (first, second, others...) ->  console.log "First: #{first}"  console.log "Second: #{second}"  console.l...
Splats*var splatter,  __slice = [].slice;splatter = function() {   var first, others, second;   first = arguments[0], seco...
Loops & Comprehensionsfor someName in someArray  console.log someNamefor key, value of someObject  console.log "#{key}: #{...
Loops & Comprehensionsvar key, someName, value, _i, _len;for (_i = 0, _len = someArray.length; _i < _len; _i++) {  someNam...
Loops & Comprehensionsnumbers = [1..5]console.log number for number in numbers
Loops & Comprehensionsvar number, numbers, _i, _len;numbers = [1, 2, 3, 4, 5];for (_i = 0, _len = numbers.length; _i < _le...
Loops & Comprehensionsnumbers = [1..5]console.log number for number in numbers when number <= 3
Loops & Comprehensionsvar number, numbers, _i, _len;numbers = [1, 2, 3, 4, 5];for (_i = 0, _len = numbers.length; _i < _le...
Loops & Comprehensionsnumbers = [1, 2, 3, 4, 5]low_numbers = (number * 2 for number in numbers when number <= 3)console.lo...
Loops & Comprehensionsvar low_numbers, number, numbers;numbers = [1, 2, 3, 4, 5];low_numbers = (function() {  var _i, _len...
Classesclass Employeeemp = new Employee()emp.firstName = "Mark"
Classesvar Employee, emp;Employee = (function() {  Employee.name = Employee;  function Employee() {}  return Employee;})()...
Classesclass Employee  constructor: (@options = {}) ->  salary: ->    @options.salary ?= "$250,000"emp = new Employee()con...
Classesvar Employee, emp;Employee = (function() {  Employee.name = Employee;  function Employee(options) {    this.options...
Extending Classesclass Manager extends Employee  constructor: ->    super    @options.salary ?= "$500,000"manager = new Ma...
Extending Classesvar Manager, manager,  __hasProp = {}.hasOwnProperty,  __extends = function(child, parent) { for (var key...
Extending Classesclass Manager extends Employee  constructor: ->    super    @options.salary ?= "$500,000"  salary: ->    ...
Extending Classesvar Manager, manager,  __hasProp = {}.hasOwnProperty,  __extends = function(child, parent) { for (var key...
Bound Functionsclass User  constructor: (@name) ->  sayHi: ->    console.log "Hello #{@name}"bob = new User(bob)mary = new...
Bound Functionsabout to execute callback...Hello undefined...executed callbackabout to execute callback...Hello undefined....
Bound Functionsclass User  constructor: (@name) ->  sayHi: ->    console.log "Hello #{@name}"bob = new User(bob)mary = new...
Bound Functionsclass User  constructor: (@name) ->  sayHi: ->    console.log "Hello #{@name}"bob = new User(bob)mary = new...
Bound Functionsclass User  constructor: (@name) ->  sayHi: =>    console.log "Hello #{@name}"bob = new User(bob)mary = new...
Bound Functionsabout to execute callback...Hello bob...executed callbackabout to execute callback...Hello mary...executed ...
Bound Functionsclass User  constructor: (@name) ->  sayHi: =>    console.log "Hello #{@name}"
Bound Functionsvar User,  __bind = function(fn, me){ return function(){ return fn.apply(me,arguments); }; };User = (functi...
FINALLYOne of my favorite features
Existential Operatorif foo?  console.log "foo"console.log "foo" if foo?
Existential Operatorif (typeof foo !== "undefined" && foo !== null) {  console.log("foo");}if (typeof foo !== "undefined" ...
WAIT! IT GETS BETTER!
Existential Operatorconsole?.log "foo"
Existential Operatorconsole?.log "foo"if (typeof console !== "undefined" && console !== null) {  console.log("foo");}
Existential Operatorif currentUser?.firstName?  console.log currentUser.firstName
Existential Operatorif currentUser?.firstName?  console.log currentUser.firstNameif ((typeof currentUser !== "undefined" &...
What Didn’t I Cover?ScopingSecurityStrict ModeFixes common ‘mistakes’OperatorsThe `do` keywordPlenty more!
Thank You
Thank YoumyName = "Mark Bates"you.should buyBook("Programming in CoffeeScript") .at("http://books.markbates.com")you.shoul...
What is CoffeeScript?“A little language
What is CoffeeScript?“A little language
What is CoffeeScript?“A little language
Upcoming SlideShare
Loading in …5
×

What is CoffeeScript?“A little language CoffeeScript for the Rubyist

14,240 views

Published on

What is CoffeeScript?“A little language that compiles into JavaScript.”Easily integrates with your current JavaScript

Published in: Technology
  • Follow the link, new dating source: ♥♥♥ http://bit.ly/2F7hN3u ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Sex in your area is here: ❶❶❶ http://bit.ly/2F7hN3u ❶❶❶
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • CoffeeScript: Accelerated JavaScript Development --- http://amzn.to/1nZ06aZ
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • CoffeeScript in Action --- http://amzn.to/1SaSGft
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • The Little Book on CoffeeScript --- http://amzn.to/1T2KWys
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

×