CoffeeScript in Ruby Tuesday

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
     eddie@digik.com.tw
     +886-928-617-687
     

     View Slide