Polymer 0.5 → 1.0 変更点ナナメ読みメモ

変更点のナナメ読み

Polymer 1.0 が Google I/O 2015 のキーノート（？）で公開されたようなので、ドキュメントから変更点について気になるところだけ拾い読みしました。

ハイライト

Introducing Polymer 1.0 - Polymer の Highlight より。

• 0.5 と比べて Web Components をネイティブサポートする Chrome で起動速度と実行時性能が劇的に高速化（したしい）
• 0.5 と比べて ペイロードサイズ（ファイルサイズ）を減らした
• 実装の全体的なリファクタリング（たぶんゼロベース）
• 新しく シンプル化＆高速化されたデータバインディングを実装
• 新しく shady DOM という Shadow DOM の Polyfill を実装
• ネイティブの Shadow DOM なしで要素のスタイルを保護する境界を作った

前々からアピールしていたようなポイントのおさらいですね。

0.5 -> 0.8

Migration guide - Polymer の斜め読み。些細な話は省略しています。

• Web Components の Polyfill が webcomponents-lite.min.js に変更（軽量版）
• 全部入りの <polymer-element /> から <dom-module><template /></dom-module> と <script /> になった
• ShadowDOM 使うときは window.Polymer.dom = 'shadow' が必要
• <template> の子要素だった <style> が兄弟要素の位置になった
• イベントハンドラの宣言が <a on-click="{{handler}}"> から <a on-click="handler"> になった
• properties で、publish で computed と observe 相当を宣言できる
• ES5 のアクセサは Polymer 内部で使うからユーザーランドでは使えない
• 要素の attribute と JS 的な property のマッピングルールに変更あり
• attribute にJSONを書くとき 正しく " でないとデシリアライズされなくなった
• 明示的に publish されていないプロパティも data-binding 可能になった（オブジェクトから生えてればOK）
• propertyName + 'Changed' な書式のハンドラは無くなったので properties の observer に書くこと
• デフォルトの属性値は hostAttributes として指定するようになった
• layout attributes は iron-flex-layout に分離して @apply でスタイル内利用する
• ↑ @apply ってなんやねーん！ → Custom CSS mixins
• polymer-ready から WebComponentsReady に変更
• Gestures Event は残留したらしいよかったね
• Polymer Element を含む DOM（？）操作は Polymer.dom ( doc ) を使う
• data-binding から expression や filter のサポートがなくなった
• data-binding で文字列内に変数を直接差し込めなくなり <p>A<span>{{B}}</span>C</a> するようになった

• No expression or filter support. Binding is to properties or paths only. (The negation operator, !, is supported for convenience.)
• A binding must replace the entire text content of a node, or the entire value of an attribute. So string concatenation is not supported.

データバインディング周りの変更に対して非常に好感をもちました。だよね！そうだよね！！的な。いや、本当に素晴らしいと思います。

0.8 -> 1.0

Release notes - Polymer の Release 0.9 と Release 1.0 の斜め読み。てか 0.9 と 1.0 はそれほどクリティカルな変更がなさそうです。いくつかの API の I/F や名称が変わってることを気をつければ良さそう。

• constructor → factoryImpl
• mixins → behaviors
• x-repeat → dom-repeat
• x-bind → dom-bind
• x-array-selector → array-selector
• x-if → dom-if

おしまい

丁寧に見ていくとキリがないので、今回は変更点のナナメ読みだけで終わります。たぶん続く。

---