Uploaded bySusan Potter
Writing Bullet-Proof Javascript: By Using CoffeeScript
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.
More Related Content
Similar to Writing Bullet-Proof Javascript: By Using CoffeeScript
Writing Bullet-Proof Javascript: By Using CoffeeScript
- 1. Writing bullet proofJavascript (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 useCoffeeScript? 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.
- 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 :)