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