CoffeeScript                        a better way to write javascripphoto by SixRevisions
You can get this slide onwww.eddie.com.tw/slides
Who am I ?
I’m a Flash guy.photo by JD Hancock
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 me with keyword "   "
JavaScript                becomes                hugely                popular.                9th on TIOBE, Nov 2011photo...
JavaScript                       seemsphoto by apple apple                       easy..
But it’snot easyo wriegoodJavaScriptcode.             photo by Marcus Q
Today, I wont ell you..   You should give up the way you did
I am going o ell you..Maybe you have a better way to do with this
CoffeeScript
We’re not                      alking                   about this                      kind of                      coff...
WTF?
CoffeeScript is JavaScript     just written with different syntax
..exposes the good parats ofJavaScript in a simple way.
Synax borrowed from  Python and Ruby.      I love Python & Ruby
..and will be compiled inoJavaScript code.
..that doesn’t mean you canhave no knowledge aboutJavaScript.
CoffeeScript is not used o replace JavaScript.
Let’s get our feet wet!photo by jlhopes
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...
How o use        photo by roboppy
UsageCompile *.coffee ino *.js    Compile     > coffee --wach --compile app.coffee  http://blog.eddie.com.w/2011/08/03/...
Synax         photo by zigazou76
}        }    }}
No { }indenations rule!    whitespace matters!
( ) is not necessary.
No trailing semicolon.
Return is not necessary.      everything is an expression
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. lang = ["php", "python", "perl", "ruby"] name = "Eddie"             ...
Functionsay_hello = (guest1, guest2 = "Nayumi") ->   "Hello #{guest1} and #{guest2}"say_hello "Eddie"                     ...
Array
Arrayheroes = [   Spider Man,   Capain America,   X-men,   Iron Man]students = [1..10]eachers = [1...10]                ...
Arrayheroes[0..2]heroes[1..2] = ["Batman", "ThunderCat"]                                                               # c...
Object
Objecteddie = { name: "Eddie Kao", age: 18, speciality: "eat" }                                                      # cof...
Objecteddie =                   var eddie; name: "Eddie Kao"        eddie = { age: 18                     name: "Eddie Kao...
Loop
Loopalert i for i in [1..10]          var i, _sep;                                  for (i = 1; i <= 10; i++) {          ...
Modifier
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                                // javascri...
Synactic Sugaralert "I cant see anything" if light is offalert "Its impossible!" if eddie isnt handsomeif girl is not sin...
Synactic Sugar if (Answer === true) {     alert("Ill marry you!"); }                                      // javascript  ...
Synactic Sugarage ?= 18                                                   # coffeescriptif (typeof age !== "undefined" && ...
Raw JavaScriptIf you still prefer the original way
Raw JavaScriptsay_hello = `function(name){   return "Hello, " + name}`                               # coffeescriptvar say...
OOP
OOP - newclass Animal   construcor: (name, age) ->       this.name = name       this.age = ageanimal = new Animal("eddie"...
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}...
ReferencesWebsies: http://jashkenas.github.com/coffee-scrip/ http://blog.eddie.com.w/category/coffeescrip/Book: http:/...
the good partsphoto by Steve Ganz                               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 grammar  alert "of course it is!" if PHPConf 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?
CoffeeScript compiler iswriten in CoffeeScript.
Tianium Mobilehttp://blog.eddie.com.w/2011/08/03/using-coffeescrip-in-titanium-studio/
photo by Andrew
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...
CoffeeScript
Upcoming SlideShare
Loading in...5
×

CoffeeScript

1,551

Published on

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

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

No notes for slide

CoffeeScript

  1. 1. CoffeeScript a better way to write javascripphoto by SixRevisions
  2. 2. You can get this slide onwww.eddie.com.tw/slides
  3. 3. Who am I ?
  4. 4. I’m a Flash guy.photo by JD Hancock
  5. 5. 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
  6. 6. or just google me with keyword " "
  7. 7. JavaScript becomes hugely popular. 9th on TIOBE, Nov 2011photo by gr3m
  8. 8. JavaScript seemsphoto by apple apple easy..
  9. 9. But it’snot easyo wriegoodJavaScriptcode. photo by Marcus Q
  10. 10. Today, I wont ell you.. You should give up the way you did
  11. 11. I am going o ell you..Maybe you have a better way to do with this
  12. 12. CoffeeScript
  13. 13. We’re not alking about this kind of coffee.photo by Nick Humphries
  14. 14. WTF?
  15. 15. CoffeeScript is JavaScript just written with different syntax
  16. 16. ..exposes the good parats ofJavaScript in a simple way.
  17. 17. Synax borrowed from Python and Ruby. I love Python & Ruby
  18. 18. ..and will be compiled inoJavaScript code.
  19. 19. ..that doesn’t mean you canhave no knowledge aboutJavaScript.
  20. 20. CoffeeScript is not used o replace JavaScript.
  21. 21. Let’s get our feet wet!photo by jlhopes
  22. 22. Insall photo by Daniel Dionne
  23. 23. 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
  24. 24. RequirementsYou need o insall some software first.. NPM, the “node package manager” > curl http://npmjs.org/insall.sh | sh
  25. 25. 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/
  26. 26. How o use photo by roboppy
  27. 27. UsageCompile *.coffee ino *.js Compile > coffee --wach --compile app.coffee http://blog.eddie.com.w/2011/08/03/how-to-use-coffeescrip-compiler/
  28. 28. Synax photo by zigazou76
  29. 29. } } }}
  30. 30. No { }indenations rule! whitespace matters!
  31. 31. ( ) is not necessary.
  32. 32. No trailing semicolon.
  33. 33. Return is not necessary. everything is an expression
  34. 34. No { }, (), and ; if(age > 20){ voe(); } // javascript if age > 20 voe() # coffeescript
  35. 35. Variable & Function
  36. 36. 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
  37. 37. 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
  38. 38. Array
  39. 39. 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
  40. 40. 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
  41. 41. Object
  42. 42. Objecteddie = { name: "Eddie Kao", age: 18, speciality: "eat" } # coffeescriptvar eddie;eddie = { name: "Eddie Kao", age: 18, speciality: "eat"}; // javascript
  43. 43. 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
  44. 44. Loop
  45. 45. Loopalert 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
  46. 46. Modifier
  47. 47. ModifierYou can put "if", "unless", "while", "until" behind if (age > 20) { voe(); } // javascript voe() if age > 20 # coffeescript
  48. 48. Synactic Sugar
  49. 49. 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
  50. 50. 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!" # coffeescriptif (light === false) { alert("I cant see anything");}if (eddie !== handsome) { alert("Its impossible!");}if (girl === !single) { alert("Dont Touch! Be Careful!");} // javascript
  51. 51. Synactic Sugar if (Answer === true) { alert("Ill marry you!"); } // javascript alert "Ill marry you!" if Answer is yes
  52. 52. Synactic Sugarage ?= 18 # coffeescriptif (typeof age !== "undefined" && age !== null) { age;} else { age = 18;}; // javascript
  53. 53. Raw JavaScriptIf you still prefer the original way
  54. 54. Raw JavaScriptsay_hello = `function(name){ return "Hello, " + name}` # coffeescriptvar say_hello;say_hello = function(name){ return "Hello, " + name}; // javascript
  55. 55. OOP
  56. 56. 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
  57. 57. OOP - methodclass Animal construcor: (@name, @age) -> say_hello: (something) -> console.log "Hello, #{something}"animal = new Animal("eddie", 18)animal.say_hello("CoffeeScript") # coffeescriptvar Animal, animal;Animal = (function() { function Animal(name, age) { this.name = name; this.age = age; } Animal.prootype.say_hello = function(something) { return console.log("Hello, " + something); }; return Animal;})();animal = new Animal("eddie", 18); // javascriptanimal.say_hello("CoffeeScript");
  58. 58. 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() # coffeescriptTL; DR // javascript
  59. 59. ReferencesWebsies: http://jashkenas.github.com/coffee-scrip/ http://blog.eddie.com.w/category/coffeescrip/Book: http://pragprog.com/book/tbcoffee/coffeescrip
  60. 60. the good partsphoto by Steve Ganz I love
  61. 61. I Love.. Coding Style I love Python & Ruby, of course :)
  62. 62. I Love.. Indenation!
  63. 63. I Love.. Anonymous function No global function and variable by default
  64. 64. I Love.. String Inerpolation sorry, but string building really sucks :)
  65. 65. I Love.. List Comprehension
  66. 66. I Love.. Synactic Sugar
  67. 67. I Love.. English-like grammar alert "of course it is!" if PHPConf is awesome
  68. 68. I Love.. Comparison & Equality "true" == true // true "true" === true // false
  69. 69. I Love.. Works with other JS frameworks well. Because it’s just JavaScrip
  70. 70. I Love.. Compilation JSLint Approved
  71. 71. What else?
  72. 72. CoffeeScript compiler iswriten in CoffeeScript.
  73. 73. Tianium Mobilehttp://blog.eddie.com.w/2011/08/03/using-coffeescrip-in-titanium-studio/
  74. 74. photo by Andrew
  75. 75. Immature? photo by theseanster93
  76. 76. Performance?photo by chr1sl4i photo by theseanster93
  77. 77. CoffeeScript Means GivingUp on JavaScript?
  78. 78. Learn JavaScript, and UseCoffeeScript.
  79. 79. Any Question? photo by jamuraa
  80. 80. 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

×