Last Updated: February 25, 2016

How to use Rails 4.1 ActionPack Variants.

Rails 4.1 released a little while ago and came out with a fantastic new feature I think a lot of responsive web developers are going to flex.

It's called Variants. ActionPack Variants.

What does it do?

I allows you to create different views for different device formats - such as mobile phones, tablets and desktops.

# /app/views/home/index.html.erb
# /app/views/home/index.html+phone.erb
# /app/views/home/index.html+tablet.erb

Why is this useful?

This is tremendously useful because you can now serve a much slimmer
version of your view to mobile devices, instead of just hiding the
elements using CSS using media queries.

Hidden elements still load and need to come down 'the wire' - using
Variants it's much easier than before to serve up lean and mean views
to mobile devices.

Example self-contained application:

You can find a simple Rails application that uses the code in this example here: https://github.com/sergiotapia/actionpack-variants-example

Create a helper function in your application_controller.

class ApplicationController < ActionController::Base
 # Prevent CSRF attacks by raising an exception.
 # For APIs, you may want to use :null_session instead.
 protect_from_forgery with: :exception

 before_action :detect_device_format

 private

 def detect_device_format
 case request.user_agent
 when /iPad/i
 request.variant = :tablet
 when /iPhone/i
 request.variant = :phone
 when /Android/i && /mobile/i
 request.variant = :phone
 when /Android/i
 request.variant = :tablet
 when /Windows Phone/i
 request.variant = :phone
 end
 end
end

Respond to the variant set inside of your controllers.

class HomeController < ApplicationController
 def index
 respond_to do |format|
 format.json
 format.html # /app/views/home/index.html.erb
 format.html.phone # /app/views/home/index.html+phone.erb
 format.html.tablet # /app/views/home/index.html+tablet.erb
 end
 end
end

Finally, create your three separate views.

<!-- Inside the index.html.erb -->
<h1>Home#index</h1>
<p>This is from desktop page view.</p>

<!-- Inside the index+phone.html.erb -->
<h1>Home#index</h1>
<p>This is from phone page view.</p>

<!-- Inside the index+tablet.html.erb -->
<h1>Home#index</h1>
<p>This is from tablet page view.</p>

That's a wrap. As you can see it's quite simple, and very flexible.

I would recommend crafting two separate views when needed: