BT

Início Notícias Proxx: construindo aplicações web rápidas

Proxx: construindo aplicações web rápidas

Favoritos

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.

Proxx App

  • 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.

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.

Avalie esse artigo

Relevância
Estilo/Redação

Olá visitante

Você precisa cadastrar-se no InfoQ Brasil ou para enviar comentários. Há muitas vantagens em se cadastrar.

Obtenha o máximo da experiência do InfoQ Brasil.

HTML é permitido: a,b,br,blockquote,i,li,pre,u,ul,p

Comentários da comunidade

HTML é permitido: a,b,br,blockquote,i,li,pre,u,ul,p

HTML é permitido: a,b,br,blockquote,i,li,pre,u,ul,p

BT

Seu cadastro no InfoQ está atualizado? Poderia rever suas informações?

Nota: se você alterar seu email, receberá uma mensagem de confirmação

Nome da empresa:
Cargo/papel na empresa:
Tamanho da empresa:
País:
Estado:
Você vai receber um email para validação do novo endereço. Esta janela pop-up fechará em instantes.