CoffeeScript@20th Ruby Tuesday                     photo by gillyberlin
@20th Ruby Tuesday
You can get this slide onwww.eddie.com.tw/slides
Who am I ?
I’m a Flash guy.photo by JD Hancock
hmm..                          maybe only                          60% Flasher                                  and       ...
a.k.a Eddie or Aquarianboy Live and work in Taipei, Taiwan. Serving in my own little tiny company. Flash / AS3 / Ruby / Ra...
or just google with the keyword "   "
JavaScript                becomes                hugely                popular.                9th on TIOBE, Nov 2011photo...
photo by Andrew
JavaScript                       seemsphoto by apple apple                       easy..
But it’salso easyo getmessy!            photo by Marcus Q
CoffeeScript
We’re not                       alking                    about this                       kind of                       ...
Not this either.photo by naotoj
WTF?
CoffeeScript is JavaScript      just written in different syntax
Who wont need this?
Who wont need this?people who already know javascrip(the good parts) very well.
What’s the problems?
photo by Steve Ganz
Bad smell..Will it be equal? that’s the question.   0 == ""                        // true   1 == true                    ...
What the..?photo by Bryan Gosline
I really dont know how owrie good JavaScript!
CoffeeScript exposes thegood parts of JavaScript ina simple way.
Synax borrowed fromPython and Ruby.I love Python & Ruby
If you’re already familiarwith Ruby, you’ve probablyalready learned about 70%CoffeeScript.
Really friendly for Rubyist.love_coffeescript == true if rubyist
and compiles ino JavaScriptcode.*.coffee -> *.js
Your Brain ->JavaScript ->Browser
Your Brain ->Friendly CoffeeScript ->JavaScript ->Browser
But that doesn’t mean youcan have no knowledgeabout JavaScript.
CoffeeScript is NOT used o replace JavaScript.
Let’s get our feet wet!photo by jlhopes
What are we looking at       oday?
- Insallation- Usage- Synax
Insall          photo by Daniel Dionne
RequirementsYou need o insall some software first..    Node.js     >   git clone git://github.com/joyent/node.git     >  ...
RequirementsYou need o insall some software first..    NPM, the “node package manager”     > curl http://npmjs.org/insal...
Insall CoffeeScript  CoffeeScript   > npm insall coffee-script   > coffee -v   CoffeeScript version 1.1.3     http://blo...
Insall CoffeeScript  CoffeeScript on MacOS   > brew insall coffee-script  ..and don’t forget insall the bundle for  Cof...
Insall CoffeeScriptTextMae bundle forCoffeeScript        https://github.com/jashkenas/coffee-scrip-tmbundle
Insall CoffeeScriptTextMae bundle forCoffeeScript        https://github.com/jashkenas/coffee-scrip-tmbundle
Insall CoffeeScript         Windows?            get a mac
How o use        photo by roboppy
UsageCompile *.coffee ino *.js     > coffee --wach --compile app.coffee  http://blog.eddie.com.w/2011/08/03/how-to-use-...
UsageCompile *.coffee ino *.js     > coffee --wach --compile app.coffee  http://blog.eddie.com.w/2011/08/03/how-to-use-...
Usageyou got a REPL, just like irb.
Usageyou got a REPL, just like irb.
Don’t like o compile? You can run CoffeeScrip in HTML directly
Use CoffeeScript on the fly
Use CoffeeScript on the fly<script type="ext/javascript" src="http://jashkenas.github.com/coffee-script/extras/coffee-scri...
Use CoffeeScript on the fly<script type="ext/javascript" src="http://jashkenas.github.com/coffee-script/extras/coffee-scri...
Use CoffeeScript on the fly<script type="ext/javascript" src="http://jashkenas.github.com/coffee-script/extras/coffee-scri...
don’t do this in your production.
Synax         photo by zigazou76
}        }    }}
No { }indenations rule!    whitespace matters!
( ) is not always    necessary.     Just like Ruby
but..hello +5 means hello(+5)     + : convert string to number
No trailing semicolon.
Return is not necessary.   everything is an expression, just like Ruby.
No { }, (), and ;
No { }, (), and ; if(age > 20){     voe(); }                    // javascript
No { }, (), and ; if(age > 20){     voe(); }                    // javascript if age > 20     voe()                    #...
Variable & Function
VariableYou don’t have o declare it before using it.
VariableYou don’t have o declare it before using it. lang = ["php", "python", "perl", "ruby"] name = "Eddie"             ...
VariableYou don’t have o declare it before using it. lang = ["php", "python", "perl", "ruby"] name = "Eddie"             ...
VariableDestructuring Assignment
VariableDestructuring Assignment x = 100 y = 10 [x, y] = [y, x]                           # coffeescript
VariableDestructuring Assignment x = 100 y = 10 [x, y] = [y, x]                                            # coffeescript ...
VariableDestructuring Assignment
VariableDestructuring Assignment weatherReport = (location) ->  [location, 72, "Mostly Sunny"] [city, emp, forecast] = we...
VariableDestructuring Assignment weatherReport = (location) ->  [location, 72, "Mostly Sunny"] [city, emp, forecast] = we...
->dash rocket
Not->""<-enjoy coding :)
-> "hello, Ruby Tuesday"
-> "hello, Ruby Tuesday"    (function() {      return "hello, Ruby Tuesday";    });
Function
Functionsay_hello = (guest1, guest2 = "Nayumi") ->   "Hello #{guest1} and #{guest2}"say_hello "Eddie"                     ...
Functionsay_hello = (guest1, guest2 = "Nayumi") ->   "Hello #{guest1} and #{guest2}"say_hello "Eddie"                     ...
=>                              fat arrowhttp://blog.eddie.com.w/2011/11/18/dash-rocket-vs-fat-arrow-in-coffeescrip/
SplatsJust like Ruby
...
Splats         # coffeescript
Splats sum = (nums...) ->  result = 0  result += n for n in nums  result console.log sum(1, 2, 3, 4, 5)                   ...
Array
Array        # coffeescript        // javascript
Arrayheroes = [   Spider Man,   Capain America,   X-men,   Iron Man]                        # coffeescript               ...
Arrayheroes = [   Spider Man,   Capain America,   X-men,   Iron Man]                                                     ...
Arrayheroes = [   Spider Man,   Capain America,   X-men,   Iron Man]students = [1..10]                                   ...
Arrayheroes = [   Spider Man,   Capain America,   X-men,   Iron Man]students = [1..10]                                   ...
Arrayheroes = [   Spider Man,   Capain America,   X-men,   Iron Man]students = [1..10]eachers = [1...10]                ...
Arrayheroes = [   Spider Man,   Capain America,   X-men,   Iron Man]students = [1..10]eachers = [1...10]                ...
Array        # coffeescript        // javascript
Arrayheroes[0..2]               # coffeescript               // javascript
Arrayheroes[0..2]                       # coffeescript heroes.slice(0, 3);                       // javascript
Arrayheroes[0..2]heroes[1..2] = ["Batman", "ThunderCat"]                                          # coffeescript heroes.sl...
Arrayheroes[0..2]heroes[1..2] = ["Batman", "ThunderCat"]                                                               # c...
Object
Object
Objecteddie = { name: "Eddie Kao", age: 18, speciality: "eat" }                                                      # cof...
Objecteddie = { name: "Eddie Kao", age: 18, speciality: "eat" }                                                      # cof...
Object
Objecteddie = name: "Eddie Kao" age: 18 lovers:   nayumi:    name: "Nayumi Hung"    age: 18   mary:    name: "Mary Bloody"...
Objecteddie =                   var eddie; name: "Eddie Kao"        eddie = { age: 18                     name: "Eddie Kao...
Loop
But we Rubyist barely use for-loop
List Comprehension# coffeescript       // javascript
List Comprehensionalert i for i in [1..10]# coffeescript             // javascript
List Comprehensionalert i for i in [1..10]   var i, _sep;                           for (i = 1; i <= 10; i++) {          ...
List Comprehensionalert i for i in [1..10]          var i, _sep;                                  for (i = 1; i <= 10; i+...
List Comprehensionalert i for i in [1..10]          var i, _sep;                                  for (i = 1; i <= 10; i+...
List Comprehensionalert i for i in [1..10]          var i, _sep;                                  for (i = 1; i <= 10; i+...
List Comprehensionalert i for i in [1..10]          var i, _sep;                                  for (i = 1; i <= 10; i+...
List Comprehensionalert i for i in [1..10]          var i, _sep;                                  for (i = 1; i <= 10; i+...
List Comprehensionalert i for i in [1..10]          var i, _sep;                                  for (i = 1; i <= 10; i+...
Condition
Swich swich day  when "Mon" then go work  when "Tue" then go relax  when "Thu" then go iceFishing  when "Fri", "Sat"    ...
ModifierYou can put "if", "unless", "while", "until" behind
ModifierYou can put "if", "unless", "while", "until" behind if (age > 20) {   voe(); }                                    ...
ModifierYou can put "if", "unless", "while", "until" behind if (age > 20) {   voe(); }                                    ...
Synactic Sugar
Synactic Sugarwrie more readable code by using synactic sugar.# coffeescript                                // javascript
Synactic Sugarwrie more readable code by using synactic sugar.# coffeescript                                // javascri...
Synactic Sugar                  # coffeescript
Synactic Sugaralert "I cant see anything" if light is off                                           # coffeescript
Synactic Sugaralert "I cant see anything" if light is offalert "Its impossible!" if eddie isnt handsome                  ...
Synactic Sugaralert "I cant see anything" if light is offalert "Its impossible!" if eddie isnt handsomeif girl is not sin...
Synactic Sugarif (light === false) {     alert("I cant see anything");}if (eddie !== handsome) {      alert("Its impossib...
Synactic SugarWhich answer do you like o hear when you say ...
Synactic SugarWhich answer do you like o hear when you say ...          Eddie: Will you marry me?          Nayumi: yes!
Synactic SugarWhich answer do you like o hear when you say ...          Eddie: Will you marry me?          Nayumi: yes! ...
Synactic SugarWhich answer do you like o hear when you say ...          Eddie: Will you marry me?          Nayumi: yes! ...
Synactic Sugar
Synactic Sugar alert "Ill marry you!" if answer is yes                                     # coffeescript
Synactic Sugar alert "Ill marry you!" if answer is yes                                     # coffeescript if (answer === ...
Synactic SugarChained Comparison
Synactic SugarChained Comparison console.log "Im awesome!" if 20 < my_girl_friends < 100                                 ...
Synactic SugarChained Comparison console.log "Im awesome!" if 20 < my_girl_friends < 100                                 ...
Synactic SugarExisential Operaor
Synactic SugarExisential Operaor age ?= 18                       # coffeescript
Synactic SugarExisential Operaor age ?= 18                                               # coffeescript if (typeof age ...
Raw JavaScriptIf you still prefer the original way..
Raw JavaScript     say_hello = `function(name){        return "Hello, " + name     }`                          # coffeescr...
OOPCoffeeScrips classes are syntactic sugar only.
Prootype?IMHO, prooype-based OO is no elegant
OOP - new
OOP - newclass Animal   construcor: (name, age) ->       this.name = name       this.age = ageanimal = new Animal("eddie"...
OOP - newclass Animal   construcor: (name, age) ->       this.name = name       this.age = ageanimal = new Animal("eddie"...
OOP - @ = this.
OOP - @ = this.
OOP - methodclass Animal   construcor: (@name, @age) ->   say_hello: (something) ->      console.log "Hello, #{something}...
OOP - inherianceclass Animal   construcor: (@name, @age) ->   say_hello: (something) ->       alert "Hello, #{something}...
OOP - inheriance
OOP - inheriance
TL;DR
Exend more function?
Exend more functionString::repeat = (n) -> Array(n + 1).join @String::downcase = -> @oLowerCase()String::upcase = -> @o...
Cooperae with other JS library or framework?
working with jQuery
working with jQuery$(document).ready(function() {   wakeup();   walk_o_oilet();   pee();   go_back_o_sleep();})        ...
working with jQuery$(document).ready(function() {   wakeup();   walk_o_oilet();   pee();   go_back_o_sleep();})        ...
working with jQuery
working with jQuery$(#girl).animae({   width: 100px,   height: 50px,   opacity: 0.8}, 2000, easeOutQuad);                ...
working with jQuery$(#girl).animae({   width: 100px,   height: 50px,   opacity: 0.8}, 2000, easeOutQuad);                ...
working with jQuery
working with jQuery(function($){   $.fn.exend({       isEmail: function(email){         return /some email validaor/.es...
working with jQuery(function($){   $.fn.exend({       isEmail: function(email){         return /some email validaor/.es...
makes jQuery more easy,    and more fun http://blog.eddie.com.w/2011/11/14/when-jquery-meets-coffeescrip/
ReferencesWebsies: http://jashkenas.github.com/coffee-scrip/ http://blog.eddie.com.w/category/coffeescrip/ http://upgr...
References Book: http://pragprog.com/book/tbcoffee/coffeescrip http://arcturo.github.com/library/coffeescrip/index.html ...
Conclusion
being a 40% RubyistI don’t like..    var    return    for loop    ()    {}
I Love..
I Love..              Coding Style           I love Python & Ruby, of course :)
I Love..           Indenation!
I Love..    Anonymous function     No global function and variable by default
I Love..     String Inerpolation       sorry, but string building really sucks :)
I Love..     List Comprehension
I Love..           Synactic Sugar
I Love..     English-like grammaralert "of course it is!" if ruby_tuesday is awesome
I Love..  Comparison & Equality           "true" == true // true           "true" === true // false
I Love..    Works with other JS     frameworks well.           Because it’s just JavaScrip
I Love..           Compilation            JSLint Approved
What else?
Make, Rake, Cake.
More and more projects are writen in CoffeeScript.
Pow.cx
CoffeeScript compiler iswriten in CoffeeScript.
Tianium Mobilehttp://blog.eddie.com.w/2011/08/03/using-coffeescrip-in-titanium-studio/
Immature?            photo by theseanster93
Performance?photo by chr1sl4i           photo by theseanster93
CoffeeScript Means GivingUp on JavaScript?
Learn JavaScript, and UseCoffeeScript.
Any Question?   photo by jamuraa
Conacts     Websie    http://www.eddie.com.tw     Blog       http://blog.eddie.com.tw     Plurk      http://www.plurk.co...
Upcoming SlideShare
Loading in...5
×

CoffeeScript-Ruby-Tuesday

1,909

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,909
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

CoffeeScript-Ruby-Tuesday

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

×