$30 off During Our Annual Pro Sale. View Details »

CoffeeScript in Ruby Tuesday

高見龍
November 22, 2011

CoffeeScript in Ruby Tuesday

高見龍

November 22, 2011
Tweet

More Decks by 高見龍

Other Decks in Programming

Transcript

  1. CoffeeScript
    @20th Ruby Tuesday
    ৷ԈᎲ
    photo by gillyberlin

    View Slide

  2. @20th Ruby Tuesday

    View Slide

  3. You can get this slide on
    www.eddie.com.tw/slides

    View Slide

  4. Who am I ?

    View Slide

  5. I’m a Flash guy.
    photo by JD Hancock

    View Slide

  6. hmm..
    maybe only
    60% Flasher
    and
    40% Rubyist
    photo by Crashmaster007

    View Slide

  7. a.k.a Eddie or Aquarianboy
    Live and work in Taipei, Taiwan.
    Serving in my own little tiny company.
    Flash / AS3 / Ruby / Rails / Python programming for living.
    A little bit Objective-C for personal inerests.
    Technical Education and Consulant.
    PTT Flash BM (since 2007/4).
    Adobe Certificaed Flash Developer (Since 2006/7).
    Linux Professional Institue Certification (Since 2005/3).
    ৷ԈᎲ
    photo by Eddie

    View Slide

  8. or just google with the keyword "৷ԈᎲ"

    View Slide

  9. JavaScript
    becomes
    hugely
    popular.
    9th on TIOBE, Nov 2011
    photo by gr3m

    View Slide

  10. photo by Andrew

    View Slide

  11. JavaScript
    seems
    easy..
    photo by apple apple

    View Slide

  12. But it’s
    also easy
    o get
    messy!
    photo by Marcus Q

    View Slide

  13. CoffeeScript

    View Slide

  14. photo by Nick Humphries
    We’re not
    alking
    about this
    kind of
    coffee.

    View Slide

  15. Not this either.
    photo by naotoj

    View Slide

  16. WTF?

    View Slide

  17. CoffeeScript is JavaScript
    just written in different syntax

    View Slide

  18. Who won't need this?

    View Slide

  19. Who won't need this?
    people who already know javascrip(the good parts) very well.

    View Slide

  20. What’s the problems?

    View Slide

  21. photo by Steve Ganz

    View Slide

  22. Bad smell..
    Will it be equal? that’s the question.
    0 == "" // true
    1 == true // true
    1 == "1" // true
    1 == "1.0" // true
    "true" == true // true
    "true" === true // false

    View Slide

  23. photo by Bryan Gosline
    What the..?

    View Slide

  24. I really don't know how o
    wrie good JavaScript!

    View Slide

  25. CoffeeScript exposes the
    good parts of JavaScript in
    a simple way.

    View Slide

  26. Synax borrowed from
    Python and Ruby.
    I love Python & Ruby

    View Slide

  27. If you’re already familiar
    with Ruby, you’ve probably
    already learned about 70%
    CoffeeScript.

    View Slide

  28. Really friendly for Rubyist.
    love_coffeescript == true if rubyist

    View Slide

  29. and compiles ino JavaScript
    code.
    *.coffee -> *.js

    View Slide

  30. Your Brain ->
    JavaScript ->
    Browser

    View Slide

  31. Your Brain ->
    Friendly CoffeeScript ->
    JavaScript ->
    Browser

    View Slide

  32. But that doesn’t mean you
    can have no knowledge
    about JavaScript.

    View Slide

  33. CoffeeScript is NOT used
    o replace JavaScript.

    View Slide

  34. Let’s get our feet wet!
    photo by jlhopes

    View Slide

  35. What are we looking at
    oday?

    View Slide

  36. - Insallation
    - Usage
    - Synax

    View Slide

  37. Insall
    photo by Daniel Dionne

    View Slide

  38. Requirements
    You need o insall some software first..
    Node.js
    > git clone git://github.com/joyent/node.git
    > cd node
    > ./configure
    > make
    > sudo make insall

    View Slide

  39. Requirements
    You need o insall some software first..
    NPM, the “node package manager”
    > curl http://npmjs.org/insall.sh | sh

    View Slide

  40. Insall CoffeeScript
    CoffeeScript
    > npm insall coffee-script
    > coffee -v
    CoffeeScript version 1.1.3
    http://blog.eddie.com.w/2011/08/03/install-coffeescrip/

    View Slide

  41. Insall CoffeeScript
    CoffeeScript on MacOS
    > brew insall coffee-script
    http://blog.eddie.com.w/2011/08/03/install-coffeescrip/
    ..and don’t forget insall the bundle for
    CoffeeScript if you’re using TextMae.

    View Slide

  42. Insall CoffeeScript
    TextMae bundle forCoffeeScript, CMD+B = build, CMD+R = run
    https://github.com/jashkenas/coffee-scrip-tmbundle

    View Slide

  43. Insall CoffeeScript
    TextMae bundle forCoffeeScript, CMD+B = build, CMD+R = run
    https://github.com/jashkenas/coffee-scrip-tmbundle

    View Slide

  44. Insall CoffeeScript
    Windows?

    View Slide

  45. Insall CoffeeScript
    Windows?
    get a mac

    View Slide

  46. How o use
    photo by roboppy

    View Slide

  47. Usage
    Compile *.coffee ino *.js
    > coffee --wach --compile app.coffee
    http://blog.eddie.com.w/2011/08/03/how-to-use-coffeescrip-compiler/

    View Slide

  48. Usage
    Compile *.coffee ino *.js
    > coffee --wach --compile app.coffee
    http://blog.eddie.com.w/2011/08/03/how-to-use-coffeescrip-compiler/

    View Slide

  49. Usage
    you got a REPL, just like irb.

    View Slide

  50. Usage
    you got a REPL, just like irb.

    View Slide

  51. Don’t like o compile?
    You can run CoffeeScrip in HTML directly

    View Slide

  52. Use CoffeeScript on the fly

    View Slide

  53. Use CoffeeScript on the fly

    View Slide

  54. Use CoffeeScript on the fly

    <br/>alert 'est'<br/>

    View Slide

  55. Use CoffeeScript on the fly

    <br/>alert 'est'<br/>

    View Slide

  56. don’t do this in your production.

    View Slide

  57. Synax
    photo by zigazou76

    View Slide

  58. }
    }
    }
    }

    View Slide

  59. No { }
    indenations rule!
    whitespace matters!

    View Slide

  60. ( ) is not always
    necessary.
    Just like Ruby

    View Slide

  61. but..
    hello +5 means hello(+5)
    + : convert string to number

    View Slide

  62. No trailing semicolon.

    View Slide

  63. Return is not necessary.
    everything is an expression, just like Ruby.

    View Slide

  64. No { }, (), and ;

    View Slide

  65. No { }, (), and ;
    // javascript
    if(age > 20){
    voe();
    }

    View Slide

  66. No { }, (), and ;
    // javascript
    if(age > 20){
    voe();
    }
    # coffeescript
    if age > 20
    voe()

    View Slide

  67. Variables

    View Slide

  68. Variable
    You don’t have o declare it before using it.

    View Slide

  69. Variable
    You don’t have o declare it before using it.
    # coffeescript
    lang = ["php", "python", "perl", "ruby"]
    name = "Eddie"

    View Slide

  70. Variable
    You don’t have o declare it before using it.
    # coffeescript
    lang = ["php", "python", "perl", "ruby"]
    name = "Eddie"
    // javascript
    var lang, name;
    lang = ["php", "python", "perl", "ruby"];
    name = "Eddie";

    View Slide

  71. Variable
    Destructuring Assignment

    View Slide

  72. Variable
    Destructuring Assignment
    # coffeescript
    x = 100
    y = 10
    [x, y] = [y, x]

    View Slide

  73. Variable
    Destructuring Assignment
    # coffeescript
    x = 100
    y = 10
    [x, y] = [y, x]
    // javascript
    var x, y, _ref;
    x = 100;
    y = 10;
    _ref = [y, x], x = _ref[0], y = _ref[1];

    View Slide

  74. Variable
    Destructuring Assignment

    View Slide

  75. Variable
    Destructuring Assignment
    # coffeescript
    weatherReport = (location) ->
    [location, 72, "Mostly Sunny"]
    [city, emp, forecast] = weatherReport "Berkeley, CA"

    View Slide

  76. Variable
    Destructuring Assignment
    # coffeescript
    ag = ""
    [open, conents..., close] = ag.split("")
    # coffeescript
    weatherReport = (location) ->
    [location, 72, "Mostly Sunny"]
    [city, emp, forecast] = weatherReport "Berkeley, CA"

    View Slide

  77. Function

    View Slide

  78. ->
    dash rocket

    View Slide

  79. ->""<-
    enjoy coding :)
    Not

    View Slide

  80. -> "hello, Ruby Tuesday"

    View Slide

  81. -> "hello, Ruby Tuesday"
    (function() {
    return "hello, Ruby Tuesday";
    });

    View Slide

  82. Function

    View Slide

  83. Function
    # coffeescript
    say_hello = (guest1, guest2 = "Nayumi") ->
    "Hello #{guest1} and #{guest2}"
    say_hello "Eddie"

    View Slide

  84. Function
    # coffeescript
    say_hello = (guest1, guest2 = "Nayumi") ->
    "Hello #{guest1} and #{guest2}"
    say_hello "Eddie"
    // javascript
    var say_hello;
    say_hello = function(guest1, guest2) {
    if (guest2 == null) {
    guest2 = "Nayumi";
    }
    return "Hello " + guest1 + " and " + guest2;
    };
    say_hello("Eddie");

    View Slide

  85. =>
    fat arrow
    http://blog.eddie.com.w/2011/11/18/dash-rocket-vs-fat-arrow-in-coffeescrip/

    View Slide

  86. Global Variables

    View Slide

  87. Global Variables
    (function() {
    }).call(this);

    View Slide

  88. onclick="logout();" />

    View Slide

  89. http://blog.eddie.com.w/2011/11/18/global-variables-in-coffeescrip/

    View Slide

  90. http://blog.eddie.com.w/2011/11/18/global-variables-in-coffeescrip/
    window.logout = ->
    alert "You've already logout!" if confirm "logout!?"
    # coffeescript

    View Slide

  91. http://blog.eddie.com.w/2011/11/18/global-variables-in-coffeescrip/
    window.logout = ->
    alert "You've already logout!" if confirm "logout!?"
    # coffeescript
    root = exports ? this
    root.logout = ->
    alert "You've already logout!" if confirm "logout!?"
    # coffeescript

    View Slide

  92. http://blog.eddie.com.w/2011/11/18/global-variables-in-coffeescrip/
    window.logout = ->
    alert "You've already logout!" if confirm "logout!?"
    # coffeescript
    root = exports ? this
    root.logout = ->
    alert "You've already logout!" if confirm "logout!?"
    # coffeescript
    onclick="logout();" />

    View Slide

  93. Splats
    Just like Ruby

    View Slide

  94. ...

    View Slide

  95. Splats

    View Slide

  96. Splats
    # coffeescript
    sum = (nums...) ->
    result = 0
    result += n for n in nums
    result
    console.log sum(1, 2, 3, 4, 5)

    View Slide

  97. Array

    View Slide

  98. Array
    // javascript
    # coffeescript

    View Slide

  99. Array
    // javascript
    # coffeescript
    heroes = [
    'Spider Man',
    'Capain America',
    'X-men',
    'Iron Man'
    ]

    View Slide

  100. Array
    // javascript
    # coffeescript
    heroes = [
    'Spider Man',
    'Capain America',
    'X-men',
    'Iron Man'
    ]
    var heroes, students, eachers;
    heroes = ['Spider Man', 'Capain America', 'X-men', 'Iron Man'];

    View Slide

  101. Array
    // javascript
    # coffeescript
    heroes = [
    'Spider Man',
    'Capain America',
    'X-men',
    'Iron Man'
    ]
    var heroes, students, eachers;
    heroes = ['Spider Man', 'Capain America', 'X-men', 'Iron Man'];
    students = [1..10]

    View Slide

  102. Array
    // javascript
    # coffeescript
    heroes = [
    'Spider Man',
    'Capain America',
    'X-men',
    'Iron Man'
    ]
    var heroes, students, eachers;
    heroes = ['Spider Man', 'Capain America', 'X-men', 'Iron Man'];
    students = [1..10]
    students = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

    View Slide

  103. Array
    // javascript
    # coffeescript
    heroes = [
    'Spider Man',
    'Capain America',
    'X-men',
    'Iron Man'
    ]
    var heroes, students, eachers;
    heroes = ['Spider Man', 'Capain America', 'X-men', 'Iron Man'];
    students = [1..10]
    eachers = [1...10]
    students = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

    View Slide

  104. Array
    // javascript
    # coffeescript
    heroes = [
    'Spider Man',
    'Capain America',
    'X-men',
    'Iron Man'
    ]
    var heroes, students, eachers;
    heroes = ['Spider Man', 'Capain America', 'X-men', 'Iron Man'];
    students = [1..10]
    eachers = [1...10]
    eachers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
    students = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

    View Slide

  105. Array
    # coffeescript
    // javascript

    View Slide

  106. Array
    # coffeescript
    // javascript
    heroes[0..2]

    View Slide

  107. Array
    # coffeescript
    // javascript
    heroes[0..2]
    heroes.slice(0, 3);

    View Slide

  108. Array
    # coffeescript
    // javascript
    heroes[0..2]
    heroes[1..2] = ["Batman", "ThunderCat"]
    heroes.slice(0, 3);

    View Slide

  109. Array
    # coffeescript
    // javascript
    heroes[0..2]
    heroes[1..2] = ["Batman", "ThunderCat"]
    var _ref;
    [].splice.apply(heroes, [1, 2].concat(_ref = ["Batman", "ThunderCat"])), _ref;
    heroes.slice(0, 3);

    View Slide

  110. Object

    View Slide

  111. Object

    View Slide

  112. Object
    # coffeescript
    eddie = { name: "Eddie Kao", age: 18, speciality: "eat" }

    View Slide

  113. Object
    # coffeescript
    eddie = { name: "Eddie Kao", age: 18, speciality: "eat" }
    // javascript
    var eddie;
    eddie = {
    name: "Eddie Kao",
    age: 18,
    speciality: "eat"
    };

    View Slide

  114. Object

    View Slide

  115. Object
    # coffeescript
    eddie =
    name: "Eddie Kao"
    age: 18
    lovers:
    nayumi:
    name: "Nayumi Hung"
    age: 18
    mary:
    name: "Mary Bloody"
    age: 20

    View Slide

  116. Object
    # coffeescript
    eddie =
    name: "Eddie Kao"
    age: 18
    lovers:
    nayumi:
    name: "Nayumi Hung"
    age: 18
    mary:
    name: "Mary Bloody"
    age: 20
    // javascript
    var eddie;
    eddie = {
    name: "Eddie Kao",
    age: 18,
    lovers: {
    nayumi: {
    name: "Nayumi Hung",
    age: 18
    },
    mary: {
    name: "Mary Bloody",
    age: 20
    }
    }
    };

    View Slide

  117. Loop

    View Slide

  118. But we Rubyist barely use for-loop

    View Slide

  119. List Comprehension
    # coffeescript // javascript

    View Slide

  120. List Comprehension
    # coffeescript // javascript
    alert i for i in [1..10]

    View Slide

  121. List Comprehension
    # coffeescript // javascript
    alert i for i in [1..10] var i, _sep;
    for (i = 1; i <= 10; i++) {
    alert(i);
    }

    View Slide

  122. List Comprehension
    # coffeescript // javascript
    alert i for i in [1..10] var i, _sep;
    for (i = 1; i <= 10; i++) {
    alert(i);
    }
    alert i for i in [1..10] when i
    % 2 == 0

    View Slide

  123. List Comprehension
    # coffeescript // javascript
    alert i for i in [1..10] var i, _sep;
    for (i = 1; i <= 10; i++) {
    alert(i);
    }
    alert i for i in [1..10] when i
    % 2 == 0
    for (i = 1; i <= 10; i++) {
    if (i % 2 === 0) {
    alert(i);
    }
    }

    View Slide

  124. List Comprehension
    # coffeescript // javascript
    alert i for i in [1..10] var i, _sep;
    for (i = 1; i <= 10; i++) {
    alert(i);
    }
    alert i for i in [1..10] when i
    % 2 == 0
    alert i for i in [1..10] by 2
    for (i = 1; i <= 10; i++) {
    if (i % 2 === 0) {
    alert(i);
    }
    }

    View Slide

  125. List Comprehension
    # coffeescript // javascript
    alert i for i in [1..10] var i, _sep;
    for (i = 1; i <= 10; i++) {
    alert(i);
    }
    alert i for i in [1..10] when i
    % 2 == 0
    alert i for i in [1..10] by 2
    for (i = 1; i <= 10; i++) {
    if (i % 2 === 0) {
    alert(i);
    }
    }
    for (i = 1, _sep = 2; i <= 10; i +=
    _sep) {
    alert(i);
    }

    View Slide

  126. List Comprehension
    # coffeescript // javascript
    alert i for i in [1..10] var i, _sep;
    for (i = 1; i <= 10; i++) {
    alert(i);
    }
    alert i for i in [1..10] when i
    % 2 == 0
    alert i for i in [1..10] by 2
    alert i * 2 for i in [1..10]
    for (i = 1; i <= 10; i++) {
    if (i % 2 === 0) {
    alert(i);
    }
    }
    for (i = 1, _sep = 2; i <= 10; i +=
    _sep) {
    alert(i);
    }

    View Slide

  127. List Comprehension
    # coffeescript // javascript
    alert i for i in [1..10] var i, _sep;
    for (i = 1; i <= 10; i++) {
    alert(i);
    }
    alert i for i in [1..10] when i
    % 2 == 0
    alert i for i in [1..10] by 2
    alert i * 2 for i in [1..10]
    for (i = 1; i <= 10; i++) {
    if (i % 2 === 0) {
    alert(i);
    }
    }
    for (i = 1, _sep = 2; i <= 10; i +=
    _sep) {
    alert(i);
    }
    for (i = 1; i <= 10; i++) {
    alert(i * 2);
    }

    View Slide

  128. Condition

    View Slide

  129. Swich
    # coffeescript
    swich day
    when "Mon" then go work
    when "Tue" then go relax
    when "Thu" then go iceFishing
    when "Fri", "Sat"
    if day is bingoDay
    go bingo
    go dancing
    when "Sun" then go church
    else go work

    View Slide

  130. Modifier
    You can put "if", "unless", "while", "until" behind

    View Slide

  131. Modifier
    You can put "if", "unless", "while", "until" behind
    // javascript
    if (age > 20) {
    voe();
    }

    View Slide

  132. Modifier
    You can put "if", "unless", "while", "until" behind
    # coffeescript
    voe() if age > 20
    // javascript
    if (age > 20) {
    voe();
    }

    View Slide

  133. Synactic Sugar

    View Slide

  134. Synactic Sugar
    # coffeescript // javascript
    wrie more readable code by using synactic sugar.

    View Slide

  135. Synactic Sugar
    # coffeescript // javascript
    wrie more readable code by using synactic sugar.
    is ===
    isnt !==
    true, on, yes true
    false, off, no false
    not !
    and &&
    or ||
    unless if not
    until while not
    of in

    View Slide

  136. # coffeescript
    Synactic Sugar

    View Slide

  137. # coffeescript
    Synactic Sugar
    alert "I can't see anything" if light is off

    View Slide

  138. # coffeescript
    Synactic Sugar
    alert "I can't see anything" if light is off
    alert "It's impossible!" if eddie isnt handsome

    View Slide

  139. # coffeescript
    Synactic Sugar
    alert "I can't see anything" if light is off
    alert "It's impossible!" if eddie isnt handsome
    if girl is not single
    alert "Don't Touch! Be Careful!"

    View Slide

  140. // javascript
    Synactic Sugar

    View Slide

  141. // javascript
    Synactic Sugar
    if (light === false) {
    alert("I can't see anything");
    }
    if (eddie !== handsome) {
    alert("It's impossible!");
    }
    if (girl === !single) {
    alert("Don't Touch! Be Careful!");
    }

    View Slide

  142. Synactic Sugar
    Which answer do you like o hear when you say ...

    View Slide

  143. Synactic Sugar
    Which answer do you like o hear when you say ...
    Eddie: Will you marry me?
    Nayumi: yes!

    View Slide

  144. Synactic Sugar
    Which answer do you like o hear when you say ...
    Eddie: Will you marry me?
    Nayumi: yes!
    or
    Eddie: Will you marry me?
    Nayumi: true!

    View Slide

  145. Synactic Sugar

    View Slide

  146. Synactic Sugar
    # coffeescript
    alert "I'll marry you!" if answer is yes

    View Slide

  147. Synactic Sugar
    // javascript
    if (answer === true) {
    alert("I'll marry you!");
    }
    # coffeescript
    alert "I'll marry you!" if answer is yes

    View Slide

  148. Synactic Sugar
    Chained Comparison

    View Slide

  149. Synactic Sugar
    # coffeescript
    console.log "I'm awesome!" if 20 < my_girl_friends < 100
    Chained Comparison

    View Slide

  150. Synactic Sugar
    // javascript
    if ((20 < my_girl_friends && my_girl_friends < 100)) {
    console.log("I'm awesome!");
    }
    # coffeescript
    console.log "I'm awesome!" if 20 < my_girl_friends < 100
    Chained Comparison

    View Slide

  151. Synactic Sugar
    Exisential Operaor

    View Slide

  152. Synactic Sugar
    # coffeescript
    age ?= 18
    Exisential Operaor

    View Slide

  153. Synactic Sugar
    # coffeescript
    age ?= 18
    // javascript
    if (typeof age !== "undefined" && age !== null) {
    age;
    } else {
    age = 18;
    };
    Exisential Operaor

    View Slide

  154. Raw JavaScript
    If you still prefer the original way..

    View Slide

  155. Raw JavaScript

    View Slide

  156. Raw JavaScript
    # coffeescript
    say_hello = `function(name){
    return "Hello, " + name
    }`

    View Slide

  157. OOP

    View Slide

  158. OOP
    CoffeeScrip's classes are syntactic sugar only.

    View Slide

  159. Prootype?

    View Slide

  160. Prootype?
    IMHO, prooype-based OO is no elegant

    View Slide

  161. OOP - new

    View Slide

  162. OOP - new
    # coffeescript
    class Animal
    construcor: (name, age) ->
    this.name = name
    this.age = age
    animal = new Animal("eddie", 18)
    alert animal

    View Slide

  163. OOP - new
    # coffeescript
    class Animal
    construcor: (name, age) ->
    this.name = name
    this.age = age
    animal = new Animal("eddie", 18)
    alert animal
    // javascript
    var Animal, animal;
    Animal = (function() {
    function Animal(name, age) {
    this.name = name;
    this.age = age;
    }
    return Animal;
    })();
    animal = new Animal("eddie", 18);
    alert(animal);

    View Slide

  164. OOP - @ = this.

    View Slide

  165. OOP - @ = this.

    View Slide

  166. # coffeescript
    OOP - method

    View Slide

  167. # coffeescript
    OOP - method
    class Animal
    construcor: (@name, @age) ->
    say_hello: (something) ->
    console.log "Hello, #{something}"
    animal = new Animal("eddie", 18)
    animal.say_hello("CoffeeScript")

    View Slide

  168. OOP - inheriance

    View Slide

  169. OOP - inheriance
    # coffeescript
    class Animal
    construcor: (@name, @age) ->
    say_hello: (something) ->
    alert "Hello, #{something}"
    class Human exends Animal
    walk: ->
    alert "I can walk with my foots!"
    eddie = new Human("eddie", 18)
    eddie.say_hello "CoffeeScript"
    eddie.walk()

    View Slide

  170. OOP - inheriance

    View Slide

  171. OOP - inheriance

    View Slide

  172. TL;DR

    View Slide

  173. Exend more function?

    View Slide

  174. Exend more function
    http://blog.eddie.com.w/2011/11/19/extend-functionaliy-for-your-class/

    View Slide

  175. Exend more function
    # coffeescript
    String::repeat = (n) ->
    Array(n + 1).join @
    String::downcase = ->
    @oLowerCase()
    String::upcase = ->
    @oUpperCase()
    String::find = (str) ->
    @indexOf str
    String::has = (str) ->
    (@indexOf str) > 0
    http://blog.eddie.com.w/2011/11/19/extend-functionaliy-for-your-class/

    View Slide

  176. Cooperae with other JS
    library or framework?

    View Slide

  177. working with jQuery

    View Slide

  178. working with jQuery
    // javascript
    $(document).ready(function() {
    wakeup();
    walk_o_oilet();
    pee();
    go_back_o_sleep();
    })

    View Slide

  179. working with jQuery
    # coffeescript
    $ ->
    wakeup()
    walk_o_oilet()
    pee()
    go_back_o_sleep()
    // javascript
    $(document).ready(function() {
    wakeup();
    walk_o_oilet();
    pee();
    go_back_o_sleep();
    })

    View Slide

  180. working with jQuery

    View Slide

  181. working with jQuery
    // javascript
    $('#girl').animae({
    width: '100px',
    height: '50px',
    opacity: '0.8'
    }, 2000, 'easeOutQuad');

    View Slide

  182. working with jQuery
    # coffeescript
    $('#girl').animae
    width: '100px'
    height: '50px'
    opacity: '0.8'
    2000
    'easeOutQuad'
    // javascript
    $('#girl').animae({
    width: '100px',
    height: '50px',
    opacity: '0.8'
    }, 2000, 'easeOutQuad');

    View Slide

  183. working with jQuery

    View Slide

  184. working with jQuery
    // javascript
    (function($){
    $.fn.exend({
    isEmail: function(email){
    return /some email validaor/.est(email);
    }
    });
    })(Query);

    View Slide

  185. working with jQuery
    # coffeescript
    $ = jQuery
    $.fn.exend
    isEmail: (email) ->
    /some email validaor/.est email
    // javascript
    (function($){
    $.fn.exend({
    isEmail: function(email){
    return /some email validaor/.est(email);
    }
    });
    })(Query);

    View Slide

  186. makes jQuery more easy,
    and more fun
    http://blog.eddie.com.w/2011/11/14/when-jquery-meets-coffeescrip/

    View Slide

  187. References
    http://blog.eddie.com.w/category/coffeescrip/
    http://jashkenas.github.com/coffee-scrip/
    Websies:
    https://github.com/sleepyfox/coffeescrip-koans
    http://upgrade2rails31.com/coffee-scrip
    Koans:

    View Slide

  188. References
    http://pragprog.com/book/tbcoffee/coffeescrip
    Book:
    http://arcturo.github.com/library/coffeescrip/index.html
    http://autoelicum.github.com/Smooh-CoffeeScrip/

    View Slide

  189. Conclusion

    View Slide

  190. being a 40% Rubyist
    I don’t like..

    View Slide

  191. being a 40% Rubyist
    I don’t like..
    var

    View Slide

  192. being a 40% Rubyist
    I don’t like..
    var
    return

    View Slide

  193. being a 40% Rubyist
    I don’t like..
    var
    return
    for loop

    View Slide

  194. being a 40% Rubyist
    I don’t like..
    var
    return
    for loop
    ()

    View Slide

  195. being a 40% Rubyist
    I don’t like..
    var
    return
    for loop
    ()
    {}

    View Slide

  196. I Love..

    View Slide

  197. Coding Style
    I Love..
    I love Python & Ruby, of course :)

    View Slide

  198. Indenation!
    I Love..

    View Slide

  199. Anonymous function
    No global function and variable by default
    I Love..

    View Slide

  200. String Inerpolation
    I Love..
    sorry, but string building really sucks :)

    View Slide

  201. List Comprehension
    I Love..

    View Slide

  202. Synactic Sugar
    I Love..

    View Slide

  203. English-like grammar
    I Love..
    alert "of course it is!" if ruby_tuesday is awesome

    View Slide

  204. Comparison & Equality
    I Love..
    "true" == true // true
    "true" === true // false

    View Slide

  205. Works with other JS
    frameworks well.
    Because it’s just JavaScrip
    I Love..

    View Slide

  206. Compilation
    I Love..
    JSLint Approved

    View Slide

  207. What else?

    View Slide

  208. Make, Rake, Cake.

    View Slide

  209. More and more projects are
    writen in CoffeeScript.

    View Slide

  210. Pow.cx

    View Slide

  211. CoffeeScript compiler is
    writen in CoffeeScript.

    View Slide

  212. Tianium Mobile
    http://blog.eddie.com.w/2011/08/03/using-coffeescrip-in-titanium-studio/

    View Slide

  213. Immature?
    photo by theseanster93

    View Slide

  214. Performance?
    photo by theseanster93
    photo by chr1sl4i

    View Slide

  215. CoffeeScript Means Giving
    Up on JavaScript?

    View Slide

  216. Learn JavaScript, and Use
    CoffeeScript.

    View Slide

  217. Any Question?
    photo by jamuraa

    View Slide

  218. ৷ԈᎲ
    Conacts
    photo by Eddie
    Websie
    Blog
    Plurk
    Facebook
    Google Plus
    Twiter
    Email
    Mobile
    http://www.eddie.com.tw
    http://blog.eddie.com.tw
    http://www.plurk.com/aquarianboy
    http://www.facebook.com/eddiekao
    http://www.eddie.com.tw/+
    https://twiter.com/#!/eddiekao
    [email protected]
    +886-928-617-687

    View Slide