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

Polymer は、Web Components の素晴らしい未来へのゲートウェイの 1 つです。カスタム要素の使用と作成を簡単に行えるようにしたいと考えています。過去 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

Web Components の背後にある標準仕様についても触れておきましょう。結局のところ、Polymer はこれらの進化する基盤 API に基づいています。

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

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

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