Chrome Dev Summit 2014

Captura de tela do site da Conferência de Desenvolvedores Chrome 2014

Construído internamente pelo nosso próprio Paul Lewis, o site da CDS mostrou como criar uma ótima experiência na Web para dispositivos móveis para os visitantes da conferência.

Cenas dos bastidores

Notável é a suavidade com que o site é executado em vários navegadores para celular. Ele está utilizando os ciclos de layout e pintura do navegador da melhor maneira possível.

Novos recursos da plataforma da Web usados

  • Service worker
  • Manifesto
  • Cor do tema

Padrões

  • Cartões pendentes
  • Grade responsiva
  • Material Design

Código-fonte

A entrevista

Desenvolvimento

Quando Paul decidiu criar o site, uma prioridade foi adotar o Aprimoramento progressivo. Em vez de projetar para o computador, ele criou o app primeiro para telas pequenas e depois passou para telas maiores, fazendo melhorias progressivas, em vez de degradando suavemente. Isso exigiu muitas consultas de mídia, mas também um pouco de liberdade para analisar pequenas mudanças entre os principais pontos de interrupção. O rastreamento entre os tamanhos de tela deu a ele uma noção de onde o conteúdo falharia, para que ele pudesse corrigir isso rapidamente.

Outro aspecto importante do EP é oferecer a compatibilidade mais recente possível. Paul escolheu usar flutuantes em vez de Flexbox porque sentiu que isso aumentaria o número de navegadores em que o site funcionaria. Para o layout específico do site, isso acabou não sendo problema. Se ele precisasse do Flexbox, teria usado o EP como complemento.

FLIP está aproveitando a percepção do usuário priorizando a animação.
O FLIP está aproveitando a percepção do usuário priorizando a animação.

Um grande desafio do site era o recurso de expandir e recolher o card, o que exigiu uma maneira totalmente nova de fazer as animações funcionar. Paul criou uma estratégia que chama de FLIP, que envolve definir elementos de animação para o estado final. A partir daí, você aplica propriedades compatíveis com o compositor, como transformações e opacidade, para inverter as mudanças e retornar o elemento para a posição inicial. Por fim, depois disso, ative as transições em transformações e opacidade e remova essas alterações. Isso faz com que os elementos se movam para as posições finais mais uma vez. Paul admite que é um pouco inesperado, mas funciona muito bem e aumenta o desempenho.

Performance

Sabendo que Paul Lewis é o guru do desempenho, não fiquei surpreso ao descobrir que o desempenho de poder era uma consideração muito importante na criação do site. Ele contou muito com o WebPageTest para diminuir o valor do Índice de velocidade o máximo possível. Sem a incorporação do YouTube, Paul conseguiu chegar a menos de 1.000 em uma conexão por cabo, o que significava que a maioria dos usuários receberia uma renderização inicial em menos de um segundo.

A maior parte do trabalho para conseguir isso foi feita nas tarefas do Grunt para concatenar, minificar e compactar imagens o máximo possível. O site também adia imagens não essenciais após o carregamento da página para que o conteúdo real seja renderizado para a tela mais rapidamente.

Para melhorar ainda mais o tempo de carregamento da página, Paul usou um service worker. Com ele, esteja você on-line ou não, uma visita à página pode ser realizada do cache, garantindo que você acesse o conteúdo mesmo em caso de conectividade instável (extremamente importante em uma conferência Wi-Fi!). O site do CDS é um dos primeiros sites de produção a usar o novo recurso, que fez Paulo se deparar com vários "problemas dos primeiros usuários", mas o grande aumento de desempenho, disse ele, compôs isso. Na verdade, agora ele está levando a terra para cada local que constrói!

Obviamente, a performance não é apenas a qualidade de carregamento do site, mas também a execução. Paul sabia que as animações seriam um desafio, e é por isso que surgiu com o FLIP. Além disso, ele fez um esforço para garantir que nada interferisse na entrada de toque ou na rolagem. O local não é muito complexo, mas ele adotou uma metodologia RAIL modificada para a criação (não precisou de muito tempo de inatividade), e isso ajudou bastante.

Design

Como o site foi forjado por uma única pessoa, isso significava que Paul era o designer e o desenvolvedor do projeto, resultando em níveis sem precedentes de compreensão sobre as preocupações um do outro nas duas "equipes". Ele gosta de projetar o computador para baixo (o oposto do aprimoramento progressivo, que ele usou durante o desenvolvimento), porque isso dá a ele uma noção do que precisa entrar no projeto. Em seguida, Paul acessa a visualização para dispositivos móveis, o que permite refinar as coisas significativamente e garantir que as coisas mais importantes estejam recebendo mais atenção. Isso informa a versão para computador, porque a arquitetura da informação e a prioridade precisam ser atualizadas.

Problema de design

Nem tudo correu bem. Na época, as diretrizes do Material Design não estavam claras sobre como criar um site de conteúdo, então havia áreas em que ele ficava aquém. O design também não considerava as informações de cronograma e sessão relacionadas e, no fim, a UX significava que as pessoas iriam para o cronograma e ficariam frustradas por não conseguirem acessar diretamente as informações da sessão.

Dito isso, acho que Paul fez um ótimo trabalho ao transportar as especificações do Material Design para um site de conteúdo, e estou muito satisfeito com os recursos visuais e o movimento. Ela tem uma sensação exclusiva do Material Design, e as informações e a aparência incentivam a interação e a hierarquia.

Concluído

  • Lançamento de todo o site no GitHub (mais de 200 estrelas) para servir de boilerplate e inspiração para desenvolvedores da Web.
  • Incorporação do que há de melhor e mais recente da plataforma da Web: service worker, manifesto da Web e cores de tema dinâmico. O efeito líquido é algo que parece realmente integrado à plataforma quando executado em dispositivos Android. Se adicionado à tela inicial do usuário, será muito parecido com um app que ele usaria, e isso é muito legal.
  • ~73.7k visualizações de página e ~73.7k cliques nas subseções do site, as pessoas usaram e interagiram com o site, muito mais do que o esperado.

Resumindo, uma ótima inspiração para os desenvolvedores da Web de hoje e um site de conferência muito bem-sucedido.