Rails Action Pack Variants

Recently on one of the projects at Eloquent Studio, I needed to render two very different view templates for desktop and mobile, even Bootstrap responsive design did not fit the requirement.

A little hesitant to roll out a custom solution for such a common requirement, I did some google searches and struck up the RailsGuides. ActionPack Variants is just what I was looking for. ActionPack Variants is a specialisation of request format. Released with Rails 4.1, the api was later improved to its current state in Rails 5 as per this PR

Within the controller action's respond to block

# app/controllers/patterns_controller.rb
before_action :set_variant, only: :show

def show
  format.html do |html|
    html.phone
    html.tablet
  end
end

private

def set_variant
  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

And setup view templates as

# app/views/patterns/show.html.erb

# Show page for desktop view

# app/views/patterns/show.html+tablet.erb

# Show page for tablet view

# app/views/patterns/show.html+phone.erb

# Show page for phone view

Not just devices, variants can be used for more varied use cases, like rendering different view templates based on user roles.

CoverImage Credits: https://unsplash.com/@bugsster

Comments

[Amit Patel]

render variants: [:phone, :tablet]

is shortcut for for

format.html do |html|
    html.phone
    html.tablet
  end

[Hasan TEZCAN]

Nice explanation, thanks.