Blue monkey architecture overview

1. © 2017 @nuits_jp
Blue Monkey
Architecture Overview
2017.03.14

2. © 2017 @nuits_jp
中村 充志 / Atsushi Nakamura
• Enterprise系アプリケーションアーキテクト
• Prism for WPFを仕事にて活用
• Xamarinを仕事にしたくて奮闘中
• Microsoft MVP Visual Studio and Developer
Technologies
• Twitter : @nuits_jp
• Blog : http://www.nuits.jp
• Company : RICOH JAPAN Corp.
2
自己紹介

3. © 2017 @nuits_jp
はじめに

4. © 2017 @nuits_jp
BlueMonkeyプロジェクトのゴール
【ゴール】
一定規模のチーム開発に耐えうる
アーキテクチャのリファレンス実装の提案
【重視しているポイント】
• テスト容易性・変更容易性の確保
• クロスプラットフォーム対応
• 特定バックエンドへの非依存

5. © 2017 @nuits_jp
アーキテクチャ上のキーワード
• Prism for Xamarin.Forms
• MVVM Pattern
• MVVMのM

6. © 2017 @nuits_jp
Prism for Xamarin.Forms

7. © 2017 @nuits_jp
MVVMパターンで辛くなりがちな点
Binding &
Command
Update
NotificationNotification
• 画面遷移
• 確認ダイアログ
• 選択ダイアログ

8. © 2017 @nuits_jp
What is Prism?
• XAML Application Framework
• Guidance
• Patterns & Practices
• Testable & Maintainable
• Open Source
• .NET Foundation

9. © 2017 @nuits_jp
What do you get?
• MVVM Support
• Commanding
• Messaging
• Navigation
• Page Dialog Service
• Dependency Injection
• Logging

10. © 2017 @nuits_jp
What do you get?
• MVVM Support
• Commanding
• Messaging
• Navigation
• Page Dialog Service
• Dependency Injection
• Logging

11. © 2017 @nuits_jp
What is Prism?
• XAML Application Framework
• Guidance
• Patterns & Practices
• Testable & Maintainable
• Open Source
• .NET Foundation

12. © 2017 @nuits_jp
MVVMパターンとは

13. © 2017 @nuits_jp
よくみかけるMVVMの図
Binding &
Command
Update
NotificationNotification

14. © 2017 @nuits_jp
MVVM is 何

15. © 2017 @nuits_jp
MVVM is PDS
Presentaion Domain Separation：PDS

16. © 2017 @nuits_jp
PDS is SoC
Separation of Concerns：SoC
Presentaion Domain Separation：PDS

17. © 2017 @nuits_jp
SoC Overview
Separation of Concerns：SoC
Presentaion Domain Separation：PDSInversion of Control：IoC

18. © 2017 @nuits_jp
よくみかけるMVVMの図
Binding &
Command
Update
NotificationNotification

19. © 2017 @nuits_jp
よくみかけるMVVMの図
Binding &
Command
Update
NotificationNotification
プレゼンテーション その他

20. © 2017 @nuits_jp
実際の割合
Binding &
Command
Update
NotificationNotification
プレゼンテー
ション
その他

21. © 2017 @nuits_jp
Mobile & Cross Platform開発
Modelにも
• 専門性の高い領域
• テストが難しい領域
が多数存在します

22. © 2017 @nuits_jp
Mobile & Cross Platformは課題の山
• プラットフォーム依存領域
• 時間
• 非同期処理
• プッシュ通知
• センサー類（位置情報、加速度、カメラ）

23. © 2017 @nuits_jp
Why Prism for Xamarin.Forms
• PrismはMVVMの課題だけでなく、これらの課題に対しても、ガ
イダンスを提供します
• Prismはアプリケーションを開発する上での、パターンとプラク
ティスの集合です
• そしてこれらは、テスト容易性と保守容易性を提供します

24. © 2017 @nuits_jp
MVVMのM
Binding &
Command
Update
NotificationNotification
プレゼンテー
ション
その他

25. © 2017 @nuits_jp
MVVMのM

26. © 2017 @nuits_jp
MVVMのMの原則
Binding &
Command
Update /
public Task Foo()
NotificationNotification
プレゼンテーション その他
1. ViewModelはModelの影（そしてまたViewはViewModelの影）
2. ModelについてViewModelが行うことは、イベントに対する反応と戻り値の
ないメソッドの呼び出ししかない事
出典：http://ugaya40.hateblo.jp/entry/model-mistake

27. © 2017 @nuits_jp
なぜ戻り値はTask縛りなのか？
読書中の書籍というModelがあり、ある視点から見ると目次というViewと
して表現され
別の視点から見ると本文のテキスト画面というViewとして表現される。

28. © 2017 @nuits_jp
MVVMのM どう整理する？
Binding &
Command
Update
NotificationNotification
プレゼンテーション その他
？ ？ ？

29. © 2017 @nuits_jp
BlueMonkeyのレイヤーアーキテクチャ
View
ViewModel
Model

30. © 2017 @nuits_jp
What is Usecase？
Usecase：経費を登録する
Usecaseとは、利用者にたいしてアプリ（システム）が提供する本質的な価値のこと
「それ」を終えた後、アプリ（システム）から離れてもよい単位と考えると分かりやすい

31. © 2017 @nuits_jp
BlueMonkeyのレイヤーアーキテクチャ
View
ViewModel
Model
【Usecase】
画面遷移間にまたがって状態を維持する
ドメインロジックをカプセル化する
• 経費を登録する
• 経費を閲覧する
• レポートを登録する
• レポートを閲覧する
【Service】
Usecaseを実現する為の、「機能」を提供する
• ExpenseService（バックエンドの通信クライ
アント）
• LoginService
• MediaService
• TimeService

32. © 2017 @nuits_jp
オフライン同期を考慮する
View
ViewModel
Model
UsecaseとServiceの間に
• オフライン同期
• キャッシュ
などを透過的に制御する層が欲しい。
バックエンドの実装から大きく影響を受け
るため、Usecaseに対して実装を隠蔽した
い。
要検討

33. © 2017 @nuits_jp
Blue monkey コンポーネント図

34. © 2017 @nuits_jp
BlueMonkeyコンポーネント図
cmp Component Model
BlueMonkey
ViewModelsViews Models
Services
Views ViewModels Usecases
ExpenseServices LoginService
MediaServices TimeService
Application
DroidiOS
BlueMonkey Transaction
Transaction.Unity

35. © 2017 @nuits_jp
BlueMonkeyコンポーネント図
cmp Component Model
BlueMonkey
ViewModelsViews Models
Services
Views ViewModels Usecases
ExpenseServices LoginService
MediaServices TimeService
Application
DroidiOS
BlueMonkey Transaction
Transaction.Unity

36. © 2017 @nuits_jp
BlueMonkeyコンポーネント図
cmp Component Model
BlueMonkey
ViewModelsViews Models
Services
Views ViewModels Usecases
ExpenseServices LoginService
MediaServices TimeService
Application
DroidiOS
BlueMonkey Transaction
Transaction.Unity

37. © 2017 @nuits_jp
BlueMonkeyコンポーネント図
cmp Component Model
BlueMonkey
ViewModelsViews Models
Services
Views ViewModels Usecases
ExpenseServices LoginService
MediaServices TimeService
Application
DroidiOS
BlueMonkey Transaction
Transaction.Unity

38. © 2017 @nuits_jp
BlueMonkeyコンポーネント図
cmp Component Model
BlueMonkey
ViewModelsViews Models
Services
Views ViewModels Usecases
ExpenseServices LoginService
MediaServices TimeService
Application
DroidiOS
BlueMonkey Transaction
Transaction.Unity

39. © 2017 @nuits_jp
BlueMonkeyコンポーネント図
cmp Component Model
BlueMonkey
ViewModelsViews Models
Services
Views ViewModels Usecases
ExpenseServices LoginService
MediaServices TimeService
Application
DroidiOS
BlueMonkey Transaction
Transaction.Unity

40. © 2017 @nuits_jp
BlueMonkeyコンポーネント図
cmp Component Model
BlueMonkey
ViewModelsViews Models
Services
Views ViewModels Usecases
ExpenseServices LoginService
MediaServices TimeService
Application
DroidiOS
BlueMonkey Transaction
Transaction.Unity

41. © 2017 @nuits_jp
Transaction？
Usecase：経費を登録する
Usecaseオブジェクトのライフサイクルを管理する仕組み

42. © 2017 @nuits_jp
コードを見てみましょう！

43. © 2017 @nuits_jp
制約事項

44. © 2017 @nuits_jp
現在未完了の領域
• ユーザーインターフェースへのデザインの適用
• オフライン同期、キャッシュ制御のアーキテクチャの提示
• 検索結果のページング処理
など

45. © 2017 @nuits_jp
Xamarin 技術同人誌 出します！
• う-13 「Xamaritans」
• 超技術書典（in ニコニコ長会議2017）でも