CoffeeScript is a simple and elegant language that keeps the "good" parts of Javascript and discards those that cause confusion and consequently bugs. Going through this presentation, you can get a quick introduction to CoffeeScript. I hope you enjoy it!

1. Underneath that awkward Java-­‐‑esque patina,
JavaScript has always had a gorgeous heart!
h<ps://github.com/jashkenas/coffee-­‐‑script
Spyros Ioakeimidis | TechTalk 21/10/2013

2. Intro
static analysis by design
CoffeeScript code compiles one-­‐‑to-­‐‑one to JavaScript
no runtime checking (interpretation at runtime)
literate mode, you can write markdown document, which
can contain executable CoffeeScript code
2

3. Compile *.coffee
coffee -­‐‑o lib/ -­‐‑cw src/ (and sub-­‐‑directories)
in the alphabetical order of the files (as they are found in the file system)
coffee -­‐‑j lib/main.js -­‐‑cw src/
merge *.coffee files into one merged.js file, again in the alphabetical order
the compiler finds them in the file system
it can also be used in strict mode (DEBUG = True)
3

4. Serve *.coffee
write
main.coffee
(1) compile *.coffee file in runtime when it is
requested (and if there is a newer version),
cache does not work as usual (gets the
same file again, though it is not slower)
use main.coffee
in html
client requests
main.coffee
compile to
main.js
main.js is served
4

5. Serve *.coffee
write
main.coffee
(2) compile during development,
generate *.js files and serve those,
include them in templates (precompile
phase)
compile
main.coffee
use main.js file
in index.html
client requests
main.js
serve main.js
file
5

6. Serve *.coffee
django-­‐‑compressor
<script type="ʺtext/coffeescript"ʺ src="ʺ{% static 'ʹrewards.coffee'ʹ %}"ʺ></script>
when a file is requested, it is compiled, a CACHE directory is created (if it
does not exist) and the *.js files are stored and served from in there
Stitch, NodeJS, or Rails
automatic runtime compile is included, and it is transparent
in production, Rails will write the compiled output to disk, ensuring it'ʹs
cached and fast to serve
6

7. CoffeeScript
whitespace is significant
no semicolons
it removes global variables
need to be careful with functions and parens, e.g.
alert inspect a
alert inspect # gives error, is it a function or an argument?
alert inspect(a) # this is beKer
7

8. CoffeeScript
aliases for this is @ and for accessing the prototype is ::
solves the issues with “with” statements, reserved
keywords, Number property lookups
fixes the equality comparisons ambiguity, by using the (===)
strict equality operator, e.g.
"ʺ"ʺ == "ʺ0"ʺ // false
0 == "ʺ"ʺ // true
0 == "ʺ0"ʺ // true
false == "ʺfalse"ʺ // false
...
*example taken from [1]
8

9. CoffeeScript
function definitions, CoffeeScript uses only function
expressions and discards completely declarative functions
e.g. expression = function() { } instead of function declaration() { }
offers cross-­‐‑browser compatibility
but there are other things that CoffeeScript can'ʹt fix
eval
typeof
same for instanceof
delete, parseInt()
9

10. CoffeeScript
{ functions, use of parens }
Console:
27
10

11. CoffeeScript
{ objects, arrays, splash..., string interpolation }
Console:
Gold: Michael Phelps in 9.68
Silver: Liu Xiang in 10.56
Rest: Yao Ming,Allyson Felix,...
11

12. CoffeeScript
{ loops, comprehensions, slicing, when, isnt, unless }
Console:
PY
12
:)

13. CoffeeScript
{ iterate over object properties }
Console:
max is 10,ida is 9,tim is 11
13

14. CoffeeScript
{ while, conditional assignment }
Console:
5 little
4 little
3 little
2 little
1 little
monkeys, jumping on the bed. One fell out and bumped his head.
monkeys, jumping on the bed. One fell out and bumped his head.
monkeys, jumping on the bed. One fell out and bumped his head.
monkeys, jumping on the bed. One fell out and bumped his head.
monkey, jumping on the bed. One fell out and bumped his head.
14

15. CoffeeScript
{ do, loop to generate functions }
Console:
Reading file: file-1 compiled as <file-1, ...file contents...>
Reading file: file-2 compiled as <file-2, ...file contents...>
15

16. CoffeeScript
{ existential operator }
Console:
9715 ZM
16

17. CoffeeScript
{ classes, inheritance, destructuring assignment }
Console:
char0: firstName -> Tom
char0: lastName -> and Jerry
Cartoon Report:
Tom and Jerry received 10!
char1: firstName -> Amazing
char1: lastName -> Spiderman
Superhero Report:
Amazing Spiderman received 1000!
17

18. CoffeeScript
{ instead of typeof, we can use a trick }
18

19. CoffeeScript
{ another example of destructuring assignment }
Console:
City: Groningen, NL
Temp: -10 Forecast: Mostly Snow
19

20. CoffeeScript
{ using the window to create top level variables }
20

21. CoffeeScript
{ function binding with the fat arrow => }
Console:
Purchase for customer 345 and cart cart_45654
21

22. CoffeeScript
{ switch statements, chained comparisons }
Console:
Grade: D+
22

23. CoffeeScript
{ exceptions }
Console:
Ops exception ReferenceError: Undefined is not defined
finally...
23

24. CoffeeScript
{ use of mixins when inheritance is not suited }
24

25. CoffeeScript
{ use of mixins when inheritance is not suited }
Console:
Finding id 1
Creating...
Saving...
(when the button with class ‘.show’
is pressed)
Showing user with id 1
25

26. CoffeeScript
{ or= }
Console:
empty something
26

27. Share Objects
exports = this
exports.variable = "ʺtest"ʺ
or if Node.js, or Stitch is used with CommonJS which
provides modules, e.g.
# app/models/user.coffee
module.exports = class User
constructor: (@name) -­‐‑>
# app/app.coffee
User = require("ʺmodels/user"ʺ)
27

28. JS vs CS
less code to write! the example with the fictional character
class was:
100 loc in JS, 50 loc in CS
far more readable, less complex, and more maintainable
CoffeeScript tends to run as fast, or faster than hand-­‐‑wri<en
JavaScript
however, CoffeeScript introduces another layer..
no big community yet.. but it is ge<ing bigger :)
28

29. CoffeeScript
&
AngularJS
29

30. Testing
unit testing and Behaviour-­‐‑driven Development (BDD) with
the popular framework Jasmine
assaf'ʹs Zombie.js, a headless, full-­‐‑stack, faux-­‐‑browser
testing library for Node.js
Testing with CoffeeScript: h<p://goo.gl/U67oKU
30

31. Performance
test of operations on a million floating point numbers
CoffeeScript -­‐‑> 0.164s
CPython -­‐‑> 0.603s
more than 3.5x faster
of course C++ is 10x to 30x faster :)
*algorithms taken from [3]
31

32. Performance
test on the 8 queens problem, more info can be found in [4]
CoffeeScript -­‐‑> 0.034s
CPython -­‐‑> 0.455s
more than 13x faster
*algorithms taken from [3]
32

33. Used on...
several open-­‐‑source projects
brunch: HTML5 applications made easy
h<ps://github.com/brunch/brunch
zombie: a headless, full-­‐‑stack, faux-­‐‑browser testing library
for Node.js
h<ps://github.com/assaf/zombie
underscore.coffee: a port of the Underscore.js library of
helper functions
h<p://coffeescript.org/documentation/docs/underscore.html
33

34. What does the
future hold?
new features are coming with the new EcmaScript6 [5]
(define block-­‐‑local vars), destructuring, parameter default values, rest
(splash...), spread, proxies, weak map, generators, iterators, array and
generator comprehension, binary data, class syntax, with extends,
prototype, and super, modules, quasis: multiline, substitution-­‐‑ready
strings with extensibility
experimental javascript can be tried in Chrome by enabling
the Experimental JavaScript flag on
chrome://flags/#enable-­‐‑javascript-­‐‑harmony
*you can read more in [6]
34

35. Little Book on
CoffeeScript
“ CoffeeScript is ge<ing much wider use and integration, such
as being a default in Rails 3.1. Now is definitely the time to
jump on the CoffeeScript train. The time you invest in
learning about the language now will be repaid by major
time savings later.
35

36. Let’s write some
CoffeeScript

37. References
[1] h<p://bonsaiden.github.io/JavaScript-­‐‑Garden/#types.equality
[2] CoffeeScript recipes for the community by the community,
h<p://coffeescriptcookbook.com/
[3] Smooth CoffeeScript, h<p://goo.gl/RjT74k
[4] Eight Queens Puzzle, h<p://en.wikipedia.org/wiki/Eight_queens_puzzle
[5] h<p://espadrine.github.io/New-­‐‑In-­‐‑A-­‐‑Spec/es6/
[6] h<p://gaslight.co/blog/does-­‐‑coffeescript-­‐‑have-­‐‑a-­‐‑future
[7] Li<le Book on CoffeeScript, h<p://arcturo.github.io/library/coffeescript/