Writing bullet proof Javascript        (by using CoffeeScript)              April 2010             @SusanPotter
Outline1. Javascript lifecycle:      copy-n-paste (mid/late-90s)      coarse-grained translation layers (mid-00s)      (un...
Copy-n-paste (mid/late-90s)  Used mostly for:     preloading images     image hover-overs     alerts/confirms  Lots of dre...
Coarse-grained translation layers (mid-00s) Ruby on Rails popularized this with RJS & JS helpers. "AJAX-friendly" framewor...
Pure Javascript (late-00s)  Everyone wanted to be a Javascript ninja & unobtrusive Javascript  (UJS) became cool with rise...
What is CoffeeScript?   Fine-grained translation layer on top of Javascript.class User constructor: (login) ->   @login: l...
Why use CoffeeScript?  Prevents common mistakes using different syntax.  More terse & expressive.  More readable.  Generat...
Why not use CoffeeScript?  Adds another level of indirection.  Another syntax to learn.  Already know Javascript (the good...
CoffeeScript Examples: jQuery              http://gist.github.com/365144
CoffeeScript Examples: Mathhttp://gist.github.com/365187
CoffeeScript Examples: OO                  http://gist.github.com/365215                      CoffeeScript: lines 35      ...
CoffeeScript Tools  bistro_car: Rails plugin  http://github.com/jnicklas/bistro_car  Rails applications only, lacking opti...
Resourceshttp://coffeescript.orgIRC: freenode #coffeescripthttp://github.com/jashkenas/coffee-script/issuesTwitter:  use #...
Upcoming SlideShare
Loading in...5
×

Writing Bullet-Proof Javascript: By Using CoffeeScript

3,349

Published on

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

Published in: Technology
1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total Views
3,349
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Writing Bullet-Proof Javascript: By Using CoffeeScript"

  1. 1. Writing bullet proof Javascript (by using CoffeeScript) April 2010 @SusanPotter
  2. 2. Outline1. 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 Examples5. CoffeeScript Tools6. Resources
  3. 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. 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. 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. 6. What is CoffeeScript? Fine-grained translation layer on top of Javascript.class User constructor: (login) -> @login: loginuser = new User(mbbx6spp)if signedIn() $(#top-header).html(Welcome + user.login)else $(#top-header).html(Welcome Anonymous)
  7. 7. Why use CoffeeScript? Prevents common mistakes using different syntax. More terse & expressive. More readable. Generates Javascript without any JSLint warnings.
  8. 8. Why not use CoffeeScript? Adds another level of indirection. Another syntax to learn. Already know Javascript (the good parts) well.
  9. 9. CoffeeScript Examples: jQuery http://gist.github.com/365144
  10. 10. CoffeeScript Examples: Mathhttp://gist.github.com/365187
  11. 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. 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. 13. Resourceshttp://coffeescript.orgIRC: freenode #coffeescripthttp://github.com/jashkenas/coffee-script/issuesTwitter: use #coffeescript hashtag on questions/queries @SusanPotter for pointers :)

×