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

CoffeeScript

on

  • 1,714 views

 

Statistics

Views

Total Views
1,714
Views on SlideShare
1,705
Embed Views
9

Actions

Likes
6
Downloads
0
Comments
0

1 Embed 9

http://paper.li 9

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

CoffeeScript CoffeeScript Presentation Transcript

  • 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 / 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
  • or just google me with keyword " "
  • JavaScript becomes hugely popular. 9th on TIOBE, Nov 2011photo by gr3m
  • 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 coffee.photo by Nick Humphries
  • 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 > cd node > ./configure > make > sudo make insall
  • RequirementsYou need o insall some software first.. NPM, the “node package manager” > curl http://npmjs.org/insall.sh | sh
  • 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/
  • 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/how-to-use-coffeescrip-compiler/
  • 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() # coffeescript
  • Variable & Function
  • 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
  • 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
  • Array
  • 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
  • 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
  • Object
  • Objecteddie = { name: "Eddie Kao", age: 18, speciality: "eat" } # coffeescriptvar eddie;eddie = { name: "Eddie Kao", age: 18, speciality: "eat"}; // javascript
  • 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
  • Loop
  • 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
  • Modifier
  • ModifierYou can put "if", "unless", "while", "until" behind if (age > 20) { voe(); } // javascript voe() if age > 20 # coffeescript
  • Synactic Sugar
  • 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
  • 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
  • Synactic Sugar if (Answer === true) { alert("Ill marry you!"); } // javascript alert "Ill marry you!" if Answer is yes
  • Synactic Sugarage ?= 18 # coffeescriptif (typeof age !== "undefined" && age !== null) { age;} else { age = 18;}; // javascript
  • Raw JavaScriptIf you still prefer the original way
  • Raw JavaScriptsay_hello = `function(name){ return "Hello, " + name}` # coffeescriptvar say_hello;say_hello = function(name){ return "Hello, " + name}; // javascript
  • OOP
  • 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
  • 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");
  • 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
  • ReferencesWebsies: http://jashkenas.github.com/coffee-scrip/ http://blog.eddie.com.w/category/coffeescrip/Book: http://pragprog.com/book/tbcoffee/coffeescrip
  • 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.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