CoffeeScript in Ruby Tuesday

Transcript

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

2. @20th Ruby Tuesday

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

4. Who am I ?

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

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

   Crashmaster007

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

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

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

   by gr3m

10. photo by Andrew

11. JavaScript seems easy.. photo by apple apple

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

    Q

13. CoffeeScript

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

    of coffee.

15. Not this either. photo by naotoj

16. WTF?

17. CoffeeScript is JavaScript just written in different syntax

18. Who won't need this?

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

    parts) very well.

20. What’s the problems?

21. photo by Steve Ganz

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

23. photo by Bryan Gosline What the..?

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

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

    way.

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

    Ruby

27. If you’re already familiar with Ruby, you’ve probably already learned

    about 70% CoffeeScript.

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

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

30. Your Brain -> JavaScript -> Browser

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

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

    JavaScript.

33. CoffeeScript is NOT used o replace JavaScript.

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

35. What are we looking at oday?

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

37. Insall photo by Daniel Dionne

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

39. Requirements You need o insall some software first.. NPM, the

    “node package manager” > curl http://npmjs.org/insall.sh | sh

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/

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.

42. Insall CoffeeScript TextMae bundle forCoffeeScript, CMD+B = build, CMD+R =

    run https://github.com/jashkenas/coffee-scrip-tmbundle

43. Insall CoffeeScript TextMae bundle forCoffeeScript, CMD+B = build, CMD+R =

    run https://github.com/jashkenas/coffee-scrip-tmbundle

44. Insall CoffeeScript Windows?

45. Insall CoffeeScript Windows? get a mac

46. How o use photo by roboppy

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/

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/

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

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

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

    directly

52. Use CoffeeScript on the fly

53. Use CoffeeScript on the fly <script type="ext/javascript" src="http:// jashkenas.github.com/coffee-script/extras/coffee- script.js"></script>

54. Use CoffeeScript on the fly <script type="ext/javascript" src="http:// jashkenas.github.com/coffee-script/extras/coffee- script.js"></script>

    <script type="ext/coffeescript"> alert 'est' </script>

55. Use CoffeeScript on the fly <script type="ext/javascript" src="http:// jashkenas.github.com/coffee-script/extras/coffee- script.js"></script>

    <script type="ext/coffeescript"> alert 'est' </script> <script type="ext/coffeescript" src="myapp.coffee"></script>

56. don’t do this in your production.

57. Synax photo by zigazou76

58. } } } }

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

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

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

    number

62. No trailing semicolon.

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

    Ruby.

64. No { }, (), and ;

65. No { }, (), and ; // javascript if(age >

    20){ voe(); }

66. No { }, (), and ; // javascript if(age >

    20){ voe(); } # coffeescript if age > 20 voe()

67. Variables

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

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

    # coffeescript lang = ["php", "python", "perl", "ruby"] name = "Eddie"

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";

71. Variable Destructuring Assignment

72. Variable Destructuring Assignment # coffeescript x = 100 y =

    10 [x, y] = [y, x]

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];

74. Variable Destructuring Assignment

75. Variable Destructuring Assignment # coffeescript weatherReport = (location) -> [location,

    72, "Mostly Sunny"] [city, emp, forecast] = weatherReport "Berkeley, CA"

76. Variable Destructuring Assignment # coffeescript ag = "<awesome>" [open, conents...,

    close] = ag.split("") # coffeescript weatherReport = (location) -> [location, 72, "Mostly Sunny"] [city, emp, forecast] = weatherReport "Berkeley, CA"

77. Function

78. -> dash rocket

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

80. -> "hello, Ruby Tuesday"

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

    });

82. Function

83. Function # coffeescript say_hello = (guest1, guest2 = "Nayumi") ->

    "Hello #{guest1} and #{guest2}" say_hello "Eddie"

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");

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

86. Global Variables

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

88. <input type="button" value="logout" id="Logout" onclick="logout();" />

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

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

    "logout!?" # coffeescript

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

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 <input type="button" value="logout" id="Logout" onclick="logout();" />

93. Splats Just like Ruby

94. ...

95. Splats

96. Splats # coffeescript sum = (nums...) -> result = 0

    result += n for n in nums result console.log sum(1, 2, 3, 4, 5)

97. Array

98. Array // javascript # coffeescript

99. Array // javascript # coffeescript heroes = [ 'Spider Man',

    'Capain America', 'X-men', 'Iron Man' ]

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'];

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]

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];

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];

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];

105. Array # coffeescript // javascript

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

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

108. Array # coffeescript // javascript heroes[0..2] heroes[1..2] = ["Batman", "ThunderCat"]

     heroes.slice(0, 3);

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);

110. Object

111. Object

112. Object # coffeescript eddie = { name: "Eddie Kao", age:

     18, speciality: "eat" }

113. Object # coffeescript eddie = { name: "Eddie Kao", age:

     18, speciality: "eat" } // javascript var eddie; eddie = { name: "Eddie Kao", age: 18, speciality: "eat" };

114. Object

115. Object # coffeescript eddie = name: "Eddie Kao" age: 18

     lovers: nayumi: name: "Nayumi Hung" age: 18 mary: name: "Mary Bloody" age: 20

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 } } };

117. Loop

118. But we Rubyist barely use for-loop

119. List Comprehension # coffeescript // javascript

120. List Comprehension # coffeescript // javascript alert i for i

     in [1..10]

121. List Comprehension # coffeescript // javascript alert i for i

     in [1..10] var i, _sep; for (i = 1; i <= 10; i++) { alert(i); }

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

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); } }

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); } }

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); }

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); }

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); }

128. Condition

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

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

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

     javascript if (age > 20) { voe(); }

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

     coffeescript voe() if age > 20 // javascript if (age > 20) { voe(); }

133. Synactic Sugar

134. Synactic Sugar # coffeescript // javascript wrie more readable code

     by using synactic sugar.

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

136. # coffeescript Synactic Sugar

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

     light is off

138. # coffeescript Synactic Sugar alert "I can't see anything" if

     light is off alert "It's impossible!" if eddie isnt handsome

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!"

140. // javascript Synactic Sugar

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!"); }

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

     you say ...

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

     you say ... Eddie: Will you marry me? Nayumi: yes!

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!

145. Synactic Sugar

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

     is yes

147. Synactic Sugar // javascript if (answer === true) { alert("I'll

     marry you!"); } # coffeescript alert "I'll marry you!" if answer is yes

148. Synactic Sugar Chained Comparison

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

     my_girl_friends < 100 Chained Comparison

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

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

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

153. Synactic Sugar # coffeescript age ?= 18 // javascript if

     (typeof age !== "undefined" && age !== null) { age; } else { age = 18; }; Exisential Operaor

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

155. Raw JavaScript

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

     + name }`

157. OOP

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

159. Prootype?

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

161. OOP - new

162. OOP - new # coffeescript class Animal construcor: (name, age)

     -> this.name = name this.age = age animal = new Animal("eddie", 18) alert animal

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);

164. OOP - @ = this.

165. OOP - @ = this.

166. # coffeescript OOP - method

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")

168. OOP - inheriance

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()

170. OOP - inheriance

171. OOP - inheriance

172. TL;DR

173. Exend more function?

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

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/

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

177. working with jQuery

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

     go_back_o_sleep(); })

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(); })

180. working with jQuery

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

     opacity: '0.8' }, 2000, 'easeOutQuad');

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');

183. working with jQuery

184. working with jQuery // javascript (function($){ $.fn.exend({ isEmail: function(email){ return

     /some email validaor/.est(email); } }); })(Query);

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);

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

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:

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/

189. Conclusion

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

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

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

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

     loop

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

     loop ()

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

     loop () {}

196. I Love..

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

     course :)

198. Indenation! I Love..

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

     Love..

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

     :)

201. List Comprehension I Love..

202. Synactic Sugar I Love..

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

     ruby_tuesday is awesome

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

     "true" === true // false

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

     I Love..

206. Compilation I Love.. JSLint Approved

207. What else?

208. Make, Rake, Cake.

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

210. Pow.cx

211. CoffeeScript compiler is writen in CoffeeScript.

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

213. Immature? photo by theseanster93

214. Performance? photo by theseanster93 photo by chr1sl4i

215. CoffeeScript Means Giving Up on JavaScript?

216. Learn JavaScript, and Use CoffeeScript.

217. Any Question? photo by jamuraa

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