Tweet
Tweet

Slide 1

Slide 1 text

Web ComponentsとAngular ng-japan OnAir #3 / Dec 19th, 2018 ponday (@ponday_dev)

Slide 2

Slide 2 text

Profile - ponday (Honda, Yusuke) - 株式会社ベガコーポレーション エンジニア - Like : TypeScript / Elixir / Python etc… - 日曜フロントエンドエンジニア

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

Frontend Conference Fukuoka 2019 ...?

Slide 6

Slide 6 text

Web Components

Slide 7

Slide 7 text

Web Components - Web標準の技術で、再利用可能な部品を作るAPI - いくつかの仕様の総称 - Custom Elements - Shadow DOM - ES Modules

Slide 8

Slide 8 text

Custom Elements - 独自のHTMLタグ名を定義するAPI - window.customElements.define - class構文を用いて定義 - HTMLElementオブジェクトを継承 - class構文をトランスパイルしてしまうとエラー （adapterを利用して回避可能）

Slide 9

Slide 9 text

Shadow DOM - グローバルから独立したDOMツリー - カスタム要素がそれぞれDOMツリーを持つ - CSSやJSの影響範囲を限定する - Scoped CSS

Slide 10

Slide 10 text

ES Modules - HTML importsの代わりに利用 - import/export -

Slide 11

Slide 11 text

これまで Component Component Component State Management Routing State Management Routing State Management Routing DOM API

Slide 12

Slide 12 text

これから DOM API Component Component Component State Management Routing State Management Routing State Management Routing Web Components

Slide 13

Slide 13 text

https://www.webcomponents.org/

Slide 14

Slide 14 text

Angular Elements

Slide 15

Slide 15 text

Angular Elements - Angularを使ってCustom Elementsを作る - createCustomElement - 要素の登録は標準API (window.customElement.define)を利用 - v6の頃から提供

Slide 16

Slide 16 text

ng new

Slide 17

Slide 17 text

ng add @angular/elements

Slide 18

Slide 18 text

ソース修正①：AppModule - bootstrap: [...] を削除 - entryComponents: [...] を追加 - InjectorオブジェクトをDI - ngDoBootstrapでcreateCustomElement

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

ソース修正②：AppComponent - selector: ‘...’ を削除

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

ng build --prod

Slide 23

Slide 23 text

レンダリング結果

Slide 24

Slide 24 text

レンダリング結果

Slide 25

Slide 25 text

スタイリング

Slide 26

Slide 26 text

? スタイリング

Slide 27

Slide 27 text

Scoped CSS - Angularのデフォルトはエミュレーション - コンポーネントに自動で_nghost, _ngcontentを付与 - Angular Elementsにおいてもデフォルトはエミュレーション - Shadow DOMに切り替えも可能

Slide 28

Slide 28 text

encapsulation: ViewEncapsulation.ShadowDom

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

レンダリング結果

Slide 31

Slide 31 text

レンダリング結果 Shadow DOMが有効に

Slide 32

Slide 32 text

レンダリング結果 エミュレーションではなく、 Shadow DOMによる本物のScoped CSS

Slide 33

Slide 33 text

Angular Elementsのメリット - 既存のAngularアプリがほぼそのまま使える - Angularにとらわれない適用範囲 - React/Vue.jsとの共存 - 静的なサイトへの組み込みも可能 - 汎用的な部品としてのAngularアプリケーション

Slide 34

Slide 34 text

Angular Elementsの現状の課題 - バンドルサイズが大きい - シンプルな例でも200KB超え（productionビルド時） - Angularのランタイムが丸々バンドルされてしまうため

Slide 35

Slide 35 text

ng-conf 2018 Keynote

Slide 36

Slide 36 text

Ivy - Angularの新しいレンダリングエンジン - Smaller - Faster - Simpler - バンドルサイズの削減が期待できる

Slide 37

Slide 37 text

Angular Elementsの使い所 - 既存のAngular資産を別プロダクトに流用したい - そのプロダクトがAngularアプリでなくても使える - 利用者はAngularの動作を意識しなくても良い - リッチな機能を持ったコンポーネントが作りたい - 標準のCustom Elementsでリッチなものを作るのは少しつらい - Polymerという選択肢もある（技術スタック次第？）

Slide 38

Slide 38 text

まとめ - Web Componentsは再利用可能な部品を作るAPI - Angular ElementsでAngularを使って Custom Elementsが作れる - 現状バンドルサイズは課題 - Angular Elements + Ivyに期待