Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

adwd
June 23, 2017

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

adwd

June 23, 2017
Tweet

More Decks by adwd

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

  15. 状態をいろんなところで保持しない
    例: Todoの状態をPersistent, Transient
    client, URL and route stateから計算す

    ● 状態のソースは全てObservable
    ● combineLatestを使って3つの状態
    をくっつけて新しいObservableを作

    動作確認してないので動かない嘘コードかも

    View full-size slide

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

    View full-size slide