Angular Elements を用いた Web Components 製 UIライブラリの提供

Angular Elements を⽤いた Web Components 製 UIライブラリの提供 Kondo Masashi GDG
DevFest 2020 mini ng-japan 2020

About Me

Agenda Angular Elements を⽤いた Web Components 製 UIライブラリ開発について、⾃社事例を元に説明します。 1.
サービス紹介 2. Angular Elements 3. Safie Web Components 4. 開発時の課題と対策

•••• サービス紹介

クラウド録画サービス︓Safie ネットワークカメラの映像をクラウドに保存。いつでもライブや録画映像を視聴。 Web の映像ビューアーは Angular 10 で開発。サービス紹介

Safie Viewer DEMO

映像視聴 UI ライブラリユーザーが⾃分のビジネスとコラボして映像を使えるようにする。そのためには⾃社サイト以外でも録画映像を⾒れるようにしたい。録画映像を扱う UI ライブラリとしてのニーズが出てきた。ライブラリは標準規格である Web
Components で提供。 Angular Elements を⽤いて実装した。サービス紹介

•••• Angular Elements

Angular Elements Angular の Components を Web Components (Custom Elements)
に変換して出⼒。 Angular Elements import { NgModule, Injector } from '@angular/core'; import { createCustomElement } from '@angular/elements'; import { AComponent } from './components/a.component'; @NgModule({ declarations: [ AComponent, ], }) export class AppModule { constructor(private injector: Injector) {} ngDoBootstrap() { const AComponentElement = createCustomElement( AComponent, { injector: this.injector } ); customElements.define('a-component', AComponentElement); } }

Angular Elements @Input は Attribute に @Output は Custom Event
にマッピングされる。ライフサイクルフックも可能。 Angular Elements import { Component, Input } from '@angular/core'; @Component({ template: 'A_Component', }) export class AComponent { private _type = 'normal'; @Input() text = ''; @Input() set type(value: string) { this._type = value; } get type() { return this._type; } @Output() change = new EventEmitter(); }

Angular Elements フレームワークに依存しないコンポーネントを簡単に作成できる。 Angular Elements <body> <a-component text="GDGdevFest"></a-component>
<script src="https://wc.download.url/"></script> <script> const aComponent = document.querySelector('a-component'); aComponent.type = "normal"; aComponent.addEventLister('change', () => { console.log('changed'); }) </script> </body>

•••• Safie Web Components

Safie Web Components フレームワークに依存しない Web Components 製のUIライブラリ。映像視聴に特化したUIを提供。 Safie Web
Components

Safie Web Components DEMO

•••• 開発時の課題と対策

開発時の課題と対策 Angular Elements を⽤いた開発で⼯夫したこと。特に通常の Angular 開発で普段気にしないことについて説明する。 1. ViewEncapsulation.ShadowDom 2.
Attribute Mapping (@input) 3. Error Handling 4. Composable Definition Pattern 5. Lazy Loading (Component) 開発時の課題と対策

ViewEncapsulation.ShadowDom 開発時の課題と対策

ViewEncapsulation .ShadowDom そのまま Angular Elements を Custom Elements にすると
Scoped CSS が適応されません。 Scoped CSS を使うには Components で encapsulation を設定。開発時の課題と対策 ••••• import { Component, ViewEncapsulation, // } from '@angular/core'; @Component({ template: ' <span class="light">Light Component</span> ', }) export class LightDomComponent {} @Component({ template: ' <span class="shadow">Shadow Component</span> ', encapsulation: ViewEncapsulation.ShadowDom, // }) export class ShadowDomComponent {}

ViewEncapsulation .ShadowDom Web Components は ShadowDom を使って Scoped CSS を実現する。
createCustomElement する Components で ShadowDom を指定する。開発時の課題と対策 ••••• DEMO

Attribute Mapping 開発時の課題と対策 •••••

Attribute Mapping Angular Elements では @input() が付与されたプロパティを Custom Element
の属性として扱う。開発時の課題と対策 ••••• import { Component, Input } from '@angular/core'; @Component({ template: 'Component_A', }) export class AComponent { private _type = 'normal'; @Input() text = ''; @Input() set type(value: string) { this._type = value; } get type() { return this._type; } } // <a-component text="sample" type="special"></a-component> //

Attribute Mapping 今回は <video> のように play() 、 pause() などのメソッドを定義する必要があった。
Angular Elements には function を定義する術が無い。開発時の課題と対策 ••••• import { Component, Input } from '@angular/core'; @Component({ template: 'Component_A', }) export class AComponent { _timestamp = new Date().getTime(); @Input() mute = false; // 参照可能 play() { // is not a function console.log('call play'); } @Input() pause() { // is not a function console.log('call pause'); } @Input() get timestamp() { // 参照可能 return this._timestamp; } }

Attribute Mapping 関数を定義する術が無いので、別 Components に play() と pause() を定義。
Custom Elements から instance として Components を取得して実⾏する。開発時の課題と対策 •••••

Attribute Mapping Custom Element になる外側の Component に instance を
@Input の Getter で定義。内側の Component に関数を定義する。開発時の課題と対策 ••••• import { Component, Input } from '@angular/core'; @Component({ template: 'OuterComponent', }) export class OuterComponent { innerComponent = new InnerComponent(); @Input() get instance() { // return this.innerComponent; } } @Component({ template: 'InnerComponent', }) export class InnerComponent { play() { // console.log('call play'); } pause() { // console.log('call pause'); } }

Attribute Mapping 出⼒した Custom Element から instance を取得。 instance
に対して play() 等の関数を呼ぶ。開発時の課題と対策 ••••• <body> <outer-component></outer-component> <script src="https://wc.download.url/"></script> <script> const outerComponent = document.querySelector('outer-component'); const innerComponent = outerComponent.instance; function play() { innerComponent.play(); // call play } function pause() { innerComponent.pause(); // call pause } </script> </body>

Error Handling 開発時の課題と対策 •••••

Error Handling 利⽤者は Web Components で発⽣したエラーを検知することが出来ない。 <video> の様に onerror
を実装する必要がある。開発時の課題と対策 ••••• import { Component } from '@angular/core'; @Component({ template: ' <input type="button" value="throw" (click)="onClick()" > ', }) export class AComponent { onClick() { throw Error('throw Error!!!'); // } }

Error Handling @Output で Custom Event として実装するのが良いが、前述の件があったので instance
で EventEmitter を使い実装した。開発時の課題と対策 •••••  <body> <safie-streaming-player></safie-streaming-player> <script src="https://wc.download.url/"></script> <script> const safieStreamingPlayerElement = document.querySelector('safie-streaming-player'); const safieStreamingPlayer = safieStreamingPlayerElement.instance; safieStreamingPlayer.on('error', (error) => { console.error(error); }); </script> </body>

Composable Definition Pattern 開発時の課題と対策 •••••

Composable Definition Pattern 今後の課題として、定義する Components が増えると Module (Component) の共通部分への依存が増えてくる。
これを効率化し、オーバーヘッドを減らしたい。開発時の課題と対策 •••••

Composable Definition Pattern Angular Elements は複数の Component (Module) を⼀つの
Web Components として定義できる。開発時の課題と対策 ••••• import { NgModule, Injector } from '@angular/core'; import { createCustomElement } from '@angular/elements'; import { AComponent } from './components/a.component'; import { BComponent } from './components/b.component'; @NgModule({ declarations: [ AComponent, BComponent ], }) export class AppModule { constructor(private injector: Injector) {} ngDoBootstrap() { const AComponentElement = createCustomElement( AComponent, { injector: this.injector } ); const BComponentElement = createCustomElement( BComponent, { injector: this.injector } ); customElements.define('a-component', AComponentElement); customElements.define('b-component', BComponentElement); } }

Composable Definition Pattern ⼀つの Web Components として出⼒することで、 Component (Module)
の他に bootstrapping や <script> のロードに掛かる共通のオーバーヘッドも削減できる。開発時の課題と対策 •••••

Lazy Loading 開発時の課題と対策 •••••

Lazy Loading 更に効率を上げるため、Lazy Loading を活⽤する。共通部分をダウンロードし、必要な Components をロードすることができる。
開発時の課題と対策 •••••

Lazy Loading Angular Elements での Lazy Loading デモ開発時の課題と対策 •••••
DEMO

おわりに Angular Roadmap では今後Ivyでの最適化や、Optional ngModule などが予定されており、Angular Elements で出⼒されるWeb Componentsもその恩恵を受けれ
ることを期待しています。 Web Components の開発経験はほぼ０でしたが、 Angular Elements のお陰で想定より簡単でした。是⾮使って頂ければと思います。

Finish! Enjoy GDG DevFest and ng-japan

Github https://github.com/MssKnd/angular-elements-demo

Reference Angular.io Angular elements overview Angular Roadmap blog.lacolaco.net Angular Elementsの現在地
(2020 Summer) Angular Elements: Composable Definition Pattern open-wc.org Web Component Libraries stackoverflow.com How to call a method on a Angular Web Component (Custom Element) Call Angular web component method (CustomElement)

This slides powered by Marpit (VSCode Plugin)

Angular Elements を用いた Web Components 製 UIライブラリの提供

Angular Elements を用いた Web Components 製 UIライブラリの提供

Other Decks in Programming

Featured

Transcript