O Proxx é um jogo em JavaScript criado pela equipe do Google Chrome. O Proxx demonstra como desenvolver aplicações web rápidas e suaves e que oferecem uma experiência ao usuário semelhante em várias plataformas e dispositivos de entrada.
- O projeto é interessante e tem como alvo os smartphones de baixo custo, que estão se tornando muito popular em lugares como a Índia e a África. Segundo a pesquisa da Counterpoint, espera-se que mais de 370 milhões de unidades sejam vendidas entre 2019 e 2021.
O hardware desses smartphones é básico em comparação com os smartphones top de linha. Não suportam controle de toque, possuem um pequeno display (principalmente QVGA com 240x320 pixels) e usam uma CPU relativamente fraca.
Todas essas restrições representam um novo desafio para os desenvolvedores web que não estão acostumados a trabalhar com recursos tão limitados.
- Para lidar com as limitações de desempenho destes smartphones, o projeto Proxx usa web workers, o que torna possível executar o código JavaScript em uma thread de segundo plano.
Mover a lógica do jogo para uma thread separada garante que apenas cálculos relacionados à interface do usuário sejam feitos na thread principal. Isso é importante para garantir uma renderização suave, especialmente em dispositivos com tantas limitações.
- A equipe do Proxx usou Canvas e WebGL para renderizar o jogo. Foram usadas duas camadas separadas, uma para a animação de fundo e outra para exibir a tabela. Isso permitiu que usassem uma tela menor para a animação em segundo plano e reduzissem o uso da memória.
A interação com o jogo foi tratada por uma grade DOM oculta que foi colocada no topo das camadas da tela. Esse tratamento simplificado de eventos permitiu que a equipe do Proxx suportasse leitores de tela com relativa facilidade.
Para gerenciar a renderização e a interação do DOM, a equipe do Proxx optou por usar o Preact - uma alternativa mais enxuta ao React, que suporta a mesma API de renderização, mas com apenas 3 KB de tamanho.
O time do Proxx melhorou ainda mais o tempo de carregamento pré-renderizando a primeira tela no servidor usando o Puppeteer.
Finalmente, a equipe aproveitou o Rollup - um módulo empacotador de JavaScript que oferece algumas otimizações em relação ao popular Webpack. Este módulo permitiu que o Proxx compartilhasse dependências entre a thread principal e o web worker e evitasse o carregamento de código duplicado.
A equipe do Proxx planeja divulgar mais detalhes sobre o processo de desenvolvimento ainda este ano.
- Por enquanto, os desenvolvedores podem ler mais sobre o projeto Proxx e ainda visualizar a conversa do Proxx Google I/O:
O código fonte do Proxx está disponível sob a licença de código aberto Apache 2 e está disponível no repositório Proxx no GitHub.