CoffeeScript is a programming language that compiles to JavaScript. It adds syntactic sugar that makes JavaScript easier to write. CoffeeScript code is written with Python/Ruby-inspired syntax and without using curly braces, semicolons, or parentheses. It supports features like classes, object-oriented programming, functions and loops. CoffeeScript code is compiled to equivalent JavaScript code, allowing it to run on any browser or JavaScript runtime.

1. CoffeeScript
a better way to write javascrip
photo by SixRevisions

3. You can get this slide on
www.eddie.com.tw/slides

4. Who am I ?

5. I’m a Flash guy.
photo by JD Hancock

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

7. or just google me with keyword " "

8. JavaScript
becomes
hugely
popular.
9th on TIOBE, Nov 2011
photo by gr3m

9. JavaScript
seems
photo by apple apple
easy..

10. But it’s
not easy
o wrie
good
JavaScript
code.
photo by Marcus Q

11. Today, I won't ell you..
You should give up the way you did

12. I am going o ell you..
Maybe you have a better way to do with this

13. CoffeeScript

14. We’re not
alking
about this
kind of
coffee.
photo by Nick Humphries

15. WTF?

16. CoffeeScript is JavaScript
just written with different syntax

17. ..exposes the good parats of
JavaScript in a simple way.

18. Synax borrowed from
Python and Ruby.
I love Python & Ruby

19. ..and will be compiled ino
JavaScript code.

20. ..that doesn’t mean you can
have no knowledge about
JavaScript.

21. CoffeeScript is not used
o replace JavaScript.

22. Let’s get our feet wet!
photo by jlhopes

23. Insall
photo by Daniel Dionne

24. Requirements
You 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

25. Requirements
You need o insall some software first..
NPM, the “node package manager”
> curl http://npmjs.org/insall.sh | sh

26. 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/

27. How o use
photo by roboppy

28. Usage
Compile *.coffee ino *.js
Compile
> coffee --wach --compile app.coffee
http://blog.eddie.com.w/2011/08/03/how-to-use-coffeescrip-compiler/

29. Synax
photo by zigazou76

30. }
}
}
}

31. No { }
indenations rule!
whitespace matters!

32. ( ) is not necessary.

33. No trailing semicolon.

34. Return is not necessary.
everything is an expression

35. No { }, (), and ;
if(age > 20){
voe();
}
// javascript
if age > 20
voe()
# coffeescript

36. Variable & Function

37. Variable
You 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

38. Function
say_hello = (guest1, guest2 = "Nayumi") ->
"Hello #{guest1} and #{guest2}"
say_hello "Eddie"
# coffeescript
var say_hello;
say_hello = function(guest1, guest2) {
if (guest2 == null) {
guest2 = "Nayumi";
}
return "Hello " + guest1 + " and " + guest2;
};
say_hello("Eddie");
// javascript

39. Array

40. Array
heroes = [
'Spider Man',
'Capain America',
'X-men',
'Iron Man'
]
students = [1..10]
eachers = [1...10] # coffeescript
var 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

41. Array
heroes[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

42. Object

43. Object
eddie = { name: "Eddie Kao", age: 18, speciality: "eat" }
# coffeescript
var eddie;
eddie = {
name: "Eddie Kao",
age: 18,
speciality: "eat"
};
// javascript

44. Object
eddie = 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

45. Loop

46. Loop
alert 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

47. Modifier

48. Modifier
You can put "if", "unless", "while", "until" behind
if (age > 20) {
voe();
}
// javascript
voe() if age > 20
# coffeescript

49. Synactic Sugar

50. Synactic Sugar
wri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

51. Synactic Sugar
alert "I can't see anything" if light is off
alert "It's impossible!" if eddie isnt handsome
if girl is not single
alert "Don't Touch! Be Careful!"
# coffeescript
if (light === false) {
alert("I can't see anything");
}
if (eddie !== handsome) {
alert("It's impossible!");
}
if (girl === !single) {
alert("Don't Touch! Be Careful!");
} // javascript

52. Synactic Sugar
if (Answer === true) {
alert("I'll marry you!");
}
// javascript
alert "I'll marry you!" if Answer is yes

53. Synactic Sugar
age ?= 18
# coffeescript
if (typeof age !== "undefined" && age !== null) {
age;
} else {
age = 18;
};
// javascript

54. Raw JavaScript
If you still prefer the original way

55. Raw JavaScript
say_hello = `function(name){
return "Hello, " + name
}`
# coffeescript
var say_hello;
say_hello = function(name){
return "Hello, " + name
};
// javascript

56. OOP

57. OOP - new
class Animal
construcor: (name, age) ->
this.name = name
this.age = age
animal = new Animal("eddie", 18)
alert animal # coffeescript
var Animal, animal;
Animal = (function() {
function Animal(name, age) {
this.name = name;
this.age = age;
}
return Animal;
})();
animal = new Animal("eddie", 18);
alert(animal); // javascript

58. OOP - method
class Animal
construcor: (@name, @age) ->
say_hello: (something) ->
console.log "Hello, #{something}"
animal = new Animal("eddie", 18)
animal.say_hello("CoffeeScript") # coffeescript
var 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); // javascript
animal.say_hello("CoffeeScript");

59. OOP - inheriance
class 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
TL; DR // javascript

60. References
Websies:
http://jashkenas.github.com/coffee-scrip/
http://blog.eddie.com.w/category/coffeescrip/
Book:
http://pragprog.com/book/tbcoffee/coffeescrip

61. the good parts
photo by Steve Ganz
I love

62. I Love..
Coding Style
I love Python & Ruby, of course :)

63. I Love..
Indenation!

64. I Love..
Anonymous function
No global function and variable by default

65. I Love..
String Inerpolation
sorry, but string building really sucks :)

66. I Love..
List Comprehension

67. I Love..
Synactic Sugar

68. I Love..
English-like grammar
alert "of course it is!" if PHPConf is awesome

69. I Love..
Comparison & Equality
"true" == true // true
"true" === true // false

70. I Love..
Works with other JS
frameworks well.
Because it’s just JavaScrip

71. I Love..
Compilation
JSLint Approved

72. What else?

73. CoffeeScript compiler is
writen in CoffeeScript.

74. Tianium Mobile
http://blog.eddie.com.w/2011/08/03/using-coffeescrip-in-titanium-studio/

75. photo by Andrew

76. Immature?
photo by theseanster93

77. Performance?
photo by chr1sl4i photo by theseanster93

78. CoffeeScript Means Giving
Up on JavaScript?

79. Learn JavaScript, and Use
CoffeeScript.

80. Any Question? photo by jamuraa

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