Savkin先生から学んだぼくの考えた最強のAngularアプリアーキテクチャ / The best Angular application architecture

Transcript

1. Savkin先生から学んだ
   ぼくの考えた最強の
   Angularアプリアーキテクチャ
   2017.6.23
   

   View Slide

2. Savkin先生？
   Viktor Savkinさん
   Angularコミット数No.1
   説明不要
   

   View Slide

3. Managing State in Angular Applications
   https://blog.nrwl.io/managing-state-in-angular-applications-22b75ef5625f
   曰く、
   ● フロントエンドの状態管理は難しい
   ● 大きく分けて6つの状態に分類できる
   ● 状態の同期も難しいが、こういう実装ミスをしがち
   ● ngrxを使ってみるべき
   ↑すごい長い、構成としては
   1. 状態の分類
   2. よくある実装
   3. リファクタその1
   4. リファクタその2
   なので1をちゃんと読んで 3,4流し読みでもいいかも
   

   View Slide

4. Agenda
   ● フロントエンドにおける6つの状態について
   ● その状態を管理するAngularでの実装案
   ○ ngrxを使わないアーキテクチャ
   

   View Slide

5. フロントエンドにおける6つの状態
   ● Server state
   ● Persistent state
   ● URL and router state
   ● Client state
   ● Transient client state
   ● Local UI state
   ○ SS, PS, URLS, CS, TCS, UISと略すかも
   

   View Slide

6. Server state, Persistent state
   ● Server state
   ○ サーバーが保存しているデータ
   ○ REST APIなどでフロントエンドに送信される
   ● Persistent state
   ○ フロントエンドで保存している Server state
   ○ Server stateのキャッシュと見なすこともできる
   ○ 楽観的更新のために PSだけ更新するケースもある
   

   View Slide

7. URL and router state, Client state
   ● URL and router state
   ○ 現在のURL
   ● Client state
   ○ クライアント側の状態のうち、サーバーに保存されないもの
   ○ 例: Todoリストから完了したものだけ表示するフィルター
   ○ （URLと同期すべき状態）
   ● URLSとCSは同期すべき
   

   View Slide

8. Transient client state, Local UI State
   ● クライアント側でURLに同期されない状態
   ○ 例: Youtubeで動画の再生中にブラウザを閉じて、次開くとその再生時間から開く
   ○ localStorageとかCookieとかのServiceに状態管理を任せる
   ● UIに閉じた状態
   ○ ツールチップが表示されている /表示されていないなど
   

   View Slide

9. Server state, Persistent stateの実装
   ● 一つのXHRを行うサービスに閉じて実装する
   ○ XHRを実行するメソッドと、最新の値を保持しておく Subject
   ○ XHRの実行時に副作用として Subjectを更新する
   HttpService
   Server state
   Persistent state
   

   View Slide

10. URL and router state, Client stateの実装
    Component
    this.router.navigatetoUrl('/todos?status=done’);
    フィルターをユーザーが操作
    ngOnInit() {
    // ActivatedRoute でルーティングの変更を検知
    this.route.params
    .subscribe((params: Params) => this.filterStatus =
    params['status']);
    }
    html
    

    View Slide

11. URL and router state, Client state
    + Persistent Stateの実装
    Component
    this.router.navigatetoUrl('/todos?status=done’);
    フィルターをユーザーが操作
    ngOnInit() {
    // ActivatedRoute でルーティングの変更を検知
    this.route.params
    .map((params: Params) => params['status'])
    .switchMap(status => this.service.fetchTodos(status))
    .subscribe(todos => this.todos = todos);
    }
    html
    フィルターがバックエンドへのリク
    エストに影響する場合
    

    View Slide

12. Transient client state, Local UI Stateの実装
    ● Transient client stete
    ○ localStorageとかCookieとかのServiceに状態管理を任せる
    ● Local UI State
    ○ Componentの変数に状態を持つ
    Component
    LocalStorageService
    

    View Slide

13. HttpService
    Server state
    Persistent state
    Component
    this.router.navigatetoUrl('/todos?status=done’);
    Router
    フィルターをユーザーが操作
    html
    LocalStorageService
    StoreService
    Local UI state
    URL and router state
    Client state
    Transient client state
    Local UI state
    Container/Smart Component
    HttpやRouterのObservableをこ
    ねこねして現在の状態を計算す
    る
    Component
    ✝最強のアーキテクチャ✝
    全体図
    何かいい名前が欲しい
    Store...？
    線が太い赤枠：状態のデータ
    を持っているところ
    

    View Slide

14. 状態をいろんなところで保持しない
    ● 状態を色んな所に持つと同期が難しい
    ○ 例: Todo詳細コンポーネントで編集したデータを Todoリストコンポーネントに反映
    ● 状態を持つ箇所を限定する
    ○ その状態は内部では Subjectで保持し、外部にはObservableとして公開する
    ○ 参考: https://tomastrajan.github.io/angular-model-pattern-example#/about
    ● 他の状態はObservableの計算で表現する
    

    View Slide

15. 状態をいろんなところで保持しない
    例: Todoの状態をPersistent, Transient
    client, URL and route stateから計算す
    る
    ● 状態のソースは全てObservable
    ● combineLatestを使って3つの状態
    をくっつけて新しいObservableを作
    る
    動作確認してないので動かない嘘コードかも
    

    View Slide

16. まとめ
    ● Savkin状態管理理論の6つの状態
    ● それをAngularで実装するアーキテクチャの案
    ○ でもほとんどはAngularとして普通の作り
    ○ Subjectで状態を保持するのがあまり普通じゃないくらい？
    ○ 最強のアーキテクチャゆえにもちろん行ける気がしているのでとりあえずこれで行く
    ○ 進めてみて過ちに気づいたら素直に認めて反映していく、やっぱ ngrxにするなど
    

    View Slide