Como usar as variantes do ActionPack do Rails 4.1.

O Rails 4.1 foi lançado há pouco tempo e veio com um novo recurso fantástico que muitos desenvolvedores web responsivos irão flexibilizar.

É chamado de Variantes. Variantes do ActionPack.

O que isso faz?

I permite que você crie diferentes visualizações para diferentes formatos de dispositivo – como telefones celulares, tablets e desktops.

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

Por que isso é útil?

Isso é tremendamente útil porque agora você pode servir uma
versão muito mais enxuta de sua visão para dispositivos móveis, em vez de apenas ocultar os
elementos usando CSS usando consultas de mídia.

Os elementos ocultos ainda são carregados e precisam ser eliminados – usando o
Variants é muito mais fácil do que antes fornecer visualizações simples e médias
para dispositivos móveis.

Exemplo de aplicativo independente:

Você pode encontrar um aplicativo Rails simples que usa o código neste exemplo aqui: https://github.com/sergiotapia/actionpack-variants-example

Crie uma função auxiliar em seu 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

Responda ao conjunto de variantes dentro de seus controladores.

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

Finalmente, crie suas três visualizações separadas.

<!-- 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>

Isso é um embrulho . Como você pode ver, é bastante simples e muito flexível.

Eu recomendaria criar duas visualizações separadas quando necessário:

A visualização da área de trabalho / tablet.
A visão do telefone móvel.

Faça com que a visualização do telefone celular chame imagens menores e menos elementos html. Torne suas visualizações mais rápidas instantaneamente.

Testando isso localmente sem um dispositivo?

Você vai precisar usar um switcher de agente de usuário para ver as várias
visualizações. Eu recomendo:

Para Firefox: https://addons.mozilla.org/en-US/firefox/addon/user-agent-switcher/

Para Chrome: https://chrome.google.com/webstore/detail/user-agent-switcher-for-c/djflhoibgkdhkhhcedjiklpkjnoahfmg