CoffeeScript

  • 1,432 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,432
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
6

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 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