CoffeeScript talk slides given by Susan Potter in April 2010 at the University of Illinois Research Park.

1. Writing bullet proof Javascript
(by using CoffeeScript)
April 2010
@SusanPotter

2. Outline
1. Javascript lifecycle:
copy-n-paste (mid/late-90s)
coarse-grained translation layers (mid-00s)
(unobtrusive) pure Javascript (late-00s)
2. What is CoffeeScript?
3. Why use CoffeeScript?
4. CoffeeScript Examples
5. CoffeeScript Tools
6. Resources

3. Copy-n-paste (mid/late-90s)
Used mostly for:
preloading images
image hover-overs
alerts/confirms
Lots of dreadful Dreamweaver snippets
Wild west era of Javascript
Nobody really understood Javascript
Bad Javascript snippets spread like wild fire!

4. Coarse-grained translation layers (mid-00s)
Ruby on Rails popularized this with RJS & JS helpers.
"AJAX-friendly" frameworks started appearing in other languages:
Python, Groovy, Erlang, PHP, etc.
RJS-style good for specific coarse-grained functionality.
RJS-style bad when you need more flexibility & control.
RJS-style promotes bad code smells:
long templates, methods
inline Javascript (inflexible & non-reusable)
hard to debug and troubleshoot

5. Pure Javascript (late-00s)
Everyone wanted to be a Javascript ninja & unobtrusive Javascript
(UJS) became cool with rise of libraries.
Pro: most control and flexibility
Pro: libraries made UJS and better JS style easier and more
accessible.
Con: common Javascript pitfalls:
devs still consider it secondary or tertiary language
easy to pollute global space accidentally
large "falsey" values can cause problems
unintuitive prototypal object-oriented
many others too numerous to list

6. What is CoffeeScript?
Fine-grained translation layer on top of Javascript.
class User
constructor: (login) ->
@login: login
user = new User('mbbx6spp')
if signedIn()
$('#top-header').html('Welcome' + user.login)
else
$('#top-header').html('Welcome Anonymous')

7. Why use CoffeeScript?
Prevents common mistakes using different syntax.
More terse & expressive.
More readable.
Generates Javascript without any JSLint warnings.

8. Why not use CoffeeScript?
Adds another level of indirection.
Another syntax to learn.
Already know Javascript (the good parts) well.

9. CoffeeScript Examples: jQuery
http://gist.github.com/365144

10. CoffeeScript Examples: Math
http://gist.github.com/365187

11. CoffeeScript Examples: OO
http://gist.github.com/365215
CoffeeScript: lines 35
Javascript: lines 60
CoffeeScript: more readable
Javascript generated: optimized and
zero JS Lint warnings

12. CoffeeScript Tools
bistro_car: Rails plugin
http://github.com/jnicklas/bistro_car
Rails applications only, lacking optimization.
Rack adapter for CoffeeScript
http://github.com/mattly/rack-coffee
Ruby/Rack applications only.
Caffeinator
http://github.com/mbbx6spp/caffeinator
Coming soon, not yet ready!
Goals: Any framework, any Javascript optimization.

13. Resources
http://coffeescript.org
IRC: freenode #coffeescript
http://github.com/jashkenas/coffee-script/issues
Twitter:
use #coffeescript hashtag on questions/queries
@SusanPotter for pointers :)