Resources to help bridge the jQuery to full blown coffee script dev gap?

I’m fine using jQuery and jQuery plugins within Rails apps. But when I look at more sophisticated JS usage, like the JS in the Geocoding Guide. While I understand what is happening, I couldn’t necessarily create those class and functions on my own. What are some good resources to help me cross that chasm. (It’s something I’ve struggled with for some time).

For a quick intro to writing jQuery there’s a free course from codeschool here.

Something that’s helped me immensely keep using coffeescript while learning javascript is js2coffee which will translate between the two.

If your looking for something a little more academic to really get your teeth into there is Eloquent Javascript. It may give some more insight into the core language. One of the easiest ways I’ve found to getting better with rails is to keep learning more ruby.

Hope that helps.

Thanks @DeviousDuck for the recommendations. I’ve done the jQuery tutorial at CodeSchool, was helpful. I’ll check out that Eloquent JS, thanks for providing a link.

Where I seem to be having the most issue is, for example, I have a controller that is returning a collection of ActiveRecord objects. In my view, I’m, for example, placing those ActiveRecord objects on a google map using Javascript. It’s that interaction between Rails/Ruby and Javascript, I’m most struggling with. Thoughts?

The coffeescript website lists several good resources. In particular, Smooth Coffeescript will take you from the real basics (variables, math) to some much more complex topics such as pathfinding in a map app.

If you have some sort of js framework on the front end such as Backbone, Ember, or Angular, you will probably be getting data from the Rails app via a JSON API. If you are just using a little jQuery on your page, might pass data from the Rails app via a data attribute.

In general the interactions between rails and javascript tend to be done in one of two ways.

The first is probably the simplest which is to pass data through data attributes on your html elements. There is a railscasts episode covering this which is quite helpful.

The second method is using ajax to have your javascript be able to draw data from your backend.

Which method you end up using really depends on what your trying to do. If your able to have all the data available when the page loads then it’s easiest to simply use the first. If you need to load in data dynamically depending on user interaction then you’ll need to start playing around with ajax requests.

Hope that helps a bit for looking ahead.

The easiest way to break the barrier I found is to use JS frameworks, particularly BackboneJS

And the following resources was quite helpful to get started and look at everything from the different angle:

Particularly on backbone fundamentals, especially TDD part which is rarely covered in such clean way in others courses:

And CodeSchool has a Backbone class as well:

They use a few different approaches than Sean laid out in the Thoughtbot course, but it’s a great way to work through the fundamentals, IMO.