1. COFFEESCRIPT
“It’s just JavaScript”

2. Me
• Zarar Siddiqi
• Agile Coach with a developer’s itch
• http://www.linkedin.com/in/zararsiddiqi
• zarar_siddiqi@epam.com
• Confluence page for This Week @:
• https://kb.epam.com/pages/viewpage.action?pageId=107875299
• Next week: Agile Games!

3. Agenda
• Why Bother?
• Basic Concept
• Simple But High ROI Features
• Other Nice Features
• Code Playground
• Windows Installation
• Examples
• Conclusion (or something like it)
• Discussion

4. WHY BOTHER?

5. 1.1: LIBRARIES
#1: JavaScript Use Exploding
1.2: MVVM, SINGLE-PAGE APPS
1.3: MOBILE
1.4: SERVER

6. #2: Problems with JavaScript
• Ambiguous constructs leading to verbosity
• function, prototype, extend, var, (function() {});
• Error-prone with late visibility
• Trailing commas, string concatenation, context binding, equality
• Limited features
• List comprehension, string interpolation, conditional modifiers
• Namespace pollution
• All <script> files loaded in one global scope
• PHP Problems
• Easy to get started; easy to go downhill

7. The math is simple
Lots of
JS
Easy to
write
messy
JS
Lots of
messy
JS

8. BASIC CONCEPT

9. How it works
file.coffee Compile file.js
page.html
<script> tag
Analogous to less for CSS - http://lesscss.org/

10. Benefits
• .coffee has less code to maintain – 35-45% less
• Produces JSLint validated code (http://jslint.com)
• http://javascript.crockford.com/code.html
• Easy-to-read code (Influenced by Ruby, Python, Haskell)
• Focuses on JavaScript: The Good Parts (Douglas Crockford):
http://amzn.to/176RA4
• Written by smart people, very strong community support,
mature (3.5 years)
• Easy to unit test (Jasmine) - http://pivotal.github.io/jasmine/

11. SIMPLE BUT HIGH ROI
FEATURES

12. #1: Defining classes
- Some ways of defining objects in JavaScript:
- Using function
- Using prototype
- var obj = {}
Let’s look at some examples…

13. Here’s one way…
// Using a function
function Apple (country) {
this.country = country;
this.color = "red";
this.getInfo = getAppleInfo;
}
function getAppleInfo() {
return this.country + ' has ' +
this.color + 'apples'.;
}

14. Here’s another…
// Using the prototype
function Apple (country) {
this.country = country;
this.color = "red";
}
Apple.prototype.getInfo = function() {
return this.country + ' has '
+ this.color + 'apples'.;
};

15. This will work too…
// Using object literals
var apple = {
country: "Sweden",
color: "red",
getInfo: function () {
return this.country + ' has '
+ this.color + 'apples'.;
}
}

16. Equivalent CoffeeScript class
class Apple
constructor: (@country) ->
@color = "red"
getInfo: ->
"{@country} has {@color} apples"
class BakedApple extends Apple
constructor: ->
super(“Canada”)
@color = “brown”
// No method keyword
// @ instead of this
// Implicit assignment
// Indentation
// Sensible class
declaration
// Interpolation
// Implicit returns
// Easy inheritance model

17. #2: The var problem
Example 1
function foo() {
var name = “Bob”;
age = 29;
}
alert(name);
alert(age);
Example 2
function printTen() {
for (i=0; i<10; i++) {
console.log(i);
}
return true
}
printTen();
alert(i);

18. CoffeeScript default scope is local
CoffeeScript
foo: ->
name = "Bob"
age = 29
JavaScript
printTen: function() {
var i, _i;
for (i = _i = 0; _i <= 10; i = _i += 1) {
console.log(i);
}
return true;
}
printTen();
alert(i);
function foo() {
var age, name;
name = "Bob";
age = 29;
}
printTen: ->
for i in [0..10] by 1
console.log i
return true
printTen()
alert(i)

19. #3: Outer Scope Referencing
JavaScript
function User(name) {
this.name = name;
}
User.prototype.save = function() {
var _this = this;
$.post('/user/save', function(data){
$('.msg').html(_this.name+ "saved.");
});
};
CoffeeScript
class User
constructor: (@name) ->
save: ->
$.post '/user/save', (data) =>
$('.msg').html("#{@name} saved.")

20. #4: Object Literal Readability / Writability
CoffeeScript
config =
user:
id: 'jsmith'
name:
first: 'John'
last: 'Smith'
password: 'pass '
email: 'jsmith@example.com'
host: 'localhost'
port: 3306
conn: -> App.connect()
JavaScript
config = {
user: {
id: 'jsmith',
name: {
first: 'John',
last: 'Smith'
},
password: 'pass',
email: 'jsmith@example.com'
},
host: 'localhost',
port: 3306,
conn: function() {
return App.connect();
}
};

21. #5: Testing Equality
"" == "0" // false
0 == "" // true
0 == "0" // true
false == "false" // false
false == "0" // true
false == undefined // false
false == null // false
null == undefined // true
" trn" == 0 // true Type
Coercion!
Solution: Use the is and isnt keywords which compare
without coercing and are more readable:
if a is b
doSomething()

22. SYNTACTIC SUGAR
“make things easier to read or to express.”

23. A spoonful of sugar…
# Existence checking
if happy?
console.log "clap your hands"
# Skip null checks
truck.getTires()?.change()
# Tuple-like assignments
[a, b] = [1, 2]
if (truck.getTires() != null)
truck.getTires().change()
if (typeof happy !== "undefined"
&& happy !== null)

24. Some more sugar…
# Iterate over a list with index
for item, i in someList
alert “Item #{i} is #{item}“
# Conditional modifiers
# Conditional modifiers
turnOn() if buttonPressed is true
status = 'expired' unless withinRange()

25. A whole jar of sugar…
• http://coffeescript.org/

26. CODE PLAYGROUND

27. Installation
After downloading and installing NodeJS from
http://nodejs.org/download/
Execute following from command prompt:
C:>npm -g install coffee-script
C:>coffee
coffee>

28. FINALLY…

29. As with everything…
• Use the right tool for the right job
• If it’s a small piece of JS, don’t bother. If it’s a JS-heavy
project, consider it
• Philosophical Debate:
Highly disciplined developers following a style guide
vs.
A language that helps standardize the produced code

30. Resources
• CoffeeScript Home Page
• http://coffeescript.org/
• JS2Coffee (Coffee2JS)
• http://js2coffee.org/
• Should you learn CoffeeScript?
• http://net.tutsplus.com/articles/interviews/should-you-learn-
coffeescript/
• Google Search – CoffeeScript Sucks
• http://goo.gl/MNQrY
• Brendan Eich
• https://brendaneich.com/2011/05/my-jsconf-us-presentation/
• The Little Book on CoffeeScript
• http://arcturo.github.io/library/coffeescript/