Idyllic Software Blog

Ruby on Rails Development and Coffee-script: Getting started

Why should I learn Coffee-Script for Ruby on Rails Development?

1. Rails 3.1 is shipping with coffee script.
2. It adds a fine syntactic sugar to java script making your code even more beautiful and terse.
3. Easy to learn if you already are working on scripting languages such as ruby or php.
4. If you always feared wiring inheritance in javascript, coffee-script will make it super easy for you.
5. Being compiled to java script itself, it integrates seamlessly with your favorite javascript libraries like jquery or prototype or moo tools or anything else.

I am not going to blog about coffee scripting as it is already very well documented. However, it might help to lay down steps to quickly integrate it in your rails application. So here is the 10 minutes drill to it.

Introducing coffee-script in you rails 3 application:

• Add the necessary gems to your gemfile
gem 'coffee-script'
gem 'barista' #It will auto compile your .coffee files into .js files.
gem 'therubyracer', :require => nil #If you do not have nodesjs installed. Install node.js.
gem 'json'
• Configure barista for your application.
  rails generate barista:install
• Know that you have a config/initializers/barista_config.rb file for customization. You do not need to touch it yet.
• Create app/coffeescripts folder
• Add in your first coffee script file in there named welcome.coffee with the below code
  $(document).ready ->
alert("Welcome to the world of coffee scripts");
• Copy coffee-scripts.js to your public/javascript from this link.
  
• Add coffee-script.js and welcome to your javascript includes tag
• Add below code in one of your erb files or application layout to see inline coffee script:
  <script type="text/coffeescript">
firstFunction = ->
alert('I am inline function')
firstFunction();
</script>
• Start your rails app and goto http://localhost:3000
• Know that barista will start logging in your console window.
• You can also use jquery with coffee-script syntax
  <div id="effects">Test to see if it works with jQuery</div>
<script type="text/coffeescript">
$(document).ready ->
$('#effects').fadeOut('slow', ->
$('#effects').fadeIn('slow')
)
</script>


Enjoy Coffee Scripting. Try it! yourself. If you are considering Ruby on Rails for your next project, do give Coffee Script a shot. Feel free to reach out to us, if you want to discuss or bounce off your thoughts with us.One of our Ruby expert will be more than willing to get on a call with you.