Como usar as variantes do ActionPack do Rails 4.1.

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