Edited at

Polymer 2.0 Preview

More than 1 year has passed since last update.

2016年9月9日に、Polymer Team は Polymer 2.0 の早期開発者向けプレビューを公開したことをアナウンスしました。以下は、その時の内容を日本語訳したものです。

原文: Polymer 2.0 Preview


今日、私たちは Polymer ライブラリの次のメジャーバージョンの準備を進めているリポジトリに 2.0-preview ブランチを Push しました。

Polymer 2.0 は、いくつかのとても細かいゴールを伴った、現行のライブラリから破壊を最小限にした変更です:


ネイティブな v1 Shadow DOMv1 Custom Elements API を活かす

Polymer 2.0 リリースの主要なゴールは、Web Components のためのネイティブ、クロスブラウザサポートの活用です。

Polymer 1.x は、Google Chrome においてのみネイティブでサポートされた "v0" と呼ばれる Web Components 仕様の上に作られました。つまり、他のブラウザで Polymer を利用するためには、ポリフィルの使用が常に求められました。

この秋の始め、複数のブラウザが Shadow DOM および Custom Elements の新しい "v1" 仕様のネイティブな実装を搭載しようとしていて、より良い Web Components のパフォーマンスをもたらし、そしてポリフィルの必要性を減少させようとしています。SafariChrome は既に Shadow DOM v1 サポートを搭載していて、他のブラウザでのサポートはその途中です。

利用可能な場所ではネイティブなブラウザの実装を活用し、必要であれば webcomponentsjs にて、更新された v1 ポリフィルに依存することで、Polymer 2.0 は v1 仕様のフルサポートが特徴となります。

また、Polymer 2.0 では、Custom Elements の定義のために、 ES6 のクラスを採用します。Polymer を使ったカスタムエレメントの作成は、"vanilla" Custom Elements を使った作成に非常に似ています。


Polymer 1.x からのスムーズなマイグレーションを提供する

最低限の痛みのみで既存の Polymer コンポーネントで v1 Web Component API を活用することを可能な限り簡単にするために、私たちは可能な限りスムーズな 1.x から 2.0 への移行をしたいと考えています。

アップグレードのために、あなたの 1.x ベースのコードにいくつかの変更をする必要があります。それらの変更は、v0 から v1 への仕様変更および Polymer 自身の一握りの主な改善点の両方によって必要とされます。

しかしながら、私たちは厳密に要求される変更の数を制限し、アップグレードの手順を簡単にするように気をつけました:


  • Polymer 2.0 では、多くの新しいイディオムやベストプラクティスを導入しますが、私たちは最小の修正であなたの 1.x のコードをアップグレードすることが可能になる軽量な互換レイヤーを提供します。あなたの必要性に依存して、あなたはその互換レイヤーを活用するか、もしくは特徴を示す 2.0 スタイルにまっすぐにジャンプするかを選択できます。


  • Polymer 2.0 のリリースの前に、私たちはまた、可能な限り多くの変更(必須または推奨)を自動化するためのアップグレードツールを提供します。


  • 私たちは、Polymer 1.x および Polymer 2.x の両方で動作するであろう "hybrid" エレメントの構築やテストのためのガイドラインを策定中です。私たちが提供している全てのエレメントを使う開発者の移行作業を簡単にするために、私たちは、それらのハイブリッドバージョンを提供する予定です。サードパーティエレメント提供者もまた、当分の間はハイブリッドエレメントの提供を選択するかも知れません。


  • もしあなたが特に大きなアプリを持っていたり、すぐにアップグレードできない制約がある場合は、あなたのアプリを 1.x から 2.0 に分割されたやり方でマイグレートするために、ハイブリッドエレメントを使うことができます: Polymer 1.x に対して動作している間に、個別に、または一気に、あなたのエレメントをハイブリッドフォームに更新します; その後、あなたのエレメントの全てが更新された時は、Polymer 2.0 に移行します。



抽象性の破綻の除去

シームレスな相互運用性は、Web Components のメジャーなセールスポイントの一つです。一般的に言われることとして、Web Components は、あなたが HTML エレメントを使う場所ならどこでも "ちゃんと動作します"。それらを使うために、あなたはそれらの公開された属性やプロパティ、メソッド、そしてイベントを知ってることのみ求められます; あなたはそれらの内部的な動作について何も知る必要はありません。これは、あなたが標準的な HTML エレメント、サードパーティのエレメントや、あなた自身が定義したエレメントを簡単にミックスすることができることを意味しています。

残念なことに、Polymer 1.x において、Polymer ベースのエレメントの実装詳細が漏れていて、それらを使って非標準的な方法でユーザにインタラクトすることを求めるいくつかのケースがあります(Polymer.dom API や set/notifyPath API)。それらの "リーク" は、パフォーマンスへの関心において作られた私たちの選択による妥協の設計によるものでしたが、後で考えてみると、私たちはそのトレードオフによって幸せにはなれませんでした。

Polymer 2.0 において、過度にパフォーマンスを妥協することなくそれらの抽象性の破綻を除去するための方法を私たちは見つけました。Polymer 2.x ベースのエレメントでは、消費者の視点からは、"vanilla" Custom Elements と区別が付かないでしょう。


Polymer 互換レイヤーを使った ES6 クラスベースの書式

1.x の Polymer({}) ファクトリは、カスタムエレメントを構築するためのオールインワンの方法です。それは、あなたにエレメントのAPIを定義させ、エレメントの登録をハンドリングし、そのネイティブなカスタムエレメントのライフサイクルコールバックの糖衣構文を提供し、さらに多くのことをします。これは非常に便利にさせるのですが、それはまたプラットフォーム自身が提供するものの利用をさらにあなたにさせる抽象レベルを強制します。

あなたのエレメントを定義するためのほぼ後方互換な Polymer 関数の提供に加えて、Polymer 2.0 はカスタムエレメントを定義するために ES6 クラスベースの方法をサポートします。これは、あなたの方法を組み入れることなく、ネイティブなウェブプラットフォームの機能をまさに使うことになります。以下のように記述することで、あなたはカスタムエレメントを定義することができるようになるでしょう:

class MyElement extends Polymer.Element {

static get is() { return 'my-element'; }

static get config() {
properties: {
//the properties you know and love from Polymer
},
observers: [
//the observers you know and love from Polymer
]
}

constructor() {
super();
...
}
}

customElements.define(MyElement.is, MyElement);


より柔軟な使用法への改善されたファクトリ

私たちは、能率、多目的性、そして柔軟性を改善するために、Polymer や webcomponentsjs ポリフィルにいくつかのリファクタリングを行いました:


  • Polymer 1.x の一部だった "Shady DOM" シムは、Polymer の外に作られ、関連する CSS Custom Properties と共に webcomponentsjs ポリフィルに追加されました。Shady DOM はまた、もはや代替 API (Polymer.dom) を露出せず、代わりにあなたのカスタムエレメント上で直接ネイティブな DOM API の呼び出しをサポートします。



  • Polymer 自身は、内部的にいくつかの緩く関連づけられたライブラリにて作成されました。


    • 新しい Polymer.Element クラスは、ネイティブの HTMLElement を継承し、それらのライブラリを機能的にミックスインします。Polymer 2.0 を利用する慣用的な方法(あなたが 1.x 互換レイヤーを使用していない想定)は、標準的な ES クラス定義書式を使って、Polymer.Element をサブクラス化してあなた自身のカスタムエレメントを定義することです。

    • もしアラカルトに Polymer の機能を使うことに興味がある場合は、ライブラリのサブセットを使って、あなた自身のベースエレメントを定義することを試みることができます。




フィードバックを求めています!

改善の際に、2.0 ブランチのより詳細なドキュメントは、リポジトリに含まれる README を参照してください。私たちは、この早期開発者リリースへのフィードバックを歓迎します - リポジトリ上で直接 Issue を残してください、または @Polymer にツイートして私たちに知らせてください。

次の数ヶ月をかけて、私たちは API を繰り返し続けます。私たちはまた、Polymer チームによって構築されたエレメントを、 2.0 の最新でアップグレードしていきます。

私たちはまた、来る Polymer Summit で、Polymer 2.0 の話をする予定です。あなたの考えを聞くのを楽しみにしています!