Google I/O で v1.0 が発表された Polymer の Elements Catalog が面白い

Polymer Elements のカタログページ

Polymer は、これからの Web 標準の一角を占めるであろう Web Components のラッパーライブラリです。その Polymer で作られたコンポーネントのカタログサイトが公開されていました。

これまでも Core Elements や Paper Elements が Polymer のコンポーネントとして提供されていましたが、分類も新たにレパートリーが拡充されています。



Cart に入れて Download

カタログには各コンポーネントのドキュメントやデモが載っていて、使いたいものをチェックして Cart に入れていきます。必要なコンポーネントを Cart に入れてダウンロードさせるという見せ方に感心しました。



Cart を開くと「Download」タブがあるので、そこから zip ファイル、bower.json、Bower コマンドのいずれかを取得します。CLI 中心のワークフローに慣れた開発者なら Bower コマンドで良さそうです。

本当はカートに入れなくても cdnjs みたいに bower コマンドだけすぐコピペできたほうが嬉しいような

Elements - コンポーネント

このカタログに陳列されているコンポーネントは現状、次のような大分類になっています。Polymer で Web 開発をするときはこれらのコンポーネントや自作のコンポーネントを組み合わせて、積み木のように作っていくことになるでしょう。

Fe: Iron Elements

Iron Elements は Polymer エコシステムの中核になる基礎的なコンポーネント集です。基本的な振る舞いが定義されている反面、ビジュアルや高度な機能は提供していないコンポーネントがほとんどです。

コンポーネントを自作するときに機能の依存先として Iron Elements を利用してもよいですし、他の分類のコンポーネントの多くも Iron Elements に依存しています。

Md: Paper Elements

Paper ElementsMaterial Design に基づいたビジュアルやアニメーションを提供するコンポーネント集です。

Material Design のアニメーションや ripple(波紋が広がるようなエフェクト)が適用された UI コンポーネントが主です。これらのコンポーネントを組み合わせて UI を構築すれば、Material Design に準じた Web アプリを作りやすいはずです。

Au: Gold Elements

Gold Elements はEコマース向けのコンポーネント集です。とは言っても今の所は、注文者情報の入力に使われるフォームパーツのコンポーネントのみ提供されています。

特に高度なことをしているわけではなく、入力パターンでバリデーションしている程度の内容です。デモでは Paper Elements のコンポーネントと組み合わされていますが、実際の依存関係はありません。

Ne: Neon Elements

Neon Elements は Web Animation を提供するコンポーネントです。今のところ neon-animation だけが提供されています。主には Polymer.NeonAnimatableBehavior を自分のコンポーネントの behavior (横断的な振る舞いの注入)に設定して利用します。

Polymer({
  is: 'my-animatable',
  behaviors: [
    Polymer.NeonAnimationRunnerBehavior
  ],
  properties: {
    animationConfig: {
      value: function() {
        return {
          name: 'scale-down-animation',
          node: this
        }
      }
    }
  },
  // 略
});

PolymerElements/neon-animation のサンプルから抜粋しました。animationConfig に設定する感じです。前画面の要素がアニメーションして、次画面につながる表現を実装するために Polymer.NeonSharedElementAnimationBehavior も用意されています。

まんま Android > 5.0 でお馴染みの Shared Elements Transition ですね

More: Molecules

Molecules はサードパーティのライブラリのラッパーコンポーネントです。今の所 chjj/marked のラッパーが提供されています。

サードパーティとなると、外から Pull Request を投げたい気もしますが、README.md を見る限り、外部からのコンポーネント提供フローは明記されてない風です。

Polymer の本格展開が始まるかも?

Polymer 1.0 で「Ready For Production」を宣言し、Polymer Summit まで開催する予定がある力の入れようです。Polymer Starter Kit も beta 公開されました。

私見ですが、Polymer は同じ Google でも AngularJS とは異なり、Google 社内の Web 系エヴァンジェリスト勢が参加しているイメージです。そのためかコンポーネントの種類や Starter Kit の構成を見てもオフライン対応やアクセシビリティなどへの意識が高いので期待できます。

本当に Polymer のエコシステムが受け入れられるのか、そもそも Web Components 自体がどうなるのか予測できませんが、Polymer にとっても Web Components にとっても、いよいよ重要な時期に入ったのではないでしょうか。

周辺事情はどうなっていくか

Web Components の仕様に関する議論を見るに、これから大きい変更が行われる可能性はまだ十分にありえそうです。本当に Polyfill(主に shady DOM)への依存によって Ready For Production と言って良いのか疑問はありますし、依存ライブラリの断片化とエコシステムのコロニー化 で示したような懸念もあります。

昨今、勢いがある React は今存在する仕様・技術でコンポーネント化の仕組みをはじめとして、サーバーサイドレンダリングや、実行環境間ポータビリティなどを成し遂げた過渡期の技術であり、コンポーネント志向でありつつも技術的には Web Components とは距離があります。

界隈がどう流れるか分からないところもありますが、果たして、JavaScript Library Oriented な npm + React と、Web Standards Oriented な bower + Polymer の世界が交わる日がくるのかも興味深いところです。

JavaScript 業界と Web 業界の違いみたいなものでしょうかね