• Save
CoffeeScript
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • 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,815
On Slideshare
1,806
From Embeds
9
Number of Embeds
1

Actions

Shares
Downloads
0
Comments
0
Likes
6

Embeds 9

http://paper.li 9

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