End to-End CoffeeScript


Published on

Talk at RailsConf 2011 by Trevor Burnham about running CoffeeScript code on both the front and back ends of a Rails 3.1 app.

Published in: Technology
  • CoffeeScript: Accelerated JavaScript Development --- http://amzn.to/1nZ06aZ
    Are you sure you want to  Yes  No
    Your message goes here
  • CoffeeScript in Action --- http://amzn.to/1SaSGft
    Are you sure you want to  Yes  No
    Your message goes here
  • The Little Book on CoffeeScript --- http://amzn.to/1T2KWys
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

End to-End CoffeeScript

  1. End-to-End CoffeeScript CoffeeScript <ul><li>Presented by Trevor Burnham </li></ul><ul><li>at RailsConf/BohConf 2011 </li></ul>
  2. Part I CoffeeScript!?!? CoffeeScript!?!?
  3. What is CoffeeScript?
  4. Do you have to use it?
  5. But seriously...
  6. Things I’ll cover today: <ul><li>A brief primer on the CoffeeScript language </li></ul><ul><li>How it works with the Rails 3.1 asset pipeline </li></ul><ul><li>Running the same JS/CS code on both the client and the server </li></ul>
  7. And things I won’t: <ul><li>The CoffeeScript language in depth (that would take a whole book... available at http://coffeescript-book.com ) </li></ul><ul><li>Sprockets 2 ( #= require foo ) </li></ul><ul><li>jQuery UJS ( $.rails ) </li></ul>
  8. CoffeeScript crash course <ul><li>“ Dash rocket” instead of function </li></ul><ul><li>Semantic whitespace instead of {} </li></ul><ul><li>Implicit parentheses, implicit var scoping </li></ul>
  9. Awesome goodies for Rubyists <ul><li>Postfix if/unless </li></ul><ul><li>Implicit return s </li></ul><ul><li>String interpolations </li></ul>
  10. Things that feel weird to Rubyists <ul><li>Parentheses are not optional on functions with no arguments </li></ul><ul><li>It’s just JavaScript™ </li></ul>
  11. Things that feel weird to JavaScripters <ul><li>CoffeeScript’s of is JavaScript’s in </li></ul><ul><li>CoffeeScript’s in is Python’s in </li></ul><ul><li>CoffeeScript’s == is JavaScript’s === </li></ul>
  12. Tradeoffs <ul><li>Debugging (will get better, but currently kind of a pain) </li></ul><ul><li>Changing versions (though it’s been pretty stable for the last 5 months) </li></ul><ul><li>Less documentation (but there is a book from PragProg...) </li></ul>
  13. Even so! <ul><li>After only a week of using CoffeeScript, I felt more productive than I ever had in JavaScript. </li></ul><ul><li>The community is awesome. </li></ul><ul><li>Learning CoffeeScript might make you think more deeply about JavaScript. </li></ul>
  14. Part II CoffeeScript in Rails 3.1 CoffeeScript in Rails 3.1
  15. Let’s make a Rails app! <ul><li>rails new EndToEnd </li></ul><ul><li>cd EndToEnd </li></ul><ul><li>rails generate controller User signup </li></ul><ul><li>Clone the repo if you want to follow along... http://github.com/TrevorBurnham/EndToEnd ) </li></ul>
  16. JavaScripts are assets <ul><li>New in Rails 3.1, generate controller gives us a CoffeeScript file automatically: </li></ul>
  17. Compound extensions <ul><li>.html.erb & .html.haml -> HTML </li></ul><ul><li>.css.scss & .css.sass -> CSS </li></ul><ul><li>.js.coffee -> JavaScript </li></ul><ul><li>Want to use a different format? Just rename! application.js -> application.js.coffee </li></ul>
  18. Compound extensions <ul><li>Stylesheets and JavaScripts are automatically concatenated by Sprockets 2, even in development: </li></ul><ul><li>All the CSS and JS is loaded on every page, so it’s still up to you to isolate controller-specific functionality. </li></ul>
  19. Building a sign-up box
  20. Adding JS validations
  21. Great, but... <ul><li>Client-side validations are just there to provide a friendlier user experience. What really matters are server-side validations. </li></ul><ul><li>Traditionally, we’d do this by using ActiveRecord, repeating much of the work we just did... </li></ul><ul><li>But there’s another way! </li></ul>
  22. Server-side JavaScript! (And CoffeeScript) <ul><li>If you’ve got coffee-script in your Gemfile, then you’ve already got ExecJS: https://github.com/sstephenson/execjs </li></ul><ul><li>It uses the best available JS environment on your system. Use therubyracer (or therubyracer-heroku ) for maximum portability. </li></ul>
  23. No need to rewrite the same validation code! <ul><li>ExecJS lets us turn our CoffeeScript validation script into a Ruby object: </li></ul>
  24. A small taste of what’s to come what’s to come <ul><li>Future plugins will make the server-side JS process smoother in Rails </li></ul><ul><li>With jsdom, you can do practically anything that you could do with client-side JS (including manipulating HTML with jQuery!) </li></ul><ul><li>Validation, templating... anything you’re duplicating can be done as end-to-end JS. </li></ul>
  25. How can you become a CoffeeScript ninja? <ul><li>Official site, great overview: http://coffeescript.org </li></ul><ul><li>Nice screencast: http://peepcode.com/products/coffeescript </li></ul><ul><li>Totally unbiased book recommendation: http://coffeescript-book.com </li></ul>
  26. Thanks <ul><li>Questions? [email_address] </li></ul>