The Four Horsemen of Rails 3.1beta, Coffee-Script, jQuery, SCSS and Assets

A brief description of CoffeeScript, jQuery, SCSS and Assets

CoffeeScript is a translation and JavaScript with additional features to ease development, code readability, and functionality. It has all the best features of JavaScript as it IS JavaScript, but adds on essential development perks like terse syntax, local variable scoping, and utilities.

jQuery is a wonderful JavaScript development library which works smoothly with or without CoffeeScript. For my personal development usage, jQuery gives me a consistent selector and reliable cross browser interface functionality. It’s a great resource for any JavaScript work.

SCSS files, or SASS is a dynamic version of CSS with variables and mixins (blocks or structures). This is one of features that you say, oh yeah why’d it take the web language folks so long to get this right. Although I haven’t had a chance to use this feature yet, I look forward to doing so. Say good bye to cut and paste errors cropping up in your style code.

Assets is the new directory for your projects javascript, css and images. Resource optimization is accomplished with Sprockets. Sprockets merges resources such as javascript and css into a single compressed location for rapid delivery to clients.

An example

While converting an older rails 2.3.4 app to 3.0 I crashed and burned while changing one file at a time over within the project. Needless to say that was a flawed strategy, but I did learn a little along the way. I ended up skipping 3.0 and moving to 3.1beta1 with a fresh app, and copied my app and public folders in after getting the migrations right. That move had a couple of outstanding issues, the most important being that I didn’t use rails edge for creating the new app (thanks for the tip RubyInside).

First snag the latest rails into an easy to reference location:

cd ~/goodtimes

git clone https://github.com/rails/rails.git

My path includes a ~/Desktop/Dropbox/ so my code is available everywhere.

Then refer to that rails exec for building a new app:

~/goodtimes/rails/bin/rails new bacon --edge

Assuming your rails repo is in goodtimes and your new app is called bacon.

Then I followed parts of this gist tutorial (thanks @eric1234 and @sgruhier for putting it together), shared pain is shared gain.

Finally this morning I created a git repo and pulled in my old project, then resolved all the merge conflicts. There are likely some sneaky issues left over, as auto merge may have done terrible things with configuration. My last error was a stale cookie, no one eats those.

I’ll repeat the process and/or diff one directory at a time if I can’t figure it out quickly. So far I’ve created a few locally functioning rails 3.1beta apps, but ran into problems when deploying the migrated medium complexity app to Heroku, even with theRubyRacer gem.

The likely problem is hosed configuration settings. The database and new change migrations appear ok, along with the moved JavaScript and CSS into assets (auto merge magic) along with a new square root slinging CoffeeScript ;).

More to come…

Related posts:



Be Sociable, Share!

  • Pingback: Twitter’s List and Search APIs leave much to be desired — Victus Spiritus

  • Pingback: Imagebrowser Rails app ported from 2.3.4 to 3.1beta — Victus Spiritus

  • Jae

    What’s the best way to share code between coffeescript files? 

    E.g. if I want to call a function defined in application.js.coffee from anotherfile.js.coffee.

    CoffeeScript wraps code from each file in (function() {}).call(this); to avoid namespacing conflicts.

  • http://www.victusspiritus.com/ Mark Essel

    I think you can include one file in another.

    include “utils”

  • Jae

    Yeah. The file is included … I think it’s more of a design question. Here’s what I found that works:

    https://gist.github.com/988010

  • http://www.victusspiritus.com/ Mark Essel

    Gotcha. So you order the inclusion of script files in the assets file.

    Does the require only work when using CoffeeScript with node.js/Rhino/ other js servers? I thought that would be a great way to include coffeescript libraries.