Alfa Jango Blog Engineering, Software, and Entrepreneurship

Continued from Rails 3 Remote Links and Forms: A Definitive Guide.

Since writing the Rails 3 Remote Links & Forms Definitive Guide, one question keeps coming up:

How can we make our remote links and forms retrieve JS.ERB, instead of an HTML partial?

In the last article, we requested an HTML partial to be inserted into the page by our AJAX callbacks. But what if we want JavaScript to be executed? Or JSON or XML to be parsed? Or plain text to be displayed?

Spoiler Alert: this article concludes with a complete working example using js.erb.

Equal parts Rails & jQuery

First, we must understand the :remote => true process in Rails 3. It’s equal parts Rails and jQuery magic. But don’t worry, it’s very little magic, bundled into a 4-step process:

1. Rails tells jQuery, “Hey, bind your ajaxy goodness to this sweet little link/form,” with the :remote => true option.
2. jQuery hi-jacks the element’s click/submit event and binds it to the .ajax() method. Now that element submits via AJAX instead of loading a new page in the browser.
3. Rails receives the AJAX web request when the element is clicked/submitted and responds with some content.
4. jQuery receives the response content with the .ajax() method that hi-jacked our element, and provides callbacks for us to handle the response in the page.

In this article, we’re exploring the different ways we can specify the format of the AJAX response and handle it accordingly, which actually spans all 4 steps above.

(more…)

Also see Rails 3 Remote Links and Forms Part 2: Data-type (with jQuery).

Spoiler Alert: If you like magic, stop reading. The Rails 3 UJS driver (rails.js), which powers the remote links, forms, and inputs, is not very magical when you know how it works.

This article uses the jQuery UJS driver, though the Prototype UJS driver does the same thing. UJS, by the way, stands for “Unobtrusive JavaScript”.

If you have any experience with jQuery, take a few minutes to check out the rails.js source. It’s pretty straight forward, and only 147 lines as of this writing. I’ll be here waiting to answer your questions when you get back.

What rails.js does

1. It finds remote links, forms, and inputs, and overrides their click events to submit to the server via AJAX.
2. It triggers six javascript events to which you can bind callbacks to work with and manipulate the AJAX response.
3. It handles the AJAX response from the server

What rails.js does NOT do

Notice that last bit is struck-through. This seems to be the greatest source of confusion when starting with the new Rails 3 remote functionality. Thanks to habits engrained by Rails 2′s link_to_remote and remote_form_for, we expect that Rails 3 would also handle the AJAX response for our remote links and forms. But it doesn’t; it leaves that for you.

Rails will take your luggage up to your room, but it won’t unpack your bags for you. This is by design; why would you want the bellhop going through your stuff? Also, the actual handling of the data is largely unique to each element, and depends on the data you’re working with in each case. So Rails leaves that part up to you. We’ll come back to this.

The role of HTML5

You’ve likely heard that Rails 3 uses HTML5. That’s true, but the actual role that HTML5 plays may be simpler than you suspect.

(more…)

In this article, we’re going to speed up our Rails application by up to 75%, simply by optimizing our Rails asset host. We’re going to serve our components (stylesheets, javascripts, images, etc.) from a combination of our app’s server and Amazon CloudFront (Option A, recommended), or entirely from CloudFront (Option B – easier).

The best option for you may depend on your specific needs, but I’ll cover both processes below. For a an in-depth analysis of why Option A is recommended over Option B, see the last article in this series, How to Combine GZip + CDN for Fastest Page Loads.

(more…)

We recently worked on a Rails application that had page and action caching set up, only to find that it was not actually working. It occurred to me that many Rails/Passenger/Apache applications may have caching set up in a way that it appears to be caching, when it is not actually caching. Searching through the interwebs for various Passenger/Apache configurations, such as this snippet on Github or this discussion on Google Groups, I found that many did not work with the most recent version of Phusion Passenger. What’s more, these configurations give the appearance that they are working.

For an introduction to caching with Rails, check out this post: Caching With Rails: An Overview

The Appearance That Caching Works

Here is what I mean by giving the appearance that caching is working:

1. you add caches_page :index to your controller, for example
2. configure and restart your server
3. load the index page
4. check your rails cache directory on your server, and see the index.html
5. it works! (hint: this step is wrong, you’re not quite there yet)

Just because Rails is generating your cached page does not mean that your server is subsequently serving the cached .html file instead of sending the request to Rails again.

Ensure It’s Serving the Cached Page

To make sure it’s subsequently serving the cached page, the easiest method is to look at the created date on the cached file on your server, for instance:

(more…)

Here’s the problem: You have a Ruby on Rails application and its WordPress blog. For the sake of consistency and branding, you’d like to use the same layout in your WordPress blog as you do for your Rails app. Perhaps your blog is one of the main links or tabs in your application’s header.

Why this doesn’t work: You proceed with creating a custom theme for your WordPress blog that looks exactly like your Rails application. Then over the next couple years, you begin to realize how tedious this solution is. You have to copy over your CSS stylesheets from your Rails app, your Javascript files (if your standard layout contains any Javascript elements, like a Twitter widget in the footer or whatever), and your layout images and assets. Then, every time you change or update the layout of your Rails app, you have to copy the changes in your custom WordPress theme. And you cannot just copy the changes, because if you have any Ruby/Rails functionality in the layout, you have to translate them into PHP functionality in your WordPress layouts.

And then there’s the impossible stuff… if anything in your Rails app layout loads information from the database in your Rails app, then you cannot have those elements in your WordPress layout, unless you do something like create an XML or JSON feed in your Rails app and then import it in your WordPress layout. But this is quite tedious still if you want to change any of it!

There’s an easier way.

Include Your Rails Layout Directly In Your WordPress Layout

The solution I found turns out to be quite simple. The basic idea is to create a :partial in your Rails app layout, make it publicly accessible via your config/routes.rb, have it generate and simply return the appropriate html using your controller method, and then import that html (and CSS) in your WordPress layout.

(more…)

Munin is a great tool to monitor resources on your server, showing graphs over time, so that you can analyze resource trends to find what’s killing your server before it causes major problems. It is also very configurable and can be made to profile and graph just about anything via plugins. And with a couple tricks, you can get it to monitor your Phusion Passenger application with ease.

Update: If you have RVM installed on your server and need Munin to work with RVM’s Passenger installation, follow all of the instructions below, and then make the changes described in Monitor Passenger with Munin when using RVM.*

* These changes will still use your server’s non-RVM-installed default Ruby to run the Munin plugin, which will in turn use your RVM-installed Ruby to run the passenger-status and passenger-memory-stats commands.

If you already have Munin installed and working, and just want to know how to get the Passenger Plugins working, you can skip directly to Install Munin Passenger Plugins, Configure Munin for Passenger Stats, and be sure to read the Gotcha.

(more…)