![Captura de tela do layout](https://web.dev/static/case-studies/hummingbirdlibrary/image/layout-screenshot-96b67e8e5968e.png?hl=pt-br)
Resumo
Biblioteca Hummingbird: um front-end incrivelmente novo para o Hummingbird, um site famoso de descoberta e relógio de animes.
Do que gostamos?
Fãs de anime (como eu, a contagem de visualizações na captura de tela é real) são obcecados por monitorar o que assistem. Os sites mais conhecidos nesse espaço incluem o AniDB e o MyAnimeList, mas o Hummingbird é, de longe, os mais bonitos.
Ainda assim, a biblioteca Hummingbird, localizada no topo da API Hummingbird atual, vai um pouco além, criada do zero com Angular e Material Design. A cor do tema e o manifesto fazem com que o app pareça super integrado e instalável na tela inicial. Além disso, a experiência inteira parece muito rápida, concentrando-se na funcionalidade principal do site principal.
Possíveis melhorias
Desempenho: o app se beneficiaria muito do uso de um service worker para armazenar em cache os resultados e a interface off-line após o carregamento inicial da página. A ativação da compactação gzip melhoraria muito o tempo de carregamento, e ter um layout básico estático no HTML melhoraria a percepção do desempenho.
UX: o modelo de flex box usado para mostrar a lista de programas funciona bem com telas maiores, mas perde o apelo em telas menores. Uma versão mais fechada e não centralizada dos blocos funcionaria muito melhor em dispositivos móveis.
Perguntas e respostas com Leif Thomas
Por que a Web?
O desenvolvimento para a Web permite que você alcance praticamente todas as plataformas com uma única base de código, o que é uma grande vantagem quando você é o único desenvolvedor. Graças a ótimos recursos como o Adicionar à tela inicial, é fácil oferecer aos usuários uma experiência quase idêntica à que eles teriam em um aplicativo nativo.
O que funcionou muito bem durante o desenvolvimento?
O projeto Angular/Material (link em inglês) no GitHub funcionou perfeitamente. Ele me deu tudo o que precisava para iniciar um projeto com AngularJS e Material Design.
Se você pudesse ter uma API para melhorar seu app, o que seria?
Quanto ao navegador, acho que uma API para realizar pesquisas por voz no meu app da Web poderia ser muito útil. Recentemente, o Android adicionou muitos comandos de voz, e a capacidade de usar esse tipo de entrada na Web para dispositivos móveis tornaria uma ótima experiência.
A boa notícia é que já temos isso :) Confira a API Web Speech.
Por fim, como você comercializou seu app?
Usei o Facebook, o Google+ e o Twitter para direcionar o tráfego para www.hummingbirdlibrary.com, mas meu maior pico de tráfego aconteceu depois de postar um link para ele no reddit. É uma ótima maneira de segmentar um público que pode ter um interesse genuíno no que você está desenvolvendo.