1. CoffeeScript
@20th Ruby Tuesday
photo by gillyberlin

2. @20th Ruby Tuesday

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. hmm..
maybe only
60% Flasher
and
40% Rubyist
photo by Crashmaster007

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

8. or just google with the keyword " "

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

10. photo by Andrew

11. JavaScript
seems
photo by apple apple
easy..

12. But it’s
also easy
o get
messy!
photo by Marcus Q

13. CoffeeScript

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

15. Not this either.
photo by naotoj

16. WTF?

17. CoffeeScript is JavaScript
just written in different syntax

18. Who won't need this?

19. Who won't need this?
people who already know javascrip(the good parts) very well.

20. What’s the problems?

21. photo by Steve Ganz

22. Bad smell..
Will it be equal? that’s the question.
0 == "" // true
1 == true // true
1 == "1" // true
1 == "1.0" // true
"true" == true // true
"true" === true // false

23. What the..?
photo by Bryan Gosline

24. I really don't know how o
wrie good JavaScript!

25. CoffeeScript exposes the
good parts of JavaScript in
a simple way.

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

27. If you’re already familiar
with Ruby, you’ve probably
already learned about 70%
CoffeeScript.

28. Really friendly for Rubyist.
love_coffeescript == true if rubyist

29. and compiles ino JavaScript
code.
*.coffee -> *.js

30. Your Brain ->
JavaScript ->
Browser

31. Your Brain ->
Friendly CoffeeScript ->
JavaScript ->
Browser

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

33. CoffeeScript is NOT used
o replace JavaScript.

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

35. What are we looking at
oday?

36. - Insallation
- Usage
- Synax

37. Insall
photo by Daniel Dionne

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

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

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

41. Insall CoffeeScript
CoffeeScript on MacOS
> brew insall coffee-script
..and don’t forget insall the bundle for
CoffeeScript if you’re using TextMae.
http://blog.eddie.com.w/2011/08/03/install-coffeescrip/

42. Insall CoffeeScript
TextMae bundle forCoffeeScript
https://github.com/jashkenas/coffee-scrip-tmbundle

43. Insall CoffeeScript
TextMae bundle forCoffeeScript
https://github.com/jashkenas/coffee-scrip-tmbundle

44. Insall CoffeeScript
Windows?
get a mac

45. How o use
photo by roboppy

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

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

48. Usage
you got a REPL, just like irb.

49. Usage
you got a REPL, just like irb.

50. Don’t like o compile?
You can run CoffeeScrip in HTML directly

51. Use CoffeeScript on the fly

52. Use CoffeeScript on the fly
<script type="ext/javascript" src="http://
jashkenas.github.com/coffee-script/extras/coffee-
script.js"></script>

53. Use CoffeeScript on the fly
<script type="ext/javascript" src="http://
jashkenas.github.com/coffee-script/extras/coffee-
script.js"></script>
<script type="ext/coffeescript">
alert 'est'
</script>

54. Use CoffeeScript on the fly
<script type="ext/javascript" src="http://
jashkenas.github.com/coffee-script/extras/coffee-
script.js"></script>
<script type="ext/coffeescript">
alert 'est'
</script>
<script type="ext/coffeescript" src="myapp.coffee"></script>

55. don’t do this in your production.

56. Synax
photo by zigazou76

57. }
}
}
}

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

59. ( ) is not always
necessary.
Just like Ruby

60. but..
hello +5 means hello(+5)
+ : convert string to number

61. No trailing semicolon.

62. Return is not necessary.
everything is an expression, just like Ruby.

63. No { }, (), and ;

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

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

66. Variable & Function

67. Variable
You don’t have o declare it before using it.

68. Variable
You don’t have o declare it before using it.
lang = ["php", "python", "perl", "ruby"]
name = "Eddie"
# coffeescript

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

70. Variable
Destructuring Assignment

71. Variable
Destructuring Assignment
x = 100
y = 10
[x, y] = [y, x]
# coffeescript

72. Variable
Destructuring Assignment
x = 100
y = 10
[x, y] = [y, x]
# coffeescript
var x, y, _ref;
x = 100;
y = 10;
_ref = [y, x], x = _ref[0], y = _ref[1];
// javascript

73. Variable
Destructuring Assignment

74. Variable
Destructuring Assignment
weatherReport = (location) ->
[location, 72, "Mostly Sunny"]
[city, emp, forecast] = weatherReport "Berkeley, CA"
# coffeescript

75. Variable
Destructuring Assignment
weatherReport = (location) ->
[location, 72, "Mostly Sunny"]
[city, emp, forecast] = weatherReport "Berkeley, CA"
# coffeescript
ag = "<awesome>"
[open, conents..., close] = ag.split("")
# coffeescript

76. ->
dash rocket

77. Not
->""<-
enjoy coding :)

78. -> "hello, Ruby Tuesday"

79. -> "hello, Ruby Tuesday"
(function() {
return "hello, Ruby Tuesday";
});

80. Function

81. Function
say_hello = (guest1, guest2 = "Nayumi") ->
"Hello #{guest1} and #{guest2}"
say_hello "Eddie"
# coffeescript

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

83. =>
fat arrow
http://blog.eddie.com.w/2011/11/18/dash-rocket-vs-fat-arrow-in-coffeescrip/

84. Splats
Just like Ruby

85. ...

86. Splats
# coffeescript

87. Splats
sum = (nums...) ->
result = 0
result += n for n in nums
result
console.log sum(1, 2, 3, 4, 5)
# coffeescript

88. Array

89. Array
# coffeescript
// javascript

90. Array
heroes = [
'Spider Man',
'Capain America',
'X-men',
'Iron Man'
]
# coffeescript
// javascript

91. Array
heroes = [
'Spider Man',
'Capain America',
'X-men',
'Iron Man'
]
# coffeescript
var heroes, students, eachers;
heroes = ['Spider Man', 'Capain America', 'X-men', 'Iron Man'];
// javascript

92. Array
heroes = [
'Spider Man',
'Capain America',
'X-men',
'Iron Man'
]
students = [1..10]
# coffeescript
var heroes, students, eachers;
heroes = ['Spider Man', 'Capain America', 'X-men', 'Iron Man'];
// javascript

93. Array
heroes = [
'Spider Man',
'Capain America',
'X-men',
'Iron Man'
]
students = [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];
// javascript

94. 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];
// javascript

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

96. Array
# coffeescript
// javascript

97. Array
heroes[0..2]
# coffeescript
// javascript

98. Array
heroes[0..2]
# coffeescript
heroes.slice(0, 3);
// javascript

99. Array
heroes[0..2]
heroes[1..2] = ["Batman", "ThunderCat"]
# coffeescript
heroes.slice(0, 3);
// javascript

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

101. Object

102. Object

103. Object
eddie = { name: "Eddie Kao", age: 18, speciality: "eat" }
# coffeescript

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

105. Object

106. Object
eddie =
name: "Eddie Kao"
age: 18
lovers:
nayumi:
name: "Nayumi Hung"
age: 18
mary:
name: "Mary Bloody"
age: 20
# coffeescript

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

108. Loop

109. But we Rubyist barely use for-loop

110. List Comprehension
# coffeescript // javascript

111. List Comprehension
alert i for i in [1..10]
# coffeescript // javascript

112. List Comprehension
alert i for i in [1..10] var i, _sep;
for (i = 1; i <= 10; i++) {
alert(i);
}
# coffeescript // javascript

113. List Comprehension
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
% 2 == 0
# coffeescript // javascript

114. List Comprehension
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);
}
}
# coffeescript // javascript

115. List Comprehension
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
# coffeescript // javascript

116. List Comprehension
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);
}
# coffeescript // javascript

117. List Comprehension
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]
# coffeescript // javascript

118. List Comprehension
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

119. Condition

120. Swich
swich day
when "Mon" then go work
when "Tue" then go relax
when "Thu" then go iceFishing
when "Fri", "Sat"
if day is bingoDay
go bingo
go dancing
when "Sun" then go church
else go work
# coffeescript

121. Modifier
You can put "if", "unless", "while", "until" behind

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

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

124. Synactic Sugar

125. Synactic Sugar
wrie more readable code by using synactic sugar.
# coffeescript // javascript

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

127. Synactic Sugar
# coffeescript

128. Synactic Sugar
alert "I can't see anything" if light is off
# coffeescript

129. Synactic Sugar
alert "I can't see anything" if light is off
alert "It's impossible!" if eddie isnt handsome
# coffeescript

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

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

132. Synactic Sugar
Which answer do you like o hear when you say ...

133. Synactic Sugar
Which answer do you like o hear when you say ...
Eddie: Will you marry me?
Nayumi: yes!

134. Synactic Sugar
Which answer do you like o hear when you say ...
Eddie: Will you marry me?
Nayumi: yes!
or

135. Synactic Sugar
Which answer do you like o hear when you say ...
Eddie: Will you marry me?
Nayumi: yes!
or
Eddie: Will you marry me?
Nayumi: true!

136. Synactic Sugar

137. Synactic Sugar
alert "I'll marry you!" if answer is yes
# coffeescript

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

139. Synactic Sugar
Chained Comparison

140. Synactic Sugar
Chained Comparison
console.log "I'm awesome!" if 20 < my_girl_friends < 100
# coffeescript

141. Synactic Sugar
Chained Comparison
console.log "I'm awesome!" if 20 < my_girl_friends < 100
# coffeescript
if ((20 < my_girl_friends && my_girl_friends < 100)) {
console.log("I'm awesome!");
}
// javascript

142. Synactic Sugar
Exisential Operaor

143. Synactic Sugar
Exisential Operaor
age ?= 18
# coffeescript

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

145. Raw JavaScript
If you still prefer the original way..

146. Raw JavaScript
say_hello = `function(name){
return "Hello, " + name
}`
# coffeescript

147. OOP
CoffeeScrip's classes are syntactic sugar only.

148. Prootype?
IMHO, prooype-based OO is no elegant

149. OOP - new

150. OOP - new
class Animal
construcor: (name, age) ->
this.name = name
this.age = age
animal = new Animal("eddie", 18)
alert animal # coffeescript

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

152. OOP - @ = this.

153. OOP - @ = this.

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

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

156. OOP - inheriance

157. OOP - inheriance

158. TL;DR

159. Exend more function?

160. Exend more function
String::repeat = (n) ->
Array(n + 1).join @
String::downcase = ->
@oLowerCase()
String::upcase = ->
@oUpperCase()
String::find = (str) ->
@indexOf str
String::has = (str) ->
(@indexOf str) > 0
# coffeescript
http://blog.eddie.com.w/2011/11/19/extend-functionaliy-for-your-class/

161. Cooperae with other JS
library or framework?

162. working with jQuery

163. working with jQuery
$(document).ready(function() {
wakeup();
walk_o_oilet();
pee();
go_back_o_sleep();
})
// javascript

164. working with jQuery
$(document).ready(function() {
wakeup();
walk_o_oilet();
pee();
go_back_o_sleep();
})
// javascript
$ ->
wakeup()
walk_o_oilet()
pee()
go_back_o_sleep()
# coffeescript

165. working with jQuery

166. working with jQuery
$('#girl').animae({
width: '100px',
height: '50px',
opacity: '0.8'
}, 2000, 'easeOutQuad');
// javascript

167. working with jQuery
$('#girl').animae({
width: '100px',
height: '50px',
opacity: '0.8'
}, 2000, 'easeOutQuad');
// javascript
$('#girl').animae
width: '100px'
height: '50px'
opacity: '0.8'
2000
'easeOutQuad'
# coffeescript

168. working with jQuery

169. working with jQuery
(function($){
$.fn.exend({
isEmail: function(email){
return /some email validaor/.est(email);
}
});
})(Query);
// javascript

170. working with jQuery
(function($){
$.fn.exend({
isEmail: function(email){
return /some email validaor/.est(email);
}
});
})(Query);
// javascript
$ = jQuery
$.fn.exend
isEmail: (email) ->
/some email validaor/.est email
# coffeescript

171. makes jQuery more easy,
and more fun
http://blog.eddie.com.w/2011/11/14/when-jquery-meets-coffeescrip/

172. References
Websies:
http://jashkenas.github.com/coffee-scrip/
http://blog.eddie.com.w/category/coffeescrip/
http://upgrade2rails31.com/coffee-scrip
Koans:
https://github.com/sleepyfox/coffeescrip-koans

173. References
Book:
http://pragprog.com/book/tbcoffee/coffeescrip
http://arcturo.github.com/library/coffeescrip/index.html
http://autoelicum.github.com/Smooh-CoffeeScrip/

174. Conclusion

175. being a 40% Rubyist
I don’t like..
var
return
for loop
()
{}

176. I Love..

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

178. I Love..
Indenation!

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

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

181. I Love..
List Comprehension

182. I Love..
Synactic Sugar

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

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

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

186. I Love..
Compilation
JSLint Approved

187. What else?

188. Make, Rake, Cake.

189. More and more projects are
writen in CoffeeScript.

190. Pow.cx

191. CoffeeScript compiler is
writen in CoffeeScript.

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

193. Immature?
photo by theseanster93

194. Performance?
photo by chr1sl4i photo by theseanster93

195. CoffeeScript Means Giving
Up on JavaScript?

196. Learn JavaScript, and Use
CoffeeScript.

197. Any Question? photo by jamuraa

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