End-to-End CoffeeScript CoffeeScript <ul><li>Presented by Trevor Burnham </li></ul><ul><li>at RailsConf/BohConf 2011 </li>...
Part I CoffeeScript!?!? CoffeeScript!?!?
What is CoffeeScript?
Do you have to use it?
But seriously...
Things I’ll cover today: <ul><li>A brief primer on the CoffeeScript language </li></ul><ul><li>How it works with the Rails...
And things I won’t: <ul><li>The CoffeeScript language in depth (that would take a whole book... available at  http://coffe...
CoffeeScript crash course <ul><li>“ Dash rocket” instead of  function </li></ul><ul><li>Semantic whitespace instead of  {}...
Awesome goodies for Rubyists <ul><li>Postfix  if/unless </li></ul><ul><li>Implicit  return s </li></ul><ul><li>String inte...
Things that feel weird to Rubyists <ul><li>Parentheses are  not  optional on functions with no arguments </li></ul><ul><li...
Things that feel weird to JavaScripters <ul><li>CoffeeScript’s  of  is JavaScript’s  in </li></ul><ul><li>CoffeeScript’s  ...
Tradeoffs <ul><li>Debugging  (will get better, but currently kind of a pain) </li></ul><ul><li>Changing versions  (though ...
Even so! <ul><li>After only a week of using CoffeeScript, I felt more productive than I ever had in JavaScript. </li></ul>...
Part II CoffeeScript in Rails 3.1 CoffeeScript in Rails 3.1
Let’s make a Rails app! <ul><li>rails new EndToEnd </li></ul><ul><li>cd EndToEnd </li></ul><ul><li>rails generate controll...
JavaScripts are assets <ul><li>New in Rails 3.1,  generate controller  gives us a CoffeeScript file automatically: </li></ul>
Compound extensions <ul><li>.html.erb  &  .html.haml  -> HTML </li></ul><ul><li>.css.scss  &  .css.sass  -> CSS </li></ul>...
Compound extensions <ul><li>Stylesheets and JavaScripts are automatically concatenated by Sprockets 2, even in development...
Building a sign-up box
Adding JS validations
Great, but... <ul><li>Client-side validations are just there to provide a friendlier user experience. What really matters ...
Server-side JavaScript! (And CoffeeScript) <ul><li>If you’ve got  coffee-script  in your Gemfile, then you’ve already got ...
No need to rewrite the same validation code! <ul><li>ExecJS lets us turn our CoffeeScript validation script into a Ruby ob...
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 Rai...
How can you become a CoffeeScript ninja? <ul><li>Official site, great overview: http://coffeescript.org </li></ul><ul><li>...
Thanks <ul><li>Questions? [email_address] </li></ul>
Upcoming SlideShare
Loading in...5
×

End to-End CoffeeScript

7,835

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
0 Comments
10 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
7,835
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
129
Comments
0
Likes
10
Embeds 0
No embeds

No notes for slide

End to-End CoffeeScript

  1. 1. End-to-End CoffeeScript CoffeeScript <ul><li>Presented by Trevor Burnham </li></ul><ul><li>at RailsConf/BohConf 2011 </li></ul>
  2. 2. Part I CoffeeScript!?!? CoffeeScript!?!?
  3. 3. What is CoffeeScript?
  4. 4. Do you have to use it?
  5. 5. But seriously...
  6. 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. 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. 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. 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. 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. 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. 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. 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. 14. Part II CoffeeScript in Rails 3.1 CoffeeScript in Rails 3.1
  15. 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. 16. JavaScripts are assets <ul><li>New in Rails 3.1, generate controller gives us a CoffeeScript file automatically: </li></ul>
  17. 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. 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. 19. Building a sign-up box
  20. 20. Adding JS validations
  21. 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. 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. 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. 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. 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. 26. Thanks <ul><li>Questions? [email_address] </li></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×