Google I/O 2014 - Polymer and the Web Components revolution
Topeka というサンプルアプリを作った。
Polymer と Material Design をテストするため。
http://polymer-project.org/apps/topeka
トリビアアプリ
Leaderboardがある
PCのChromeブラウザ上でのデモ。画面サイズを変えても動く。
Nexus5のChrome Betaでも動く。
"Polymer is a library that makes building applications easier"
"Polymer is different than what has come before"
"Polymer was built differently"
Polymer チームは Chrome チームの一部。2年前の今日（I/Oの日）プロジェクトを始めた。
Polymer は Web Components で作られている。
Web Components はすべてを変える。
Custom elements を作ることができる。Shadow DOM を使っている。
HTML の再利用ができる。
Chrome 36 からネイティブ対応。（I/Oのときは）beta channel。2、3週間で stable に入る。
Chrome だけ？そんなことない。 polyfills のおかげで思っているよりも多くのブラウザで動く。
Polymer は boilerplate を減らす。
Polymer は宣言的なシンタックス。
どうやって Poymer を使うのか？
1. エレメントを使う
2. エレメントを作る
エレメントを使う
1. 使いたいエレメントを見つける
2. Import する
<link rel="import" href="my-button.html">
3. 使う
<my-button label="Press Me!"></my-button>
Polymer のエレメントはただのHTML
エレメントを作る
1. 新しいタグとプロトタイプを登録
2. ビューを定義
3. イベントを処理
4. データとビューを紐づける
5. 属性の変更に対応する
Polymer Core Elements
ベーシックなエレメント。あまりスタイリングされていない。
<core-icon>
<core-ajax>
<core-localstorage>
<core-style>
<core-tooltip>
ajax や localstorage のタグもある
Polyme Paper Elements
Material Design っぽいエレメント
Button, Input, Tab, Card, Panel など...
mozilla は
というのを出しているが、Polymer と対立するものではない。
デザイナーツールを用意した。
Polymer Designer
最適化
Polymer Vulcanizer
すべての import をまとめて CSS, JS, HTML にする
テストには Karma, Chai, Mocha を使っている。
QA
Q : Window を縮めたとき、エレメントがリサイズされませんでした。これは、いつ Window のリサイズに応じるかという Polymer paper のビジョンのよるものですか？ media queries を行き来するよりも、エレメントはその場に残りますか？
（あんまり質問の意味がわからない）
A : 見ているスクリーンによると思います。つまり、どのようにセットアップされているかによると思います。ほとんどのウィジェットはコンテナーの幅に依存します。
Q : Polymer はとても cool ですが、まだまだプロトタイプですよね。Angular とかのライブラリを使う必要がある場合、Polymer paper とかを取り入れることはできますか？ それとも Polymer で最初からやり直さないといけない？
A : custom elements はただの HTML エレメントです。どのように HTML を扱うか知っていれば、Polymer elements も使うことができます。element の外側と内側の世界があります。外側の世界では Polymer は他の HTML エレメントと同じようなものです。プロパティ、メソッド、属性があります。内側の世界では Polymer が提供する利点があります。Polymer の内側をフレームワークで作ろうとした場合にトラブルが起きることがあるかもしれません。なぜなら、それらは Shadow DOM などの扱い方を知らないからです。
Q : Polymer components と x-tagas components 両方含むような component directory はありますか？
A : customelements.io のような Polymer かどうかによらないレジストリがあります。Polymer かどうかによらず、書く web component を使うことができます。
Q : Safari と他のブラウザのサポートはどうですか？
A : native support のことですよね？ Mozilla はかなり進んでいます。custom elements はリリースされています。Shadow DOM はまだです。でも活発に進んでいます。Safari は正直わかりません。彼らは計画を公開していないので。Salesforce.com のような polyfill を使っている人たちによると、mobile Safari では、かなり許容できるパフォーマンスがあるようです。
Q : IE については？
A : IE は最近少しだけ計画について公開するようになってきました。web components について興味があるようです。計画について誰にも言わないので、正直わかりませんが。ときどき私たちのMLにでできます。WinJS と Polymer を合わせた実験を内部では完了しているようです。Polymer と web components に興味がありそうですが、様子を見る必要があります。
Q : Chromeでの実行パフォーマンスは素晴らしかったです。どのくらいが Polymer の影響で、どのくらいが Chrome のパフォーマンス改善によるものですか？
A : 実際、それらは混在しています。我々は Chrome チームの一部ですし。両方のコンビネーションです。
Q : long-term のパフォーマンスについて。DOM elements + DOM 操作と、DOM を最小化しようとする React（これでよい？）のようなフレームワークとを比較するとどうですか？
A : それは別の世界ですよね？ polyfills を使った現状から考えると、Polymer は基本的に他の JavaScript フレームワークと同じくらいよいです。Chrome ならなおよいです。native support がありますから。
その他のこととして、数年前 Polymer チームは webOS の Enyo（これでよい？）と呼ばれるフレームワークに関わっていました。哲学的に React、Polymer、Enyo は component のマインドセットが似ています。ただ、アイディアとして、DOM にタッチしません。DOM は遅い、DOM にさわりたくないでしょう。そこで、大きい HTML を吐いていました。それが速かったですから。Chrome チームに移ったとき、Chrome の人たちはそれはよくないと言いました。そこから時間をかけていろいろ変えていきました。DOM APIs はすごく速くなりました。なので、その領域は改善の余地があるということです。Chrome がそうできたように。
Google I/O 2014 - Polymer and Web Components change everything you know about Web development
（現状、字幕のタイミングがスピーチとずれています。。。）
1. State of the union
2. Problems solved by web components
3. "Thinking in components"
2010年に Web Components の旅は始まった。
2014年のサポート状況
platform.js を使ったときの polyfills のサポート状況
みんな IE のこと質問するよね。希望はあるよ！
・Chrome OS の Keyboard は Polymer を使ってる。
・Chrome OS の Media Player は Polymer を使ってる。
Web Components はどんな問題を解決するのか。
・Gmail は div soup
・tab strip を作ろうとしたら、標準的な構成やパターンもないし、APIはいろんなフレームワークで違うし。。。
Custom elements を使うと、宣言的で読みやすいHTMLになる。
タグの継承もできる
HTML Template と比較してどうか
Polymer 内でデータをバインディングしたりできる
Polymer はデフォルトで Shadow DOM を使う
Polymer のエレメントは HTML imports で使う
Polymer の Core elements
Material Design elements
<google-map> タグを用意したよ！便利！
他のタグもチェック！
googlewebcomponents.github.io
Google I/O 2014 - Unlock the next era of UI development with Polymer
HTML は document-centric model なので、アプリっぽいものを作るのは苦手。
Polymer はアプリの作成に適している。
core-elements : ベースになるブロックにようなもの。あまりスタイル化されていない。
Visual
・<core-toolbar>
・<core-header-panel>
・<core-drawer-panel>
・<core-menu>
・<core-icon>
・<core-overlay>
...
Non-visual
・<core-ajax>
・<core-localstorage>
・<core-range>
・<core-shared-lib>
・<core-media-query>
・<core-iconset>
paper-elements : よりスタイル化されている。Material Design システムの一部
・<core-toolbar>
タブやボタン、タイトルを置くためのコンテナ
Android の ActionBar みたいなもの
core-icon-button でハンバーガーアイコンを表示したり、class="tall" で高さをかえたり
・<core-header-panel>
header セクション用のコンテナ
core-toolbar を上に pin させたり、一緒にスクロールさせたり
・<core-scroll-header-panel>
スクロール時のエフェクトができる
・<core-drawer-panel>
Navigation Drawer みたいなの
flexbox CSS
Polymer 定義の中でも外（=Polymerを使っているページ）でも使える。
Android の layout_weight みたいなことができる。
中央揃えも楽々。
Material controls
<paper-checkbox> : Material Design にそった、アニメーション付きのチェックボックス
<paper-toggle-button> : Material Design にそった、アニメーション付きのスイッチ
<paper-input> : Material Design にそった、アニメーション付きの入力フォーム
validate="^[0-9]*$" のように正規表現でバリデーションを指定できる
<paper-tabs> & <paper-tab> : Material Design にそった、アニメーション付きのタブ
<paper-ripple> : タッチ＆クリックしたときに ripple エフェクトがおこる
<paper-shadow> : z="5" のように elevation を指定することで影の量を変えられる
Theming
::shadow
エレメントの shadow dom 内部のノードのスタイルを指定できる
/deep/
shadow 境界に穴をあけ、shadow dom 内のすべてにスタイルを指定できる
<core-style>
（まだ experimental）
style をエレメント間で共有する
style binding
Transitions
<core-animated-pages>
あるビューから次のビューへのスムーズなアニメーションを作れる
QA
Q : attributes の順番に依存はありますか？
A : 順番は関係ないです。
Q : jQuery とかと一緒に使うのはどうですか？
A : 外側から利用する場合は、これまでと一緒です。custom element を作るだけです。内部で利用したい場合は、慎重になる必要があります。
Q : shadow dom の内部では JavaScript はサンドボックスになりますか？
A : いいえ、JavaScript はページの一部です。
Q : Angular JS と一緒に使うのはどうですか？
A : 一般的には、ちゃんと動きそうです。複雑なデータを binding するときに問題が起こるかもしれません。ただし、HTML と同じように扱う分においては、問題ないです。
Q : Accessibility はどうですか？チェックボックスは canvas を使っているようですが。タブをキーボードで移動しようとしてもできませんでした。なにかロードマップはありますか？
A : はい。Accessibility は我々にとっても大きな懸念事項です。Alice Boxhall が DevByte で詳しく説明しています。ロードマップがありますし、サポートする予定があります。
Q : レガシーな Android の WebView ではどうですか？
A : 私の理解では、KitKat の WebView は Polymer で動くようです。Chromium ベースではにものは動かないでしょう。
Q : IE ではどうですか？
A : 他のブラウザでも動きますよ。他のすべてのブラウザでテストしています。Firefox、Safari、IE。。。各ブラウザの最新の2バージョンはサポートしています。それがターゲットです。
Q : Bootstrap に比べてどうですか？
A : Bootstrap は素晴らしいです。でもたくさんマークアップが必要です。nav bar とか。将来的には Bootstrap はエレメントのコレクションになるかもしれません。
投稿
