Polymer は、Web Components の素晴らしい未来へのゲートウェイとして、カスタム要素を簡単に利用し、作成できるようにしたいと考えています。この 1 年間、チームは進化する仕様に対応するためのポリフィルの制作に懸命に取り組んできました。さらに、ウェブ コンポーネントを簡単に構築できるように、便利な sugaring ライブラリを作成しました。アプリで再利用できる UI 要素とユーティリティ要素のセットを作成します。2013 年の Chrome Dev Summit では、Polymer のさまざまな部分と、「すべてが 1 つの要素である」という理念の背後にある理念について触れました。
スライド: http://html5-demos.appspot.com/static/cds2013/index.html
「すべてが要素である」（<select> からカスタム要素まで）
スライド: http://html5-demos.appspot.com/static/cds2013/index.html#6
1990 年代のウェブページの構築は、限界があったものの、パワフルなものでした。私たちが自由に使えるのは、ごく少数の要素だけでした。特に有用だったのは、すべてが宣言型でした。ページの作成、フォーム コントロールの追加、「アプリ」の作成は、JavaScript のコードを記述することなく非常に簡単に行うことができました。
シンプルな <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="">
これが 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=""> - 宣言型イベント ハンドラ:
<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 に基づいています。
私たちは今、ウェブ開発という非常にエキサイティングな時代を迎えています。ウェブ プラットフォームに追加される他の新機能と異なり、Web Components を構成する API は魅力的ではなく、ユーザー向けでもありません。これは純粋にデベロッパーの生産性向上です。4 つの主要な API はそれぞれ単独でも有用ですが、組み合わせると魔法のようなことが起こります。
- Shadow DOM - スタイルと DOM のカプセル化
- カスタム要素 - 新しい HTML 要素を定義します。プロパティとメソッドを備えた API を提供します。
- HTML インポートは、CSS、JS、HTML のパッケージの配信モデルです。
- テンプレート - 後でスタンプアウトする不活性なマークアップを定義するための適切な DOM テンプレート
API の基礎の詳細については、webcomponents.org をご覧ください。