segunda-feira, 6 de janeiro de 2014

Evitando a renderização de áreas ocultas em layouts responsivos

Atualmente é bastante comum o uso de layouts responsivos, ou seja, layouts que se adaptam ao navegador do usuário.

Se um usuário acessa o site usando um smartphone, o site provavelmente irá exibir apenas o conteúdo essencial, deixando invisível boa parte do HTML.

Agora, por que devemos renderizar as áreas que não são visíveis? Evitando a renderização de áreas que sabemos estarem ocultas podemos melhorar o desempenho e economizar bateria dos dispositivos.

Ember Responsive Area

Para o Ember.js criei um componente bastante simples que resolve esse problema. Toda a área dentro do componente será renderizada apenas se estiver visível. O componente se chama Ember Responsive Area.

O uso dele é bastante simples:
<div class="hidden-phone">
  {{#responsive-area}}
    Aqui vem o conteúdo.
  {{/responsive-area}}
</div>

Como funciona

Quando o componente é carregado, ele verifica se o elemento está visível. Se estiver visível, renderiza a área. Caso contrário, não renderiza e monitora o redimensionamento do navegador.

Se o usuário redimensionar o navegador ou girar o dispositivo (tablet/smartphone) o componente irá verificar novamente se deve renderizar a área.

Note que isso só funciona se a visibilidade da região depende do tamanho da janela do navegador, isso não funcionará se você está ocultando e exibindo manualmente a área.