A Sencha criou o Fastbook, uma aplicação HTML5 inspirada na aplicação nativa do Facebook e apresentando desempenho similar tanto no iOS quanto no Android, numa tentativa de mostrar que o "HTML5 está pronto".
Mark Zuckeberg, CEO do Facebook, disse há alguns meses que "o maior erro que cometeu" foi apostar totalmente no HTML5 em vez de aplicações nativas, porque "a tecnologia não estava pronta". A empresa decidiu criar aplicações nativas para o iOS e Android, esta última sendo lançada em dezembro de 2012. O comentário geral foi que o HTML não estaria "pronto", que não é rápido o bastante, e que existem muitas dificuldades no desenvolvimento devido à falta de ferramentas apropriadas.
No entanto, dois desenvolvedores da Sencha, uma empresa conhecida por criar ferramentas e um framework HTML5, decidiram demonstrar que o novo HTML está pronto e criaram a aplicação "Fastbook" em poucos meses, com seus desenvolvedores trabalhando no seu tempo livre. O Fastbook é uma aplicação HTML5 que imita a aplicação nativa do Facebook e acessa dados reais utilizando a API do Facebook. (A aplicação deve ser testada a partir de um dispositivo móvel.)
O vídeo curto abaixo mostra a aplicação nativa do Facebook em comparação ao Fastbook, tanto no iOS/iPhone 4s e no Android/Galaxy Nexus. Surpreendentemente, a aplicação HTML5 apresenta performance tão boa quanto a do Facebook, ao se carregar e utilizar a barra de rolagem no feed de notícias; e tem performance superior em diversos pontos:
- A aplicação HTML5 efetua cache de dados durante navegação das visões; já a aplicação nativa do Facebook recarrega todo o feed de notícias;
- O Fastbook utiliza listas de comentários aninhadas e infinitas, proporcionando melhor experiência do usuário;
- O Fastbook permite o uso do layout de paisagem;
- No Android/Galaxy Nexus o aplicativo HTML5 carrega dados mais rapidamente que a aplicação nativa.
Os criadores do Fastbook acreditam que uma aplicação HTML5 apresenta desempenho e usabilidade reduzidos quando é arquitetada utilizando uma "abordagem de desenvolvimento de websites", e que também sofre ao não utilizar "ferramentas adequadas para o desenvolvimento de aplicações."
A Sencha também afirma que a aplicação nativa do Facebook possui pelo menos duas grandes falhas. Ela é ainda uma aplicação híbrida:
O feed de notícias foi migrado para código nativo, assim como a página de perfil, mas diversas outras telas são baseadas simplesmente em requisições HTTP GET para m.facebook.com. Atualmente, portanto, a aplicação "nativa" é uma aplicação híbrida web/nativa. Há conteúdo renderizado no m.facebook.com e exibido em um controle UIWebView e componentes nativos em Object C.
E a aplicação transfere muito mais dados do que o necessário:
Cerca de 15KB a 20KB de dados compactados em JSON são transferidos, para cada dez itens - muito mais do que é necessário para se renderizar as visões atuais.
Depois de limpar os dados do Facebook no servidor proxy, o time da Sencha reduziu o tráfego em 90%.
Aperfeiçoamento no Touch
Para fazer a demonstração funcionar, a Sencha precisou melhorar seu framework Touch:
- Foi adicionado um novo componente Infinite List, para páginas com um número desconhecido de itens. Essa lista contém um pequeno número de elementos DOM, que são reutilizados para renderizar itens anteriores/próximos. Isso ajuda a reduzir o consumo de memória e reduz drasticamente o tempo de renderização para páginas extensas;
- Foi incluído também o componente Sandbox Container, que separa visões complexas e as renderiza em iframes próprios via programação, particionando assim a árvore DOM. Com isso, o feed de notícias se torna mais rápido porque as visões News Feed, TimeLine e Story podem utilizar containers separados.
- Há melhor integração com a fila de tarefas (Task Queue) existente, que, segundo a Sencha, previne a intercalação de requisições de leitura e escrita no DOM, eliminando layouts desnecessários. Isso, juntamente com a nova técnica de sandboxing, reduz o custo de layouts pesados de visões complexas, como a TimeLine e o News Feed.
- Foi adicionada a nova classe AnimationQueue, que adia algumas das tarefas em execução, para quando a CPU estiver ociosa. Isso ajuda no processo de rolagem. Quando o usuário utiliza a barra de rolagem no feed de notícias, a carga de imagens e a renderização são suspensas até que a rolagem termine; neste ponto o processo volta a ser executado.
- O Fastbook utiliza WebWorkers, que permitem ler dados em uma thread separada da interface com o usuário, proporcionando rolagem mais suave.
Se o HTML5 não estava pronto no momento da declaração do Facebook, a demonstração da Sencha indica que hoje a tecnologia pode ser tão rápida quanto aplicações nativas.
A Sencha também lançou o HTML Is Ready, uma competição para desenvolvimento de aplicativos oferecendo 20 mil dólares em dinheiro, assim como dispositivos, para desenvolvedores que criarem softwares demonstrando as reais capacidades do HTML5. As inscrições estão abertas e valem para todos os países.