Categorias
AMP Accelerated mobile pages

Criando light-box com AMP: amp-lightbox

Nesse post vamos ver como implementar um light-box em nossa aplicação AMP, light-box é um dos recursos mais usados desde a popularização do JavaScript. Na maioria das vezes usado para focar a exibição de elementos gráficos ou mensagens. A plataforma amp disponibiliza três componentes para exibiãção de light-box amp-lightbox, amp-image-lightbox e amp-lightbox-gallery.

Cada um desses componentes possui uma aplicação específica, Para esse tutorial iremos abordar o componente amp-lightbox.

amp-lightbox

Esse componente quando utilizado seu elemento filho será exibido em uma modal quando acionado através de um evento de clique. Com isso temos que ter um segundo elemento para ativa-lo, um botão poderá ser uma alternativa. O componente possui alguns comportamentos já pre definidos, por exemplo, quando o usuário pressionar a tecla “esc” o light-box será fechado. Um alternativa é incluir um elemento com a ação close no light-box.

O componente amp-lightbox é um componente extended assim precisamos carregar o script relacionado:

<script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>

Com essa introdução vamos criar o nosso primeiro exemplo, baseado no projeto the best caipirinha, vamos utilizar o light-box para trazer mais informações sobre os items da nossa receita, por exemplo, descrição sobre cana de açúcar com isso temos o seguinte código:

<button on="tap:sugarcane-wiki">sugarcane</button>

<amp-lightbox id="sugarcane-wiki" layout="nodisplay">
                <p>
                  Sugarcane, or sugar cane, or simply cane, are several species of tall perennial true grasses of the genus Saccharum...
                </p>
</amp-lightbox>

Apenas com o botão e o componente amp-lighbox temos nosso light box somente com a funcionalidade como podemos ver na imagem abaixo:

Agora é hora de adicionar a parte visual, para isso precisamos adicionar o estilo para o nosso elementos com isso vamos criar classes para estilizar nossos elementos em nosso CSS e aciona-los em nosso elementos HTML:

CSS

.lightbox {
        align-items: center;
        background: rgba(0, 0, 0, 0.8);
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100%;
        width: 100%;
        position: absolute;
        padding: 2em;
      }

      .lightbox_p {
        color: #fff;
        font-size: 1.5em;
        font-weight: 500;
      }

HMTL

<amp-lightbox id="sugarcane-wiki" layout="nodisplay">
              <div class="lightbox">
                <p class="lightbox_p">
                  Sugarcane, or sugar cane, or simply cane, are several species of tall perennial true grasses of the genus Saccharum....
                </p>
                <p class="lightbox_p">source: wikipedia</p>
              </div>
            </amp-lightbox>

Adicionando o estilo temos o seguinte resultado:

Apenas adicionando o botão para abrir o light-box, para fechar precisamos pressionar a tecla “esc” mas isso pode não ser intuitivo para os nossos usuários com isso vamos adicionar um botão fechar dentro de nosso light-box.

<amp-lightbox id="sugarcane-wiki" layout="nodisplay">
              <div class="lightbox">
                <p class="lightbox_p">
                  Sugarcane, or sugar cane, or simply cane, are several species of tall perennial true grasses of the genus Saccharum....
                </p>
                <p class="lightbox_p">source: wikipedia</p>
                <button class="lightbox_close" on="tap:sugarcane-wiki.close">close</button>
              </div>
            </amp-lightbox>

Adicionamos um botão com a ação de close sobre o light-box, falando em ações o componente amp-lightbox aceita duas ações open e close. Por padrão ele aciona a ação de open por isso que no botão para abrir o light-box não especificamos a ação. Agora para realizar a estilização do nosso botão vamos adicioar o seguinte CSS:

.lightbox_close {
        position: absolute;
        right: 32px;
        top: 32px;
        width: 32px;
        height: 32px;
        opacity: 0.7;
        text-indent: -999px;
        overflow: hidden;
        border: none;
        background: transparent;
      }

      .lightbox_close:hover {
        opacity: 1;
      }

      .lightbox_close::before,
      .lightbox_close::after {
        background-color: #fff;
        content: '';
        position: absolute;
        left: 16px;
        top: 0;
        height: 33px;
        width: 3px;
      }

      .lightbox_close::before {
        transform: rotate(45deg);
      }

      .lightbox_close::after {
        transform: rotate(-45deg);
      }

E o resultado será o seguinte:

com CSS criamos o botão de fechar o texto é escondido para ser ligo apenas por leitores de tela

Outro opção que poderíamos incluir se o usuário fechasse o light-box clicando no background com isso adicionamos o evento de clique no elemento com o class “lightbox”:

<amp-lightbox id="sugarcane-wiki" layout="nodisplay">
              <div class="lightbox"
                on="tap:sugarcane-wiki.close"
                role="button"
                tabindex="0">
                <p class="lightbox_p">
                  Sugarcane, or sugar cane, or simply cane, are several species of tall perennial true grasses of the genus Saccharum...
                </p>
                <p class="lightbox_p">source: wikipedia</p>
              </div>
              <button class="lightbox_close" on="tap:sugarcane-wiki.close">close</button>
            </amp-lightbox>

No código acima adicionei o evento de tap no elemento lightbox também adicionei duas propriedades por questões de acessibilidade “role” e “tabindex” para tornar a div clicável e não interferir na ordem lógica dos elementos para leitores de tela.

Atributos

Então vimos alguns exemplos práticos com light-box agora vamos ver alguns atributos:

  • animate-in (opcional): define o estilo de animação de abertura do light-box. Por default sua aparição vai ser feita por fade-in. Mas temos disponíveis: fade-in, fly-in-bottom e fly-in-top.
  • close-button (obrigatório para AMP ads): renderiza um botão no to do lightbox. Ele é somente válido e obrigatório para AMP ads.
  • id (obrigatório): valor único para identificar o lightbox.
  • layout (obrigatório): deve ser definido como nodisplay.
  • scrollable (opcional): Quando este atributo é definido o conteúdo do light-box pode ter rolagem horizontal habilitada quando necessário.

O tipos de animações com animate-in eu vou deixar para mostrar em uma vídeo aula no meu canal, mas caso queira saber mais sobre AMP confira a página com outros tutoriais aqui.

Em breve estarei adicionando mais posts sobre os componentes amp, qualquer dúvida deixe um comentário e até o próximo vídeo.

Categorias
AMP Accelerated mobile pages JavaScript Tutoriais

Introdução ao AMP

AMP ou Accelerated mobile pages surgiu para solucionar um problema antigo das aplicações web relacionado a performance, o fato que muitas das aplicações web são desenvolvidas nos grandes centro onde as empresas e usuários tem facilmente acesso a conexão rápida. Quando as aplicações são testadas nos grandes centros não levam em conta o tempo de carregamento da aplicação em uma conexão lenta, e um dos dos objetivos do AMP foi solucionar este problema e e entregar essa informação priorizando performance.

Sabemos conexões rápidas não se aplica ao resto do planeta muitas regiões ao redor do globo continuam tendo dificuldade de acessar conteúdo online. Como podemos promover a inclusão desses grupos preocupado com esse problema o time do Google criou o projeto open source chamado Accelerated Mobile Pages posteriormente chamado apenas de AMP.

Mas esse problema também afeta os grandes centros usuários mobile com conectividade limitada também tem sua experiência prejudicada, todos esses problemas aumentam o tempo de carregamento e na exibição de elementos na tela. Além do fato que aplicações de alta performance ajudam na taxa de conversão usuários, que tais usuários estão cada vez mais utilizando aplicações web através de dispositivos moveis.

AMP permite a criação de sua aplicação em um curto espaço de tempo, isso através de componentes criando um ambiente de fácil manutenção além promover melhores praticas como:

  • Performance
  • Acessibilidade
  • Confiabilidade
  • Design responsivo

Além disso AMP reduz a complexidade do seu código, mas sem perder o controle de sua aplicação você continua com a capacidade de adicionar código CSS para customizar sua aplicação. O set de componentes já existentes ajudam na agilidade na criação de novas aplicações presando a performance. AMP é um projeto open source a comunidade sem está criando novos componentes e novas versões da aplicação e a base do seu código sempre será atualizada

Como AMP funciona

AMP possui três pilares:

  • AMP HTML extende HTML básico criando novas tags criando novas features, por trás das cortinas ele trabalha com web components
  • AMP JS controla a execução de javascript também adicionando melhorias de performance como tree shaking.
  • AMP Cache armazena o conteúdo da aplicação.

A performance dentro de projetos AMP é possível por conta de alguns pontos chaves que iremos listar a seguir.

JavaScript assíncrono

com javascript podemos modificar todos os aspectos de uma página, mas também bloquear o seu processamento caso não especificarmos que o seu carregamento não afete a renderização da página. Nesse caso todo o carregamento de JavaScript em AMP é feito de forma assíncrona para não afetar a entrega do conteúdo.

Por isso AMP restringe o carregamento de JavaScript escrita pelo autor nesse caso temos que utilizar tags especiais para incluir interação com o usuário.

Evita que extensões de terceiros bloqueiem a renderização

AMP não permite que extensões como, lightboxes, instagram, embers, tweets bloqueiem a renderização do seu conteúdo. Muitos desses items enquanto fazem requisições para suas respectivas APIs bloqueiam a renderização da sua aplicação, mas isso não significa que que você não poderá utilizar esses recursos AMP tem uma série de componentes para interagir com outras plataformas.

Tamanho de todos os recursos estaticamente

Recursos como imagens, iframes ou anúncios, precisam informar seu tamanho no HTML, de modo que AMP possa determinar o tamanho e a posição de cada elemento antes que os recursos sejam baixados. AMP carrega o layout da página sem esperar o download de nenhum recurso.

AMP separa o layout HTML dos recursos externos, isso para priorizar a entregar com conteúdo mais rápido possível. Apenas uma solicitação HTTP é necessária para o todo o layout do documento (+ fontes). Como AMP é otimizado para evitar recálculos de estilo no seu navegador, não haverá nenhum novo layout após a ultima requisição.

Gerenciamento de Javascript de terceiros

AMP mantém todos os scripts de terceiros fora do caminho crítico da renderização das páginas. JS de terceiros gostam de usar carregamento síncrono para executar suas tarefas para garantir sua execução mas isso acaba aumentando o tempo de carregamento da aplicação.

Páginas AMP permitem o carregamento de scripts de terceiros mas apenas em iframes. Com isso o carregamento fica isolado e não afeta o processamento principal de nossas páginas. Mesmo que eles afetem o estilo da página o impacto será mínimo.

Atualizando o post enquanto estava escrevendo este post

CSS inline e com tamanho limitado

O CSS externo como sabemos bloqueia a renderização de nossa página, nas páginas AMP somente estilos inline são permitidos, com isso temos uma requisição a menos em nossa aplicação e uma renderização crítica de nossa aplicação web.

Além disso a folha de estilo in-line é limitada para um máximo de 50kb. Embora esse tamanho seja grande o suficiente para páginas muito sofisticadas, ele ainda exige que o autor mantenha o CSS limpo.

Carregamento eficiente de fontes

As fontes web são uma parte visual importante das nossas aplicações web, portanto, a otimização de fontes é um ponto crucial de nossa aplicação algumas web fonts são bem pesadas aumentando o tamanho total da nossa aplicação. AMP realiza optimização no carregamento de fontes e realiza o preload nossas fontes.

Animações somente utilizando a GPU

O único modo de ter uma aplicação de alta performance é realizado o uso eficiente dos recursos e utilização da GPU é um recurso importante para isso. Todas as animações com AMP são executadas pela GPU assim liberando a thread principal para processamento crítico de nossa aplicação.

Priorização do carregamento dos recursos

AMP controla o carregamento de todos recursos: com isso os recursos serão carregados quando realmente necessários utilizando técnicas como lazy-load e prefetch.

Além disso AMP possui uma lista de prioridade exemplo, imagens estão no topo da lista enquanto ads estão no final dessa lista. Outro fator importante para priorização é quais os recursos estão sendo exibidos para o usuário.

Utilização de novas API para reduzir o tempo de carregamento

A nova API preconnet API é usada intensamente para garantir as solicitações HTTP sejam feitas o mais rápido possível. Com isso a página pode ser pre carregada em background, por isso algumas vezes quando clicamos nos primeiros resultados de uma busca no Google temos o carregamento instantâneo.

Embora o pré-processamento possa ser aplicado a todo o conteúdo da web, ele também ajuda na largura de banda e o uso de CPU.

Web Components

Com AMP HTML temos a possibilidade de utilizar uma variedade de componentes web, utilizando somente elementos nativos da plataforma o framework disponibiliza uma série de componentes reutilizáveis para entregarmos uma aplicação interativa.

Esse são alguns dos items relevantes na plataforma a lista completa você pode encontrar na documentação em amp.dev. Em meu canal do youtube estarei rodando um curso sobre o framework onde você pode conferir a playlist do curso aqui: https://www.youtube.com/playlist?list=PLmIA3VZysEqQxsVcZ7u2ZHOnh78eIOKON

Também confira mais posts na página da categoria AMP.