BT

最新技術を追い求めるデベロッパのための情報コミュニティ

寄稿

Topics

地域を選ぶ

InfoQ ホームページ ニュース Proxx: 高速なWebアプリケーションを作る

Proxx: 高速なWebアプリケーションを作る

ブックマーク

原文(投稿日:2019/06/12)へのリンク

Proxxは、Google ChromeチームによるJavaScriptゲームである。多様なプラットフォームとインプットデバイスにわたって、同様のユーザエクスペリエンスを提供する、高速で円滑なWebアプリケーションを開発する方法を示している。

Proxx App

プロジェクトはスマート・フィーチャーフォンをターゲットにしているところが特に興味深い - スマートフォンのオルタナティブとして比較的安価で、インドやアフリカといった地域で高い支持を得始めているものだ。Counterpoint researchの調査によれば、2019年から2021年で3億7000万個が販売される見込みとのことだ。

スマート・フィーチャーフォンのハードウェアは、スマートフォンと比較して非常に簡易である。タッチコントロールはサポートしておらず、小さなディスプレイ(大抵、240×320ピクセルのQVGA)、比較的弱いCPUを用いている。

これら全ての制約は、このような制限されたリソースを扱うことに慣れていないWeb開発者に新たな課題を提起する。

スマート・フィーチャーフォンのパフォーマンスの制限に取り組むため、ProxxはJavaScriptコードをバックグラウンドスレッドで稼働することを可能にするweb workersを利用した。

ゲームロジックを別個のスレッドに移すことで、UIに関する計算だけがメインスレッドで完了するようになる。これは、円滑なレンダリングを保証するためには必要なことである - 特に弱いデバイスにおいては。

ProxxチームはCanvasとWebGLを用いてゲームを描写している。2つの異なるレイヤが利用されている - 1つはバックグラウンドアニメーション用、もう1つはテーブルの表示用である。これにより、バックグラウンドアニメーション用に、より小さいキャンバスを利用できるようになり、メモリ消費を抑えることができる。

ゲームとのインタラクションは、キャンバスレイヤのトップに配置されたhiddenのDOMグリッドにより操作される。この簡略化されたイベントハンドリングにより、Proxxチームはスクリーンリーダを比較的容易にサポートできる。

DOMレンダリングとインタラクションを管理するため、ProxxチームはPreactを利用することにした - Reactに代わる、よりリーンで、3KBだけのサイズではあるが、同じレンダリングAPIをサポートするものだ。

Proxxチームは、Puppeteerを利用して初めのスクリーンをサーバ上にプレレンダリングすることで、ローディングタイムをさらに改善した。

最終的に、ProxxチームはRollupを活用した - より人気のあるWebpackライブラリに対していくつかの最適化を提供する、JavaScriptモジュールバンドラである。具体的には、ProxxチームはRollupで、メイン/Webワーカ スレッド間で依存関係を共有できるようになり、重複したコードのロードを回避できるようになった。

Proxxチームは年内に、開発プロセスに関するさらなる詳細の発表を計画している。

今のところ、開発者はProxxプロジェクトについてさらに読むことができ、ProxxのGoogle I/Oでの講演を閲覧することができる。

ProxxのソースコードはApache2オープンソースライセンス下で、Proxx GitHubリポジトリから利用可能である。

この記事に星をつける

おすすめ度
スタイル

BT