Chrome Dev Summit - Polymer の宣言型、カプセル化、再利用可能なコンポーネント

Polymer は、ウェブ コンポーネントの素晴らしい未来への入り口です。Google は、カスタム要素を簡単に利用、構築できるようにしたいと考えています。この 1 年間、チームは進化する仕様に対応するポリフィルのセットの開発に取り組んできました。さらに、ウェブ コンポーネントの構築を容易にする便利なシュガーリング ライブラリを作成しました。最後に、アプリで再利用できる一連の UI 要素とユーティリティ要素を作成しています。2013 年の Chrome Dev Summit で、私は Polymer のさまざまな部分と、「すべてが要素である」というモットーの背後にある哲学について詳しく説明しました。

スライド: http://html5-demos.appspot.com/static/cds2013/index.html

「すべてが要素」（<select> からカスタム要素まで）

スライド: http://html5-demos.appspot.com/static/cds2013/index.html#6

1990 年代のウェブページ構築は、制限はあったものの、強力なものでした。使用できる要素はごくわずかでした。強力な部分とは、すべてが宣言型であることです。ページを作成し、フォーム コントロールを追加して、大量の JavaScript を記述することなく「アプリ」を作成するのは、驚くほど簡単でした。

シンプルな <select> 要素を例に考えてみましょう。この要素を宣言するだけで、多くの機能が組み込まれます。

  • HTML 属性でカスタマイズ可能
  • デフォルトの UI で子（<option> など）をレンダリングしますが、属性を使用して構成できます。
  • <form> などの他のコンテキストで役立ちます。
  • DOM API（プロパティとメソッド）がある
  • 関心事が発生したときにイベントを発生させる

ウェブ コンポーネントは、ウェブ開発の全盛期に戻るためのツールを提供します。<select> を彷彿とさせる新しい要素を作成できるものの、2014 年のユースケース向けに設計されたものです。たとえば、AJAX が今日発明されたとしたら、おそらく HTML タグ（例）になるでしょう。

<polymer-ajax url="http://gdata.youtube.com/feeds/api/videos/"
                params='{"alt":"json"}'></polymer-ajax>

または、queryMatches 属性にデータバインドするレスポンシブ要素:

<polymer-media-query query="max-width:640px" queryMatches="">

これはまさに Polymer で採用しているアプローチです。モノリシックな JavaScript ベースのウェブアプリを構築する代わりに、再利用可能な要素を作成しましょう。時間の経過とともに、小さな要素を組み合わせることでアプリ全体が成長していきます。アプリ全体を要素にすることもできます。

<my-app></my-app>

Polymer の特別なソースを使用したウェブ コンポーネントの構築

スライド: http://html5-demos.appspot.com/static/cds2013/index.html#37

Polymer には、ウェブ コンポーネント ベースのアプリケーションを構築するための便利な機能が多数用意されています。

  • 宣言型要素の登録: <polymer-element>
  • 宣言型継承: <polymer-element extends="...">
  • 宣言型の双方向データ バインディング: <input id="input" value="">
  • 宣言型イベント ハンドラ: <button on-click=""
  • 公開されたプロパティ: xFoo.bar = 5 <-> <x-foo bar="5">
  • プロパティの監視: barChanged: function() {...}
  • デフォルトで PointerEvents / PointerGestures

この話の教訓は、Polymer 要素の作成はすべて宣言型であるということです。記述するコードが少ないほど、効率が上がります。

ウェブ コンポーネント: ウェブ開発の未来

スライド: http://html5-demos.appspot.com/static/cds2013/index.html#26

ウェブ コンポーネントの背後にある標準について言及しないわけにはいきません。Polymer は、進化を続けるこれらの基盤 API に基づいています。

ウェブ開発は、非常にエキサイティングな時代の幕開けを迎えています。ウェブ プラットフォームに追加される他の新機能とは異なり、ウェブ コンポーネントを構成する API は、華やかでもユーザー向けでもありません。これらは純粋にデベロッパーの生産性を目的としています。4 つの主要な API はそれぞれ単独でも便利ですが、組み合わせることで、魔法のようなことが起こります。

  1. Shadow DOM - スタイルと DOM のカプセル化
  2. カスタム要素 - 新しい HTML 要素を定義します。プロパティとメソッドを含む API を提供します。
  3. HTML Imports は、CSS、JS、HTML のパッケージの配布モデルです。
  4. テンプレート - 後でスタンプアウトするマークアップの不活性チャンクを定義するための適切な DOM テンプレート

API の基礎について詳しくは、webcomponents.org をご覧ください。