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.