WebComponents
Polymer
Polymer2.0

Google I/O '17 Web Componentsのプレゼンのメモ

More than 1 year has passed since last update.

Future, Faster: Unlock the Power of Web Components with Polymer (Google I/O '17)を見ました。

全体として、そもそもWeb ComponentsやPolymerに馴染みのない開発者向けにPolymer 2.0の紹介やWeb Componentsがブラウザで標準サポートされる意義を噛み砕いて紹介する内容でした。Polymer Summit 2016をご覧になった方にはほとんど新しい内容はないと思います。また、他のJSライブラリユーザーに向け、Polymer 1.0では難しかった他のJSライブラリ(angular/react)との互換がPolymer 2.0の登場でより簡単になった点についても言及しています。

以下動画を見ながらメモしたものです。書き起こすのは大変なので、Web ComponentsやPolymerの一般的な内容は割愛しました。ご覧になる際に参考にしてください。

(!)は拍手や歓声のあった瞬間です(笑)

  • 2:27 (!!)safari10からCustom ElementsとShadow DOMを正式にサポート
  • 11:34 Polymerを使っている企業の紹介(Comcast/USA Today/ING/NET-A-POTER/BBVA/Coca Cola/Electronic Art/Predix/Google Earth/Youtube)
  • 15:47 (!)Polymer 2.0の発表
  • 16:14 (!)ブラウザがWeb Componentsをサポートし始めたのでPolymer 2.0は1.0のファイルサイズは1/4に
  • 18:45 (!)Web Componentsは標準だから、サポートブラウザであればconsole上でそのままコードを試すことだってできる(ライブラリも不要)
  • 22:06 Polymer2.0 + Polyfill(Custom Elements&Shadow DOM&CSS Custom Properties)のサイズ Chrome(11k)Safari(14k)Firefox(33k) Edge(33k)IE(37k)
  • 22:47 Angularやpreact(Reactのalt版)のコンポーネントとも互換性がある
  • 23:57 Polymer 2.0は、全てのJSライブラリとも互換性がある
  • 24:46 Polymer 1.0から2.0へのスムーズなマイグレーションが可能
  • 29:25 最近ローンチされたWebComponentsOrgは開発者の作成したオープンソースのWeb Componentsを共有可能なプラットフォーム(すでに1000を越えるコンポーネントがアップされている)
  • 32:36 IDEのプラグイン(Qiitaに投稿した記事)と新しいPolymer CLIの紹介
  • 33:45 ここからPRPLパターンの説明
  • 34:02 PRPLパターンの誕生したエピソード。(凄い…これぞ集合知)
  • 36:37 Twitter LiteがPRPLパターンに基づいて作成されたという話。PRPLは固有のライブラリに縛られない応用のきくコンセプトである。
  • 37:02 PWAのサンプルとしてデモアプリケーションPolymer Newsを紹介
  • 39:56 写真加工アプリCheeseも作ってみた
  • 41:24 IOのWeb Components関連のプレゼン紹介
  • 42:18 (!!)次のPolymer SummitはCopenhagenでAugust 22-23, 2017に開催。Chromeの検索から「g.co/polymersummit2017」にアクセスすると申し込みの方法など確認できる。