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?
It allows you to create different views for different device formats - such as mobile phones, tablets and desktops.
1 2 3
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.
Create a homes controller that will enable you to play around with ActionPack Variants, run the commands below to create the home controller:
Then apply a few simple routes to your application to finish setting things up. Open up your routes file (
Well, Now we are ready to play around with ActionPack Variants. ActionPack Variants works by using a
before_action in your application controller. Open up your Application Controller (
app/controllers/application_controller.rb) and modify so that it looks sometings like:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
How does it work? Before an action is called, The
detect_browser is called and the
request.variant is set to whatever you want it to be. In the above example I use it determine whether we are running a mobile, tablet, or desktop device.
Then create a view called show.html+phone.erb (
app/views/homes/show.html+phone.erb) for your homes controller and add in the code listed below:
1 2 3 4
Then create a view for our tablet users. Create a new view called show.html+tablet.erb (
app/views/homes/show.html+tablet.erb) and add in the code listed below:
1 2 3 4
Then modify your default show.html.erb (
app/views/homes/show.html.erb) view. Open it up now and modify it so that it looks something like:
1 2 3 4
There are still a few pieces of the puzzle left. What if you need to detect the device type prior to rendering the view? For example, setting paging size/options for our queries. Fortunately, this is pretty easy. Open up your homes controller (
app/views/controllers/homes_controller.rb) and modify it so that it looks like the code listed below:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
There is one more thing to do. What happens if you need to detect the variant in your view? Fortunately this is very easy and be shown,open up your application layout (
app/views/layouts/application.html.erb) and modify it so that it looks like the code listed below:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
Note the if statement starting with
if request.variant.include? :tablet. Why do we use
request.variant is actually an array. Therefore it is necessary to use .include?.
So far so good, That’s it! See ya! :)