Layout “inferno” no Rails

Temos muitos layouts na Rethink Books. Com seções do aplicativo que estão conectadas, mas muito diferentes, é um desafio gerenciar layouts. O maior desafio surge quando você começa a fazer layouts específicos para tablets ou telefones celulares. Em nosso caso, temos 3 layouts por seção, cada um com seu próprio conjunto de CSS e JavaScript. Torna-se uma bagunça.

No entanto, li recentemente sobre as melhores práticas de Rail para gerenciar o “inferno de layout”, se você quiser, e me deparei com duas opções: parciais de tudo ou usar blocos de content_for. Escolhemos o último e ele é como funcionou (suponha HAML):

Vamos começar com um layout de raiz (application.html.haml é sempre uma boa escolha).

// application.html.haml
!!! 5
%html
  %head
     = yield :title
     = yield :meta
     = yield :css 
     = yield :js
  %body
     = yield :navigation
     .container.with-standard-styling
       = yield :body

Bem direto. Mas muitos rendimentos. O que isso permite é definir sub layouts que compartilham uma raiz comum. Antes, tínhamos vários layouts que compartilhavam uma funcionalidade comum, mas o código era duplicado (lembre-se de ter layouts diferentes por seção principal do aplicativo, juntamente com o dispositivo que renderiza o aplicativo). Agora a duplicação foi reduzida, mas ainda podemos personalizar cada sub layout com o que for necessário. Por exemplo (três layouts) …

// store.iphone.haml
- content_for :css do
  = stylesheet_link_tag 'iphone.css.scss', 'small-nav.css.scss'
- content_for :body do
  %h1 I am an iPhone

// Render the root layout
= render file: 'layouts/application'

–

// store.html.haml
- content_for :css do
  = stylesheet_link_tag 'main.css.scss', 'nav.css.scss'
- content_for :body do
  %h1 I am just the website

// Render the root layout
= render file: 'layouts/application'

–

// social.html.haml
- content_for :navigation do 
  = render 'shared/facebook-style-nav'
- content_for :css do
  = stylesheet_link_tag 'social.css.scss'

- content_for :body do
  %h1 I follow the application layout but I am different

// Render the root layout
= render file: 'layouts/application'

Ao chamar o arquivo de renderização após os blocos content_for, o conteúdo apropriado é enviado ao layout raiz e podemos usar nossos estilos de site principais.

Nós realmente lutamos com isso no passado, mas parece uma maneira sólida de lidar com isso em vez de um monte de parciais. Agora é muito mais fácil gerenciar.