Writing Bullet-Proof Javascript: By Using CoffeeScript
3 likes1,552 views
The document discusses the evolution of JavaScript from the 90s to the late 00s, highlighting various phases such as copy-n-paste coding, the rise of coarse-grained translation layers, and the adoption of pure JavaScript. It introduces CoffeeScript as a fine-grained translation layer designed to improve JavaScript's readability and reduce common pitfalls. The document also outlines reasons to use CoffeeScript, provides examples, tools, and resources for further exploration.
Writing Bullet-Proof Javascript: By Using CoffeeScript
- 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
- 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 :)