Video and slides synchronized, mp3 and slide download available at URL http://bit.ly/1wWXU72. Azat Mardan shares experiences using CoffeeScript in production, exploring its format, evaluating its design and showcasing some of the more useful and prominent projects that have adopted it. Filmed at qconnewyork.com. Azat Mardan has over 12 years of experience in web, mobile and software development. With a Bachelor's Degree in Informatics and a Master of Science in Information Systems Technology degree, Azat possesses deep academic knowledge as well as extensive practical experience. Currently, Azat works as a Team Lead / Senior Software Engineer at DocuSign.

1. webapplog.com
CoffeeScript: The Good Parts
The good and not so good parts of CoffeeScript in comparison to JavaScript
@azat_co
1

2. Watch the video with slide
synchronization on InfoQ.com!
http://www.infoq.com/presentations
/coffeescript-lessons
InfoQ.com: News & Community Site
• 750,000 unique visitors/month
• Published in 4 languages (English, Chinese, Japanese and Brazilian
Portuguese)
• Post content from our QCon conferences
• News 15-20 / week
• Articles 3-4 / week
• Presentations (videos) 12-15 / week
• Interviews 2-3 / week
• Books 1 / month

3. Presented at QCon New York
www.qconnewyork.com
Purpose of QCon
- to empower software development by facilitating the spread of
knowledge and innovation
Strategy
- practitioner-driven conference designed for YOU: influencers of
change and innovation in your teams
- speakers and topics driving the evolution and innovation
- connecting and catalyzing the influencers and innovators
Highlights
- attended by more than 12,000 delegates since 2007
- held in 9 cities worldwide

4. webapplog.com
About The Presenter
@azat_co
Azat Mardan
• Worked in the US government, startups
and corporations
• Wrote six books on JavaScript and
Node.js (the latest is Practical Node.js
by Apress)
• Certified yoga teacher and paleo lifestyle
enthusiast
2

5. webapplog.com
Fun story: “CoffeeScript is a solution without a problem”
I used to make fun of CoffeeScript, before falling in love with
it.
@azat_co
3

6. webapplog.com
@azat_co
Who likes /uses
CoffeeScript already?
4

7. webapplog.com
@azat_co
Please be open-minded
5

8. webapplog.com
Blub Paradox
@azat_co
6
!
Blub paradox: devs are satisfied with whatever language
they happen to use, because it dictates the way they think
about programs.
http://en.wikipedia.org/wiki/
Paul_Graham_(computer_programmer)#Blub

9. webapplog.com
CoffeeScript’s Bad Rep
Most of the people who say bad things about CoffeeScript
have never built with it anything relatively large-scale and
production-ready.
@azat_co
7

10. webapplog.com
CoffeeScript at DocuSign
DocuSign stack: CoffeeScript+Node.js+Backbone.js+Grunt
Observation: front-end developers, after only a few weeks of
CoffeeScript, didn’t want to go back to regular JavaScript!
@azat_co
8

11. webapplog.com
“CoffeeScript is a little language that compiles
into JavaScript.” — coffeescript.org
@azat_co
9

12. webapplog.com
TOC for v1.7.1
Maybe CoffeeScript is not so small
anymore?
@azat_co
10

13. webapplog.com
@azat_co
JavaScript
11

14. webapplog.com
Native JavaScript Issues
• == vs ===
• Functional inheritance vs pseudo-classical
• Global variable leakage (missing var)
• Many others
@azat_co
12

15. webapplog.com
CoffeeScript: The Good Parts (some of them)
• Syntax: curly braces, parentheses and semicolons
• Function declaration: -> and =>
• Scoping: automatic var
• Iterators / comprehensions: replacement of for loops
• Class declaration: class operand
@azat_co
13

16. webapplog.com
Syntax
• No semicolons, i.e., they are banned
• Logical blocks can omit curly braces
• Function calls can omit parentheses
@azat_co
14

17. webapplog.com
Why Semicolons are Bad? (*IMHO)
• Extra time&work to put them
• If missed, inconsistent but working code
• Redundant/not-needed (expect in two cases)
• Semicolon Insertion (ASI)
@azat_co
15

18. webapplog.com
Logical Blocks (optional curly braces)
@azat_co
kids =
brother:
name: "Max"
age: 11
sister:
name: "Ida"
age: 9
16

19. webapplog.com
Function calls
console.log object.class
!
$('.account').attr class: ‘active’
!
$(‘button’).css
color: red
“font-size”: “16px”
@azat_co
17

20. webapplog.com
Function Declaration
• Skinny arrow (->) saves time typing “function” over and
over again
• Fat arrow (=>), i.e., no need to use “var that = this” or “var
self = this”
@azat_co
18

21. webapplog.com
Function Declaration Elegance
CoffeeScript: JavaScript:
a = (x,y) -> console.log x+y
@azat_co
var a;
!
a = function(x, y) {
return console.log(x + y);
};
!
a(10, -5);
19

22. webapplog.com
Function Declaration: Skinny Arrow
CoffeeScript: JavaScript:
console.log @
$('div').click ()->
console.log @ console.log(this);
@azat_co
$('div').click(function() {
return console.log(this);
});
Prints “window” and DOM elements i.e.,
“this” changes and @ changes too
20

23. webapplog.com
Function Declaration: Fat Arrow
CoffeeScript: JavaScript:
console.log @
$('div').click ()=>
console.log @
@azat_co
var _this = this;
!
console.log(this);
!
$('div').click(function() {
return console.log(_this);
});
Prints “window” both times (i.e., the outer scope)
21

24. webapplog.com
Scoping
• Manual “var” is banned
• Variables declared in the scope in which they are
encountered first (i.e., the order in which variables used
determines their scope).
@azat_co
22

25. webapplog.com
Why auto vars are good? Missed “var” Example.
CoffeeScript: JavaScript:
var a = function (c) {
b = 10;
return b + c;
}
console.log(a(0));
!
b is window.b — bad!
@azat_co
var a = function(c) {
var b = 10;
return b + c;
};
console.log(a(0));
!
b is a private attribute —
what we wanted!
23

26. webapplog.com
Scoping: Example I
CoffeeScript: JavaScript:
b = 1
a = ->
b = -1
!
a()
console.log b
@azat_co
var a, b;
b = 1;
a = function() {
return b = -1;
};
a();
console.log(b);
24

27. webapplog.com
Scoping: Example II
CoffeeScript: JavaScript:
a = ->
b = -1
b = 1
a()
console.log b
@azat_co
var a, b;
a = function() {
var b;
return b = -1;
};
b = 1;
a();
console.log(b);
25

28. webapplog.com
Iterators / Comprehensions (for loops)
Awesome time savers! Good for arrays and objects:
!
for item, index in arrayObject
iterator(item)
!
for key, value of object
iterator(item)
!
!
!
!
!
@azat_co
26

29. webapplog.com
Iterating over an Array
CoffeeScript: JavaScript:
for item, index in arrayObject
iterator(item)
@azat_co
var index, item, _i, _len;
!
for (index = _i = 0,
_len = arrayObject.length;
_i < _len;
index = ++_i) {
item = arrayObject[index];
iterator(item);
}
27

30. webapplog.com
Iterating over an Object
CoffeeScript: JavaScript:
for key, value of object
iterator(value)
@azat_co
var key, value;
!
for (key in object) {
value = object[key];
iterator(value);
}
28

31. webapplog.com
Iterators / Comprehensions (for loops) II
Many options:
!
iterator (item) for item in arrayObject
!
iterator item for item in arrayObject
!
iterator item for item in arrayObject when item > 0
!
!
!
!
!
!
@azat_co
29

32. webapplog.com
Class Declaration
• In JavaScript classes are absent at all!
• CoffeeScript eloquently implements Pseudo-classical
inheritance pattern: “new” and capitalized name (“new
Animal”, “new Vehicle”, etc.)
• Pseudo-classical is hard and cumbersome without CS
• CoffeeScript “constructor” method and “super” call
@azat_co
30

33. webapplog.com
Class Example
CoffeeScript:
class Vehicle
constructor: (@name) ->
move: (meters) ->
console.log @name + " moved #{meters} miles.”
!
camry = new Vehicle "Camry"
camry.move(50)
Output: Camry moved 50 miles.
@azat_co
31

34. webapplog.com
Class Example
JavaScript:
var Vehicle, camry;
!
Vehicle = (function() {
function Vehicle(name) {
this.name = name;
}
!
Vehicle.prototype.move = function(meters) {
return console.log(this.name + (" moved " + meters + " miles."));
};
!
return Vehicle;
!
})();
!
camry = new Vehicle("Camry");
!
camry.move(50);
2x: 6 vs 12 lines of code!
@azat_co
32

35. webapplog.com
Other CoffeeScript Goodies
• Splats (e.g., “options…”)
• Conditions (if, isnt, not, and, or, unless)
• Arrays and their slicing (arr = [1..10], slicedArr = arr[2..4])
@azat_co
33

36. webapplog.com
CoffeeScript: The Good Parts Summary
• Syntax: curly braces, parentheses and semicolons
• Function Declaration: -> and =>
• Scoping: automatic var
• Iterators / Comprehensions: replacement of for loops
• Class Declaration: class operand
@azat_co
34

37. webapplog.com
CoffeeScript: Not So Good Parts
• Learning: 1-2 day, free online ebooks
• Compilation: extra build step (use Grunt or similar)
• Parentheses: optional and cause misinterpretation
• Debugging: use source-maps
@azat_co
35

38. webapplog.com
CoffeeScript of My Dreams
https://github.com/michaelficarra/coffee-of-my-dreams
@azat_co

39. webapplog.com
How to Get Started
$ npm install -g coffee-script
$ coffee
>…
@azat_co
37

40. webapplog.com
Companies that use CoffeeScript
@azat_co
38
• GitHub
• Dropbox
• DocuSign
• Airbnb (mobile)
• HotelTonight
• Basecamp (mobile)

41. webapplog.com
Further Reading
CoffeeScript FUNdamentals: The Better JavaScript
http://bit.ly/1nD4dE3
@azat_co
39

42. webapplog.com
CoffeeScript Ebooks
• The Little Book on CoffeeScript (free onine)
• CoffeeScript Cookbook (free online)
• Smooth CoffeeScript (free online)
• CoffeeScript Ristretto (free online)
@azat_co
40

43. webapplog.com
Future / Alternatives
@azat_co
41
• Dart (early stage)
• TypeScript: MicroSoft project
• ECMAScript 6: be careful with old browsers, use shims,
fully available after June 2015
• Sweet.js: macros!

44. webapplog.com
Conclusions
@azat_co
42
• Good for enterprise and large team, because it’s easer to
have common style, e.g., https://github.com/styleguide/
javascript
• Good for developers new to JavaScript and those
coming from OOP languages (Java, Ruby)
• Cross-browser / old browser support
• More productive and happier developers (after learning)
• Tested, robust, and available now
• Awesome with Backbone.js and Underscore.js

45. webapplog.com
Session Summary
• Native JavaScript Issues
• CoffeeScript: The Good Parts
• How to Get Started
• Future / Alternatives
• Conclusions
@azat_co
43

46. webapplog.com
Discussion and Q&A Time
@azat_co
Questions, thoughts and experiences?
44

47. Watch the video with slide synchronization on
InfoQ.com!
http://www.infoq.com/presentations/coffeescript
-lessons