CoffeeScript in Ruby Tuesday

Dbfa12cd7e1ff8b06a588609369d6e49?s=47 高見龍
November 22, 2011

CoffeeScript in Ruby Tuesday

Dbfa12cd7e1ff8b06a588609369d6e49?s=128

高見龍

November 22, 2011
Tweet

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