「Polymer Japan Cafe #1」に参加してきました

• 2018/2/6
• https://polymer-japan.connpass.com/event/77121/

Polymer Japanの活動紹介とイベントの概要説明

• jtakiguchi

WebComponents

• 再利用可能な独自のHTMLタグを作るための標準技術仕様

背景

• URLアクセスして表示されるだけ
• ajaxで非同期リクエスト
• HTML5(HTML+CSS+JavaScript)
  • SPA
• フロントエンドエンジニア
  • 複雑化
  • コードやデータをどう体系化するか
• ブラウザベンダー
  • ベンダー間でWebの標準化

仕様

• Custom Elements
• ShadowDOM
• HTML Template
• HTML Imports
  • 廃止
  • HTML ModulesとかESModules

Polymer

• 独自のHTMLエレメントの作成をサポート
• アプリを構築するJSライブラリ

特徴

• 軽量かつハイパフォーマンス
  • HTMLだから(JSFWと比べて)はやい
• 高機能なCustomElement
  • コンポーネントに対していろんな機能を注入
  • 他のライブラリのいいとこどり
• アプリ開発に役立つツール
  • CLI?
  • ドキュメント
  • テスト
• 公式エレメント/エコシステム
  • 4層
  • マテリアルデザインベースのUIコンポーネント

開発元

• chromeチームが作ったもの

事例

• youtube
• PREDIX
• ElectronicArts

最近の動向

• TS対応
• bower -> npm
• HTML Imports -> ES Modules

Polymerで始めるWebサイト制作

• takanorip(スマートドライブ)

Webサイト制作における課題

• Polymerを使うと
• 環境構築が面倒
  • ほとんど何もしない
• グローバルなHTML/CSS
  • scoped
• HTML/CSSを共有したい
  • コンポーネント指向
• Web標準技術で実現できる

環境構築が面倒

• polimer-cli

グローバルなHTML/CSS

• shadowDOM
  • dom-moduleタグの中にhtml書くとスコープが絞られる
  • templateタグの中にstyleタグを書くとそのtemplateだけにスコープが絞られる
• データバインディング
  • 属性で値を渡す
  • <button>[[buttonText]]</button>
• HTML/CSSを共有したい
  • SASSみたいな書き方ができる

PWA

• ios11.3でsafariがServiceWorker対応で話題
• Polymer単体でもPWA使える

PolymerのSEO/SSRの対策と手法

• aggre

他のJSFWとの違い

• 静的なHTML取得
  • ファイルを探して返す
• 動的なHTML取得
  • HTMLになる文字列を生成して返す
• Polymerだと
  • ShadowDOM
  • ブラウザ側で作られる