ポリマーの宣言型、カプセル化、再利用可能なコンポーネント

Polymer は、Web Components の驚くべき未来への入り口です。カスタム要素を簡単に利用して作成できるようにする必要があります。ここ 1 年間、チームは進化する仕様に対応する一連のポリフィルの開発に懸命に取り組んでいます。それに加えて、ウェブ コンポーネントを簡単に構築できるように、便利な糖衣ライブラリを作成しました。最後に、アプリで再利用できる UI とユーティリティ要素のセットを作成します。2013 年の Chrome Dev Summit では、Polymer のさまざまな部分と、「Everything is anElement」の背後にある理念に触れました。モットーです。

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

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

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

90 年代のウェブページの構築は限界がありましたが、強力でした。利用できる要素はごくわずかでした。特に優れている点は、すべてが宣言型だったことです。ページの作成、フォーム コントロールの追加、「アプリ」の作成が非常に簡単でした記述できます

シンプルな <select> 要素を使用します。宣言するだけで、多くの機能が要素に組み込まれます。

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

**Web Components は、ウェブ開発の盛んな時代に戻るためのツールを提供します。ここでは、<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="{{isPhone}}"></…

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

<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="{{foo}}">
  • 宣言型のイベント ハンドラ: <button on-click="{{handleClick}}">
  • 公開プロパティ: xFoo.bar = 5 <-><x-foo bar="5">
  • プロパティのモニタリング: barChanged: function() {...}
  • PointerEvents / Pointer ジェスチャー（デフォルト）

このように、Polymer 要素を記述するには、宣言型であることが必要です。作成するコードは少ないほどよい

Web Components: ウェブ開発の未来

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

Web Components の背後にある標準を大げさに言わなければ、失望するでしょう。結局のところ、Polymer はこうした進化する基盤 API を基盤としています。

ウェブ開発はまさにエキサイティングな時代を迎えています。ウェブ プラットフォームに追加される他の新機能とは異なり、Web Components を構成する API は機能的ではなく、ユーザー向けもありません。これらは純粋にデベロッパーの生産性向上を目的としています。4 つの主要な API は、どれも単体で役立ちますが、連携させることで魔法のようなことが実現します。

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

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