Classi リプレイスプロジェクト フロントエンドアーキテクチャ変遷 / Classi Angular Night #4

Transcript

1. Copyright © 2019 Classi Corp. All Rights Reserved. Classi リプレイスプロジェクト
 フロントエンドアーキテクチャ変遷
 2019/10/03 Classi Angular Night #4 
 Classi 株式会社 笠原渉
2. Copyright © 2019 Classi Corp. All Rights Reserved. 笠原 渉 (かさはら わたる)
 • Classi 株式会社
 • フロントエンドエンジニア
 • Angular 日本ユーザー会 staff
 • New Angular CLI コントリビュート
 1 About me
 @kasaharu
3. Copyright © 2019 Classi Corp. All Rights Reserved. Classi Angular Night #1 時点の取り組み
 • Presentation Domain Separation
 • Redux
 
 #1 からの変化
 • Layered Architecture
 • Command Query Separation
 
 2 目次

4. Copyright © 2019 Classi Corp. All Rights Reserved. 3 当時(Classi Angular Night #1 時点)の取り組み
5. Copyright © 2019 Classi Corp. All Rights Reserved. Atomic Design
 • Angular CLI の Library 機能を使ったコンポーネントプロジェクトの作成
 ◦ Application 側のコードと完全に分離できる 
 
 NgRx
 • Redux like な状態管理ライブラリを導入し Store による状態の一元管 理
 
 4 当時(Classi Angular Night #1 時点)の取り組み

6. Copyright © 2019 Classi Corp. All Rights Reserved. Atomic Design
 • Angular CLI の Library 機能を使ったコンポーネントプロジェクトの作成
 ◦ Application 側のコードと完全に分離できる 
 
 NgRx
 • Redux like な状態管理ライブラリを導入し Store による状態の一元管 理
 
 5 当時(Classi Angular Night #1 時点)のアーキテクチャ
 → Presentation Domain Separation
 → Redux

7. Copyright © 2019 Classi Corp. All Rights Reserved. 6 Presentation Domain Separation
8. Copyright © 2019 Classi Corp. All Rights Reserved. どういうものか
 • その名の通り Presentation(UI) と Domain(ロジック) の分離
 • フロントエンドアーキテクチャを検討するとき最初に考えたい
 ◦ MVC や MVVM などは PDS にあたる 
 • Angular は styleguide にもあるように Component と Service を意識し て分割すれば PDS が実現できる
 7 Presentation Domain Separation(PDS)

9. Copyright © 2019 Classi Corp. All Rights Reserved. 8 Presentation Domain Separation(PDS)
 Component Presentation 層 Service Domain 層
10. Copyright © 2019 Classi Corp. All Rights Reserved. メリット
 • 変更時の影響範囲を減らす
 ◦ UI とロジックは変更タイミングが異なることが多い 
 ◦ UI の変更でロジックを気にしたくない(またはその逆) 
 • テスタビリティがあがる
 ◦ UI はロジックに比べるとテストが難しいのでロジックを分離するほどテストしやすい範囲が 増える
 • スキルセットの分離
 ◦ 究極的には UI は HTML / CSS と少しのロジックになるので HTML / CSS が書けるデザ イナーがいる会社なら UI の保守をデザイナーができる(といいな) 
 9 Presentation Domain Separation(PDS)

11. Copyright © 2019 Classi Corp. All Rights Reserved. 10 Redux
12. Copyright © 2019 Classi Corp. All Rights Reserved. どういうものか - Redux の 3 原則
 • Single Source of Truth
 ◦ アプリケーション全体の状態が単一の store に格納される 
 • State is read-only
 ◦ 状態を変更するのは常に action の発行でのみ実施 
 • Changes are made with pure functions
 ◦ 状態の更新は Reducer を使った pure function で実施 
 11 Redux

13. Copyright © 2019 Classi Corp. All Rights Reserved. 12 Redux
 Component Presentation 層 Service Domain 層 Selector Action Reducer State Store 層 呼び出し
 購読

14. Copyright © 2019 Classi Corp. All Rights Reserved. メリット
 • アプリケーションの状態は store を見ればわかるようになる
 • 状態を変更するのは action なので、いつどの action で状態が変わっ たかわかりやすくなる
 • アプリケーションが大きくなったときの下記問題が解決しやすい
 ◦ ユーザー入力を受け付けたりバックエンドからデータを取得したりとデータフローが複雑に なる
 ◦ ページをまたいで管理する状態が出てくる 
 13 Redux

15. Copyright © 2019 Classi Corp. All Rights Reserved. • NgRx Effects
 ◦ コンポーネントの代わりにデータ fetch などの処理をまとめられる 
 ◦ (結果としてこの役割の登場はよくなかった) 
 • [Container | Presentational] component
 ◦ 状態を持つコンポーネントと状態を持たないコンポーネントの分離 
 14 Redux + α

16. Copyright © 2019 Classi Corp. All Rights Reserved. 15 Redux + α
 Presentation 層 Service Domain 層 Selector Action Reducer State Store 層 Effects Container Component Presentational Component 呼び出し
 購読

17. Copyright © 2019 Classi Corp. All Rights Reserved. PDS
 • Domain(*service.ts) が大きくなっていった(ビジネスロジックや API Wrapper)
 • PDS はあくまで Presntation とそれ以外の分割にしか焦点を当ててい ない
 ◦ Domain 部分をどう実装するかの指標がない 
 
 Redux(NgRx)
 • Effects を多用した結果 RxJS を駆使しなければいけなくなった
 ◦ コードが読みにくく、テストもしづらい 
 16 ここまでのアーキテクチャ的な課題

18. Copyright © 2019 Classi Corp. All Rights Reserved. • フロントエンドエンジニアの採用難
 • バックエンドエンジニアのフロントエンドへの興味
 
 → バックエンドエンジニアでも触りやすい作りにするほうがよい
 17 組織的な課題と変化

19. Copyright © 2019 Classi Corp. All Rights Reserved. • バックエンドエンジニアが参入しやすいつくりを目指す
 • → システムアーキテクチャの採用
 18 Classi Angular Night #1 以降の目標

20. Copyright © 2019 Classi Corp. All Rights Reserved. 19 Layered Architecture
21. Copyright © 2019 Classi Corp. All Rights Reserved. どういうものか
 • Presentation, Application, Domain, Infrastructure に分割
 
 • Presentation
 ◦ PDS の P と同じ
 • Domain
 ◦ 型情報やビジネスロジックを配置(Angular にとらわれない TS で実装) 
 ◦ アプリケーションフレームワークにも依存しないのが理想 
 • Infrastructure
 ◦ API Wrapper や GoogleAnalytics のための Adapter などを配置 
 • Application
 ◦ Domain, Infrastructure 以外を配置 
 20 Layered Architecture

22. Copyright © 2019 Classi Corp. All Rights Reserved. 21 Layered Architecture
 Container Component Presentation 層 Service Application 層 Presentational Component Domain 層 Infrastructure 層 Repository Selector Action Reducer State Store 層 Model 呼び出し
 購読

23. Copyright © 2019 Classi Corp. All Rights Reserved. 以下も解決したい
 • Presentation 層と Store の依存を切り離す
 • 参照系と更新系を分離
 22 Layered Architecture + α

24. Copyright © 2019 Classi Corp. All Rights Reserved. 23 Command Query Separation
25. Copyright © 2019 Classi Corp. All Rights Reserved. どういうものか
 • コマンドクエリの分離
 ◦ コマンド
 ▪ オブジェクトの状態を変更するメソッド
 ▪ そのメソッドは値を戻してはいけない
 ◦ クエリ
 ▪ なんらかの値を返すメソッド
 ▪ オブジェクトの状態を変更してはいけない
 • 明確に分離することで
 ◦ 副作用が発生しないクエリと副作用が発生するコマンドを分割 
 ◦ 変更容易性が上がり、テスト難易度は下がる 
 • 今回は
 ◦ コマンド(*.usecase.ts)とクエリ(*.query.ts)で class を分けて CQS like に実装 
 
 24 Command Query Separation(CQS)

26. Copyright © 2019 Classi Corp. All Rights Reserved. 25 Command Query Separation(CQS)
 Container Component Presentation 層 Application 層 Presentational Component Domain 層 Infrastructure 層 Repository Selector Action Reducer State Store 層 Usecase Query Model 呼び出し
 購読

27. Copyright © 2019 Classi Corp. All Rights Reserved. メリット
 • 各層の責務が明確になる
 ◦ HttpClient を利用した API call → Repository 
 ▪ ※ Repository : DDD の Repository というよりは Clean Architecture の Gateway に近い
 ◦ Container component 毎に必要な処理をまとめ Store への action dispatch をおこなう → Usecase
 ◦ 該当する View に必要な state を selector 経由で取得 → Query 
 ◦ ビジネスロジックを Angular に依存しない pure TypeScript で書く → Domain 
 • バックエンドエンジニアにも馴染みのあるシステムアーキテクチャ採用
 
 26 Layered Architecture + CQS

28. Copyright © 2019 Classi Corp. All Rights Reserved. 27 まとめ
29. Copyright © 2019 Classi Corp. All Rights Reserved. • Classi の半年間のアーキテクチャ変遷をご紹介
 • 今のアーキテクチャのオススメポイント
 ◦ 各層の役割がディレクトリ構成やファイル名でおおよそ判断可能 
 ◦ 完全に責務が別れているため mocking しやすくテスタビリティが高くなる 
 28 まとめ

30. Copyright © 2019 Classi Corp. All Rights Reserved. - iOS アプリ設計パターン入門
 - 実践ドメイン駆動設計
 - プレゼンテーションとドメインの分離
 - コマンド・問い合わせの分離
 - Angular - スタイルガイド
 - Redux - Three Principles
 29 参考文献

31. Copyright © 2019 Classi Corp. All Rights Reserved. 30 We are Hiring！
 Classiでは一緒に働く仲間を募集しています 詳細は採用ページにて - https://corp.classi.jp/careers/