昨年、Polymer チームは、デベロッパーが独自の要素を作成する方法を教えることに多くの時間を費やしてきました。これにより、Polymer の Core 要素と Paper 要素、Mozilla のチームが作成した Brick 要素を主な原動力として、エコシステムが急速に成長しています。
デベロッパーが独自の要素の作成に慣れ、アプリの作成を検討し始めると、次のような疑問が浮かぶはずです。
- アプリケーションの UI をどのように構造化すればよいですか。
- さまざまな状態に移行するにはどうすればよいですか？
- パフォーマンスを改善するための戦略を教えてください。
- オフライン エクスペリエンスを提供するにはどうすればよいでしょうか。
Chrome Dev Summit では、小さな連絡先アプリを作成して、その作成プロセスを分析することで、これらの質問に答えようとしました。以下が解決策です。
構造
アプリケーションを組み合わせて再利用できるモジュール式の部分に分割することは、Web Components の基本的な考え方です。Polymer の core-* 要素と paper-* 要素を使用すると、paper-toolbar や paper-icon-button などの小さな要素から簡単に始めることができます。
コンポジションの力を利用して、任意の数の要素と組み合わせて、アプリケーション スキャフォールドを作成できます。
汎用的なスキャフォールドを用意したら、独自の CSS スタイルを適用して、ブランド独自のエクスペリエンスに変えることができます。コンポーネントでこれを行うメリットは、同じアプリ作成プリミティブを活用しながら、まったく異なるエクスペリエンスを作成できることです。スキャフォールドが完成したら、コンテンツについて考えてみましょう。
大量のコンテンツを処理するのに特に適した要素が core-list です。
core-list はデータソース（基本的にはオブジェクトの配列）に接続でき、配列内のアイテムごとにテンプレート インスタンスをスタンプします。テンプレート内で、Polymer のデータ バインディング システムを活用してコンテンツをすばやく接続できます。
遷移
アプリのさまざまなセクションを設計して実装したら、次は、それらのセクションを実際に移動する方法を考えます。
core-animated-pages はまだ試験運用版の要素ですが、アプリ内のさまざまな状態を遷移するために使用できるプラグイン可能なアニメーション システムを提供します。
ただし、アニメーションはパズルの半分に過ぎません。URL を適切に管理するには、アニメーションをルータと組み合わせる必要があります。
ウェブ コンポーネントの世界では、ルーティングには命令型と宣言型の 2 種類があります。プロジェクトのニーズに応じて、core-animated-pages をどちらのアプローチとも組み合わせることができます。
命令型ルーター（Flatiron の Director など）は、一致するルートをリッスンし、選択したアイテムを更新するよう core-animated-pages に指示できます。
これは、ルートが一致した後で、次のセクションが移行される前に、なんらかの処理を行う必要がある場合に便利です。
一方、宣言型ルーター（app-router など）では、ルーティングと core-animated-pages を 1 つの要素に組み合わせることができるため、2 つの管理が効率化されます。
よりきめ細かい制御が必要な場合は、more-routing などのライブラリを検討してください。このライブラリは、データ バインディングを使用して core-animated-pages と組み合わせることができ、両方のメリットを活用できます。
パフォーマンス
アプリの形が決まってきたら、パフォーマンスのボトルネック（特にネットワーク関連のもの）に注意を払う必要があります。ネットワークはモバイル ウェブアプリで最も遅い部分であることが多いためです。
パフォーマンスを簡単に改善するには、Web Components ポリフィルを条件付きで読み込みます。
プラットフォームがすでに完全サポートされている場合は、それほど費用をかける必要はありません。新しい webcomponents.js リポジトリのすべてのリリースでは、ポリフィルもスタンドアロン ファイルに分割されています。これは、ポリフィルのサブセットを条件付きで読み込む場合に便利です。
<script>
if ('import' in document.createElement('link')) {
// HTML Imports are supported
} else {
document.write(
'<script src="bower_components/webcomponentsjs/HTMLImports.min.js"><\/script>'
);
}
</script>
また、Vulcanize などのツールを使用してすべての HTML インポートを実行すると、ネットワークの大幅な改善も見込めます。
Vulcanize は、インポートを 1 つのバンドルに連結し、アプリが実行する HTTP リクエストの数を大幅に削減します。
オフライン
ただし、パフォーマンスの高いアプリを作成しただけでは、接続がほとんどまたはまったくないユーザーのジレンマは解決しません。つまり、アプリがオフラインで動作しない場合は、それは本当の意味でのモバイルアプリではありません。現在は、悪名高いアプリケーション キャッシュを使用してリソースをオフラインにできますが、今後は Service Worker によって、オフライン開発がより快適になるはずです。
Jake Archibald は最近、素晴らしい Service Worker パターンの Cookbook を公開しましたが、ここでは、すぐに使い始められるようにクイックスタートをご紹介します。
Service Worker のインストールは簡単です。worker.js ファイルを作成し、アプリケーションの起動時に登録します。
worker.js はアプリのルートに配置することが重要です。これにより、アプリ内の任意のパスのリクエストをインターセプトできます。
ワーカーのインストール ハンドラで、大量のリソース（アプリを動かすデータを含む）をキャッシュに保存します。
これにより、オフラインでアクセスしているユーザーに対して、少なくとも代替のユーザー エクスペリエンスを提供できます。
次へ！
Web Components はウェブ プラットフォームに大きな追加機能ですが、まだ初期段階です。今後、この機能がより多くのブラウザに搭載されるにつれて、デベロッパー コミュニティがアプリの構造化に関するベスト プラクティスを模索していくことになります。上記のソリューションは出発点として役立ちますが、学ぶべきことはまだまだあります。次は、優れたアプリを構築しましょう。