CoffeeScript-Ruby-Tuesday

  • 1,786 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,786
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. CoffeeScript@20th Ruby Tuesday photo by gillyberlin
  • 2. @20th Ruby Tuesday
  • 3. You can get this slide onwww.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% Rubyistphoto 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 2011photo by gr3m
  • 10. photo by Andrew
  • 11. JavaScript seemsphoto by apple apple easy..
  • 12. But it’salso easyo getmessy! photo by Marcus Q
  • 13. CoffeeScript
  • 14. We’re not alking about this kind of coffee.photo by Nick Humphries
  • 15. Not this either.photo by naotoj
  • 16. WTF?
  • 17. CoffeeScript is JavaScript just written in different syntax
  • 18. Who wont need this?
  • 19. Who wont 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. What the..?photo by Bryan Gosline
  • 24. I really dont know how owrie good JavaScript!
  • 25. CoffeeScript exposes thegood parts of JavaScript ina simple way.
  • 26. Synax borrowed fromPython and Ruby.I love Python & Ruby
  • 27. If you’re already familiarwith Ruby, you’ve probablyalready learned about 70%CoffeeScript.
  • 28. Really friendly for Rubyist.love_coffeescript == true if rubyist
  • 29. and compiles ino JavaScriptcode.*.coffee -> *.js
  • 30. Your Brain ->JavaScript ->Browser
  • 31. Your Brain ->Friendly CoffeeScript ->JavaScript ->Browser
  • 32. But that doesn’t mean youcan have no knowledgeabout 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. RequirementsYou 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. RequirementsYou 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 ..and don’t forget insall the bundle for CoffeeScript if you’re using TextMae. http://blog.eddie.com.w/2011/08/03/install-coffeescrip/
  • 42. Insall CoffeeScriptTextMae bundle forCoffeeScript https://github.com/jashkenas/coffee-scrip-tmbundle
  • 43. Insall CoffeeScriptTextMae bundle forCoffeeScript https://github.com/jashkenas/coffee-scrip-tmbundle
  • 44. Insall CoffeeScript Windows? get a mac
  • 45. How o use photo by roboppy
  • 46. UsageCompile *.coffee ino *.js > coffee --wach --compile app.coffee http://blog.eddie.com.w/2011/08/03/how-to-use-coffeescrip-compiler/
  • 47. UsageCompile *.coffee ino *.js > coffee --wach --compile app.coffee http://blog.eddie.com.w/2011/08/03/how-to-use-coffeescrip-compiler/
  • 48. Usageyou got a REPL, just like irb.
  • 49. Usageyou got a REPL, just like irb.
  • 50. Don’t like o compile? You can run CoffeeScrip in HTML directly
  • 51. Use CoffeeScript on the fly
  • 52. Use CoffeeScript on the fly<script type="ext/javascript" src="http://jashkenas.github.com/coffee-script/extras/coffee-script.js"></script>
  • 53. 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>
  • 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><script type="ext/coffeescript" src="myapp.coffee"></script>
  • 55. don’t do this in your production.
  • 56. Synax photo by zigazou76
  • 57. } } }}
  • 58. No { }indenations rule! whitespace matters!
  • 59. ( ) is not always necessary. Just like Ruby
  • 60. but..hello +5 means hello(+5) + : convert string to number
  • 61. No trailing semicolon.
  • 62. Return is not necessary. everything is an expression, just like Ruby.
  • 63. No { }, (), and ;
  • 64. No { }, (), and ; if(age > 20){ voe(); } // javascript
  • 65. No { }, (), and ; if(age > 20){ voe(); } // javascript if age > 20 voe() # coffeescript
  • 66. Variable & Function
  • 67. VariableYou don’t have o declare it before using it.
  • 68. VariableYou don’t have o declare it before using it. lang = ["php", "python", "perl", "ruby"] name = "Eddie" # coffeescript
  • 69. VariableYou don’t have o declare it before using it. lang = ["php", "python", "perl", "ruby"] name = "Eddie" # coffeescript var lang, name; lang = ["php", "python", "perl", "ruby"]; name = "Eddie"; // javascript
  • 70. VariableDestructuring Assignment
  • 71. VariableDestructuring Assignment x = 100 y = 10 [x, y] = [y, x] # coffeescript
  • 72. VariableDestructuring Assignment x = 100 y = 10 [x, y] = [y, x] # coffeescript var x, y, _ref; x = 100; y = 10; _ref = [y, x], x = _ref[0], y = _ref[1]; // javascript
  • 73. VariableDestructuring Assignment
  • 74. VariableDestructuring Assignment weatherReport = (location) -> [location, 72, "Mostly Sunny"] [city, emp, forecast] = weatherReport "Berkeley, CA" # coffeescript
  • 75. VariableDestructuring Assignment weatherReport = (location) -> [location, 72, "Mostly Sunny"] [city, emp, forecast] = weatherReport "Berkeley, CA" # coffeescript ag = "<awesome>" [open, conents..., close] = ag.split("") # coffeescript
  • 76. ->dash rocket
  • 77. Not->""<-enjoy coding :)
  • 78. -> "hello, Ruby Tuesday"
  • 79. -> "hello, Ruby Tuesday" (function() { return "hello, Ruby Tuesday"; });
  • 80. Function
  • 81. Functionsay_hello = (guest1, guest2 = "Nayumi") -> "Hello #{guest1} and #{guest2}"say_hello "Eddie" # coffeescript
  • 82. Functionsay_hello = (guest1, guest2 = "Nayumi") -> "Hello #{guest1} and #{guest2}"say_hello "Eddie" # coffeescriptvar say_hello;say_hello = function(guest1, guest2) { if (guest2 == null) { guest2 = "Nayumi"; } return "Hello " + guest1 + " and " + guest2;};say_hello("Eddie"); // javascript
  • 83. => fat arrowhttp://blog.eddie.com.w/2011/11/18/dash-rocket-vs-fat-arrow-in-coffeescrip/
  • 84. SplatsJust like Ruby
  • 85. ...
  • 86. Splats # coffeescript
  • 87. Splats sum = (nums...) -> result = 0 result += n for n in nums result console.log sum(1, 2, 3, 4, 5) # coffeescript
  • 88. Array
  • 89. Array # coffeescript // javascript
  • 90. Arrayheroes = [ Spider Man, Capain America, X-men, Iron Man] # coffeescript // javascript
  • 91. Arrayheroes = [ Spider Man, Capain America, X-men, Iron Man] # coffeescriptvar heroes, students, eachers;heroes = [Spider Man, Capain America, X-men, Iron Man]; // javascript
  • 92. Arrayheroes = [ Spider Man, Capain America, X-men, Iron Man]students = [1..10] # coffeescriptvar heroes, students, eachers;heroes = [Spider Man, Capain America, X-men, Iron Man]; // javascript
  • 93. Arrayheroes = [ Spider Man, Capain America, X-men, Iron Man]students = [1..10] # coffeescriptvar heroes, students, eachers;heroes = [Spider Man, Capain America, X-men, Iron Man];students = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; // javascript
  • 94. Arrayheroes = [ Spider Man, Capain America, X-men, Iron Man]students = [1..10]eachers = [1...10] # coffeescriptvar heroes, students, eachers;heroes = [Spider Man, Capain America, X-men, Iron Man];students = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; // javascript
  • 95. Arrayheroes = [ Spider Man, Capain America, X-men, Iron Man]students = [1..10]eachers = [1...10] # coffeescriptvar heroes, students, eachers;heroes = [Spider Man, Capain America, X-men, Iron Man];students = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];eachers = [1, 2, 3, 4, 5, 6, 7, 8, 9]; // javascript
  • 96. Array # coffeescript // javascript
  • 97. Arrayheroes[0..2] # coffeescript // javascript
  • 98. Arrayheroes[0..2] # coffeescript heroes.slice(0, 3); // javascript
  • 99. Arrayheroes[0..2]heroes[1..2] = ["Batman", "ThunderCat"] # coffeescript heroes.slice(0, 3); // javascript
  • 100. Arrayheroes[0..2]heroes[1..2] = ["Batman", "ThunderCat"] # coffeescript heroes.slice(0, 3); var _ref; [].splice.apply(heroes, [1, 2].concat(_ref = ["Batman", "ThunderCat"])), _ref; // javascript
  • 101. Object
  • 102. Object
  • 103. Objecteddie = { name: "Eddie Kao", age: 18, speciality: "eat" } # coffeescript
  • 104. Objecteddie = { name: "Eddie Kao", age: 18, speciality: "eat" } # coffeescriptvar eddie;eddie = { name: "Eddie Kao", age: 18, speciality: "eat"}; // javascript
  • 105. Object
  • 106. Objecteddie = name: "Eddie Kao" age: 18 lovers: nayumi: name: "Nayumi Hung" age: 18 mary: name: "Mary Bloody" age: 20# coffeescript
  • 107. Objecteddie = var eddie; name: "Eddie Kao" eddie = { age: 18 name: "Eddie Kao", lovers: age: 18, nayumi: lovers: { name: "Nayumi Hung" nayumi: { age: 18 name: "Nayumi Hung", mary: age: 18 name: "Mary Bloody" }, age: 20 mary: { name: "Mary Bloody", age: 20 } } };# coffeescript // javascript
  • 108. Loop
  • 109. But we Rubyist barely use for-loop
  • 110. List Comprehension# coffeescript // javascript
  • 111. List Comprehensionalert i for i in [1..10]# coffeescript // javascript
  • 112. List Comprehensionalert i for i in [1..10] var i, _sep; for (i = 1; i <= 10; i++) { alert(i); }# coffeescript // javascript
  • 113. List Comprehensionalert 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# coffeescript // javascript
  • 114. List Comprehensionalert 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 for (i = 1; i <= 10; i++) {% 2 == 0 if (i % 2 === 0) { alert(i); } }# coffeescript // javascript
  • 115. List Comprehensionalert 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 for (i = 1; i <= 10; i++) {% 2 == 0 if (i % 2 === 0) { alert(i); } }alert i for i in [1..10] by 2# coffeescript // javascript
  • 116. List Comprehensionalert 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 for (i = 1; i <= 10; i++) {% 2 == 0 if (i % 2 === 0) { alert(i); } }alert i for i in [1..10] by 2 for (i = 1, _sep = 2; i <= 10; i += _sep) { alert(i); }# coffeescript // javascript
  • 117. List Comprehensionalert 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 for (i = 1; i <= 10; i++) {% 2 == 0 if (i % 2 === 0) { alert(i); } }alert i for i in [1..10] by 2 for (i = 1, _sep = 2; i <= 10; i += _sep) { alert(i); }alert i * 2 for i in [1..10]# coffeescript // javascript
  • 118. List Comprehensionalert 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 for (i = 1; i <= 10; i++) {% 2 == 0 if (i % 2 === 0) { alert(i); } }alert i for i in [1..10] by 2 for (i = 1, _sep = 2; i <= 10; i += _sep) { alert(i); }alert i * 2 for i in [1..10] for (i = 1; i <= 10; i++) { alert(i * 2);# coffeescript } // javascript
  • 119. Condition
  • 120. Swich 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 # coffeescript
  • 121. ModifierYou can put "if", "unless", "while", "until" behind
  • 122. ModifierYou can put "if", "unless", "while", "until" behind if (age > 20) { voe(); } // javascript
  • 123. ModifierYou can put "if", "unless", "while", "until" behind if (age > 20) { voe(); } // javascript voe() if age > 20 # coffeescript
  • 124. Synactic Sugar
  • 125. Synactic Sugarwrie more readable code by using synactic sugar.# coffeescript // javascript
  • 126. Synactic Sugarwrie more readable code by using synactic sugar.# coffeescript // javascript is === isnt !== true, on, yes true false, off, no false not ! and && or || unless if not until while not of in
  • 127. Synactic Sugar # coffeescript
  • 128. Synactic Sugaralert "I cant see anything" if light is off # coffeescript
  • 129. Synactic Sugaralert "I cant see anything" if light is offalert "Its impossible!" if eddie isnt handsome # coffeescript
  • 130. Synactic Sugaralert "I cant see anything" if light is offalert "Its impossible!" if eddie isnt handsomeif girl is not single alert "Dont Touch! Be Careful!" # coffeescript
  • 131. Synactic Sugarif (light === false) { alert("I cant see anything");}if (eddie !== handsome) { alert("Its impossible!");} if (girl === !single) { alert("Dont Touch! Be Careful!"); } // javascript
  • 132. Synactic SugarWhich answer do you like o hear when you say ...
  • 133. Synactic SugarWhich answer do you like o hear when you say ... Eddie: Will you marry me? Nayumi: yes!
  • 134. Synactic SugarWhich answer do you like o hear when you say ... Eddie: Will you marry me? Nayumi: yes! or
  • 135. Synactic SugarWhich answer do you like o hear when you say ... Eddie: Will you marry me? Nayumi: yes! or Eddie: Will you marry me? Nayumi: true!
  • 136. Synactic Sugar
  • 137. Synactic Sugar alert "Ill marry you!" if answer is yes # coffeescript
  • 138. Synactic Sugar alert "Ill marry you!" if answer is yes # coffeescript if (answer === true) { alert("Ill marry you!"); } // javascript
  • 139. Synactic SugarChained Comparison
  • 140. Synactic SugarChained Comparison console.log "Im awesome!" if 20 < my_girl_friends < 100 # coffeescript
  • 141. Synactic SugarChained Comparison console.log "Im awesome!" if 20 < my_girl_friends < 100 # coffeescript if ((20 < my_girl_friends && my_girl_friends < 100)) { console.log("Im awesome!"); } // javascript
  • 142. Synactic SugarExisential Operaor
  • 143. Synactic SugarExisential Operaor age ?= 18 # coffeescript
  • 144. Synactic SugarExisential Operaor age ?= 18 # coffeescript if (typeof age !== "undefined" && age !== null) { age; } else { age = 18; }; // javascript
  • 145. Raw JavaScriptIf you still prefer the original way..
  • 146. Raw JavaScript say_hello = `function(name){ return "Hello, " + name }` # coffeescript
  • 147. OOPCoffeeScrips classes are syntactic sugar only.
  • 148. Prootype?IMHO, prooype-based OO is no elegant
  • 149. OOP - new
  • 150. OOP - newclass Animal construcor: (name, age) -> this.name = name this.age = ageanimal = new Animal("eddie", 18)alert animal # coffeescript
  • 151. OOP - newclass Animal construcor: (name, age) -> this.name = name this.age = ageanimal = new Animal("eddie", 18)alert animal # coffeescriptvar Animal, animal;Animal = (function() { function Animal(name, age) { this.name = name; this.age = age; } return Animal;})();animal = new Animal("eddie", 18);alert(animal); // javascript
  • 152. OOP - @ = this.
  • 153. OOP - @ = this.
  • 154. OOP - methodclass Animal construcor: (@name, @age) -> say_hello: (something) -> console.log "Hello, #{something}"animal = new Animal("eddie", 18)animal.say_hello("CoffeeScript") # coffeescript
  • 155. OOP - inherianceclass 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() # coffeescript
  • 156. OOP - inheriance
  • 157. OOP - inheriance
  • 158. TL;DR
  • 159. Exend more function?
  • 160. Exend more functionString::repeat = (n) -> Array(n + 1).join @String::downcase = -> @oLowerCase()String::upcase = -> @oUpperCase()String::find = (str) -> @indexOf strString::has = (str) -> (@indexOf str) > 0 # coffeescript http://blog.eddie.com.w/2011/11/19/extend-functionaliy-for-your-class/
  • 161. Cooperae with other JS library or framework?
  • 162. working with jQuery
  • 163. working with jQuery$(document).ready(function() { wakeup(); walk_o_oilet(); pee(); go_back_o_sleep();}) // javascript
  • 164. working with jQuery$(document).ready(function() { wakeup(); walk_o_oilet(); pee(); go_back_o_sleep();}) // javascript$ -> wakeup() walk_o_oilet() pee() go_back_o_sleep() # coffeescript
  • 165. working with jQuery
  • 166. working with jQuery$(#girl).animae({ width: 100px, height: 50px, opacity: 0.8}, 2000, easeOutQuad); // javascript
  • 167. working with jQuery$(#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 # coffeescript
  • 168. working with jQuery
  • 169. working with jQuery(function($){ $.fn.exend({ isEmail: function(email){ return /some email validaor/.est(email); } });})(Query); // javascript
  • 170. working with jQuery(function($){ $.fn.exend({ isEmail: function(email){ return /some email validaor/.est(email); } });})(Query); // javascript$ = jQuery$.fn.exend isEmail: (email) -> /some email validaor/.est email # coffeescript
  • 171. makes jQuery more easy, and more fun http://blog.eddie.com.w/2011/11/14/when-jquery-meets-coffeescrip/
  • 172. ReferencesWebsies: http://jashkenas.github.com/coffee-scrip/ http://blog.eddie.com.w/category/coffeescrip/ http://upgrade2rails31.com/coffee-scripKoans: https://github.com/sleepyfox/coffeescrip-koans
  • 173. References Book: http://pragprog.com/book/tbcoffee/coffeescrip http://arcturo.github.com/library/coffeescrip/index.html http://autoelicum.github.com/Smooh-CoffeeScrip/
  • 174. Conclusion
  • 175. being a 40% RubyistI don’t like.. var return for loop () {}
  • 176. I Love..
  • 177. I Love.. Coding Style I love Python & Ruby, of course :)
  • 178. I Love.. Indenation!
  • 179. I Love.. Anonymous function No global function and variable by default
  • 180. I Love.. String Inerpolation sorry, but string building really sucks :)
  • 181. I Love.. List Comprehension
  • 182. I Love.. Synactic Sugar
  • 183. I Love.. English-like grammaralert "of course it is!" if ruby_tuesday is awesome
  • 184. I Love.. Comparison & Equality "true" == true // true "true" === true // false
  • 185. I Love.. Works with other JS frameworks well. Because it’s just JavaScrip
  • 186. I Love.. Compilation JSLint Approved
  • 187. What else?
  • 188. Make, Rake, Cake.
  • 189. More and more projects are writen in CoffeeScript.
  • 190. Pow.cx
  • 191. CoffeeScript compiler iswriten in CoffeeScript.
  • 192. Tianium Mobilehttp://blog.eddie.com.w/2011/08/03/using-coffeescrip-in-titanium-studio/
  • 193. Immature? photo by theseanster93
  • 194. Performance?photo by chr1sl4i photo by theseanster93
  • 195. CoffeeScript Means GivingUp on JavaScript?
  • 196. Learn JavaScript, and UseCoffeeScript.
  • 197. Any Question? photo by jamuraa
  • 198. Conacts Websie http://www.eddie.com.tw Blog http://blog.eddie.com.tw Plurk http://www.plurk.com/aquarianboy Facebook http://www.facebook.com/eddiekao Google Plus http://www.eddie.com.tw/+ Twiter https://twiter.com/#!/eddiekao Email eddie@digik.com.tw Mobile +886-928-617-687 photo by Eddie