Proxx is a JavaScript game from the Google Chrome team. It demonstrates how to develop fast and smooth web applications that offer a similar user experience across multiple platforms and input devices.
The project is especially interesting as it targets smart feature phones - a relatively cheap alternative to smart phones which is becoming very popular in places like India and Africa. According to Counterpoint research, more than 370 million units are expected to be sold between 2019 and 2021.
The hardware of smart feature phones is very basic in comparison to smart phones. They do not support touch control, come with a small display (mostly QVGA with 240x320 pixels), and use a relatively weak CPU.
All these constraints present a new challenge for web developers who are not used to working with such limited resources.
To tackle the performance limitations of smart feature phones, the Proxx project used web workers which makes it possible to run JavaScript code in a background thread.
Moving the game logic to a separate thread ensures that only UI-related calculations are done in the main thread. This is necessary to ensure smooth rendering- especially on weaker devices.
The Proxx team used Canvas and WebGL to render the game. Two separate layers were used- one for the background animation and another to display the table. This enabled them to use a smaller canvas for the background animation and reduce the memory usage.
The interaction with the game was handled by a hidden DOM grid which was placed on top of the canvas layers. This simplified event handling enabled the Proxx team to support screen readers with relative ease.
To manage the DOM rendering and interaction, the Proxx team chose to use Preact- a leaner alternative to React which supports the same rendering API, but only 3 KB in size.
The Proxx team further improved loading time by pre-rendering the first screen on the server using Puppeteer.
Finally the Proxx team leveraged Rollup- a JavaScript module bundler which offers a few optimizations over the more popular Webpack library. Specifically, Rollup allowed the Proxx tean to share dependencies between the main / web worker thread and avoid loading duplicated code.
The Proxx team plans to release additional details on the development process later this year.
For now, developers can read more about the Proxx project and view the Proxx Google I/O talk:
The source code for Proxx is available under the Apache 2 open source license and is available via the Proxx GitHub repository.