ng-japan OnAir(2018/12/19)にYouTubeライブで発表した資料です。
↓配信のアーカイブはコチラ https://www.youtube.com/watch?v=ibbwzBdbQSQ
Web ComponentsとAngularng-japan OnAir #3 / Dec 19th, 2018 ponday (@ponday_dev)
View Slide
Profile- ponday (Honda, Yusuke)- 株式会社ベガコーポレーション エンジニア- Like : TypeScript / Elixir / Python etc…- 日曜フロントエンドエンジニア
Frontend Conference Fukuoka 2019 ...?
Web Components
Web Components- Web標準の技術で、再利用可能な部品を作るAPI- いくつかの仕様の総称- Custom Elements- Shadow DOM- ES Modules
Custom Elements- 独自のHTMLタグ名を定義するAPI- window.customElements.define- class構文を用いて定義- HTMLElementオブジェクトを継承- class構文をトランスパイルしてしまうとエラー(adapterを利用して回避可能)
Shadow DOM- グローバルから独立したDOMツリー- カスタム要素がそれぞれDOMツリーを持つ- CSSやJSの影響範囲を限定する- Scoped CSS
ES Modules- HTML importsの代わりに利用- import/export-
これまでComponent Component ComponentStateManagementRouting StateManagementRouting StateManagementRoutingDOM API
これからDOM APIComponent Component ComponentStateManagementRouting StateManagementRouting StateManagementRoutingWeb Components
https://www.webcomponents.org/
Angular Elements
Angular Elements- Angularを使ってCustom Elementsを作る- createCustomElement- 要素の登録は標準API (window.customElement.define)を利用- v6の頃から提供
ng new
ng add @angular/elements
ソース修正①:AppModule- bootstrap: [...] を削除- entryComponents: [...] を追加- InjectorオブジェクトをDI- ngDoBootstrapでcreateCustomElement
ソース修正②:AppComponent- selector: ‘...’ を削除
ng build --prod
レンダリング結果
スタイリング
?スタイリング
Scoped CSS- Angularのデフォルトはエミュレーション- コンポーネントに自動で_nghost, _ngcontentを付与- Angular Elementsにおいてもデフォルトはエミュレーション- Shadow DOMに切り替えも可能
encapsulation: ViewEncapsulation.ShadowDom
レンダリング結果Shadow DOMが有効に
レンダリング結果エミュレーションではなく、Shadow DOMによる本物のScoped CSS
Angular Elementsのメリット- 既存のAngularアプリがほぼそのまま使える- Angularにとらわれない適用範囲- React/Vue.jsとの共存- 静的なサイトへの組み込みも可能- 汎用的な部品としてのAngularアプリケーション
Angular Elementsの現状の課題- バンドルサイズが大きい- シンプルな例でも200KB超え(productionビルド時)- Angularのランタイムが丸々バンドルされてしまうため
ng-conf 2018 Keynote
Ivy- Angularの新しいレンダリングエンジン- Smaller- Faster- Simpler- バンドルサイズの削減が期待できる
Angular Elementsの使い所- 既存のAngular資産を別プロダクトに流用したい- そのプロダクトがAngularアプリでなくても使える- 利用者はAngularの動作を意識しなくても良い- リッチな機能を持ったコンポーネントが作りたい- 標準のCustom Elementsでリッチなものを作るのは少しつらい- Polymerという選択肢もある(技術スタック次第?)
まとめ- Web Componentsは再利用可能な部品を作るAPI- Angular ElementsでAngularを使ってCustom Elementsが作れる- 現状バンドルサイズは課題- Angular Elements + Ivyに期待