zoneless アーキテクチャのこれまでとこれから

Transcript

1. February 16, 2024 沖　総一朗 セーフィー株式会社 zonelessアーキテクチャの これまでとこれから
2. © Safie Inc.｜ 2 Frontend Engineer s-oki-safie 沖　総一朗 Soichiro Oki Angular好きなWebアプリケーションエンジニアです 自社で運営するビューアーアプリケーションのフロントエンド開発を担当しています Angularは今年で6年目になります
3. © Safie Inc.｜ zonelessの話の前に 3
4. © Safie Inc.｜ Angularのレンダリング 4 イベント後に更新
5. © Safie Inc.｜ Angularのレンダリング 5 非同期処理後に更新
6. © Safie Inc.｜ NgZone 6
7. © Safie Inc.｜ NgZone 7 Zoneは非同期タスクにまたがって持続する実行コンテキスト →setTimeout(), Promise.then(), addEventListener()などほとんどの非同期APIを 処理し変更検知を流してくれる NgZoneのおかげでAngularはビューの更新タイミングが分かり、再レンダリングする ことができる https://angular.jp/guide/zone なにが問題なのか？
8. © Safie Inc.｜ 不要な変更検知 8 同期および非同期関数が実行された時に変更検知を流してくれる →モデルに変更があるかどうかは関係ない →サードパーティのライブラリで変更検知が過剰に発生する可能性がある NgZone対象外にするrunOutsideAngularなどもあるが、ルール化が難しい そうだzonelessにしよう
9. © Safie Inc.｜ zonelessにしてみよう 9
10. © Safie Inc.｜ zonelessのやり方 10 bootstrapModule bootstrapApplication bootstrapApplication(17.1以降) この２つは 同義
11. © Safie Inc.｜ これまでのzoneless 11
12. © Safie Inc.｜ Viewが更新されない 12 変更検知が走らないのでViewが更新されない
13. © Safie Inc.｜ どうするか 13 手動でDetectChanges 無事反映！ →ただいちいちdetectChangesを呼ぶのは面倒 →storeを使ってasync-pipeで更新するパターンだと難しい async-pipeを応用したpush-pipeを開発
14. © Safie Inc.｜ async-pipe 14 この次の変更検知を 実施するのがzone
15. © Safie Inc.｜ push-pipe 15
16. © Safie Inc.｜ 使う側 16 いちいちdetectChangesを呼ぶ手間も省けて良さそう
17. © Safie Inc.｜ ルーティングが動かない 17 router-outlet配下のcomponentが表示されない →router-outlet配下にあるcomponentのライフサイクルイベントが動かない なぜか →detectChangesが呼ばれないとライフサイクルイベント自体が動かないから router-outletが配置されているcomponentでdetectChangesを動かす必要がある
18. © Safie Inc.｜ ルーティングをフック 18 RouterOutletが配置されているcomponentでdetectChanges まだいくつかダメなケースはありますが概ねこれで実現
19. © Safie Inc.｜ これからのzoneless 19
20. © Safie Inc.｜ これからのzoneless 20 bootstrapModule bootstrapApplication bootstrapApplication(17.1以降)
21. © Safie Inc.｜ これからのzoneless 21 bootstrapApplication(17.1以降) angular/angularのgithub参照
22. © Safie Inc.｜ ChangeDetectionSchedulerとは 22 簡単に言うと viewがdirtyになったタイミングなどで変更検知を流してくれる →markForCheck()でも変更検知が流れる zonelessでありながら手動でdetectChangesする必要がない
23. © Safie Inc.｜ provideZonelessChangeDetection 23 clickイベントなどの発生時は、viewがdirtyになるので普通に動きます
24. © Safie Inc.｜ async-pipe 24 この次の変更検知を 実施するのがzone
25. © Safie Inc.｜ async-pipeのパターンも動く 25 変数を変更しただけの場合setTimeoutだと反映されないので注意
26. © Safie Inc.｜ まとめ 26
27. © Safie Inc.｜ まとめ 27 これまでのzoneless ・手動でdetectChangesする必要があった ・動かすために様々な工夫が必要 これからのzoneless（おそらく） ・providerを差し替えるだけで動く ・おそらくデフォルトになる ・signalでもっと快適になる zonelessへのトライ自体がAngularへの理解を深める