Upload
atsushi-nakamura
View
321
Download
4
Embed Size (px)
Citation preview
© 2017 @nuits_jp
Blue MonkeyArchitecture Overview
2017.03.14
© 2017 @nuits_jp 2
中村 充志 / 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.
自己紹介
© 2017 @nuits_jp
はじめに
© 2017 @nuits_jp
BlueMonkey プロジェクトのゴール
【ゴール】一定規模のチーム開発に耐えうるアーキテクチャのリファレンス実装の提案
【重視しているポイント】• テスト容易性・変更容易性の確保• クロスプラットフォーム対応• 特定バックエンドへの非依存
© 2017 @nuits_jp
アーキテクチャ上のキーワード
• Prism for Xamarin.Forms • MVVM Pattern • MVVM の M
© 2017 @nuits_jp
Prism for Xamarin.Forms
© 2017 @nuits_jp
MVVM パターンで辛くなりがちな点
View ViewModel Model
Binding &Command Update
Notification
Notification
• 画面遷移• 確認ダイアログ• 選択ダイアログ
© 2017 @nuits_jp
What is Prism?• XAML Application Framework• Guidance• Patterns & Practices• Testable & Maintainable• Open Source• .NET Foundation
© 2017 @nuits_jp
What do you get?• MVVM Support• Commanding• Messaging• Navigation• Page Dialog Service• Dependency Injection• Logging
© 2017 @nuits_jp
What do you get?• MVVM Support• Commanding• Messaging• Navigation• Page Dialog Service• Dependency Injection• Logging
© 2017 @nuits_jp
What is Prism?• XAML Application Framework• Guidance• Patterns & Practices• Testable & Maintainable• Open Source• .NET Foundation
© 2017 @nuits_jp
MVVM パターンとは
© 2017 @nuits_jp
よくみかける MVVM の図
View ViewModel Model
Binding &Command Update
Notification
Notification
© 2017 @nuits_jp
MVVM is 何
MVVM
© 2017 @nuits_jp
MVVM is PDS
MVVM MVPVM MVC
Presentaion Domain Separation :PDS
© 2017 @nuits_jp
PDS is SoC
MVVM MVPVM MVC
Separation of Concerns : SoC
Presentaion Domain Separation :PDS
© 2017 @nuits_jp
SoC Overview
MVVM MVPVM MVC
Separation of Concerns : SoC
Presentaion Domain Separation :PDS
Inversion of Control :IoC
Dependency Injection
: DI
Service Locator
© 2017 @nuits_jp
よくみかける MVVM の図
View ViewModel Model
Binding &Command Update
Notification
Notification
© 2017 @nuits_jp
よくみかける MVVM の図
View ViewModel Model
Binding &Command Update
Notification
Notification
プレゼンテーション その他
© 2017 @nuits_jp
実際の割合
View
ViewMode
l
Application-Presentation
=Model
Binding &Command Update
Notification
Notification
プレゼンテーション
その他
© 2017 @nuits_jp
Mobile & Cross Platform 開発
Model にも• 専門性の高い領域• テストが難しい領域が多数存在します
© 2017 @nuits_jp
Mobile & Cross Platform は課題の山
• プラットフォーム依存領域• 時間• 非同期処理• プッシュ通知• センサー類(位置情報、加速度、カメラ)
© 2017 @nuits_jp
Why Prism for Xamarin.Forms• Prism は MVVM の課題だけでなく、これらの課題に対しても、
ガイダンスを提供します• Prism はアプリケーションを開発する上での、パターンとプラ
クティスの集合です• そしてこれらは、テスト容易性と保守容易性を提供します
© 2017 @nuits_jp
MVVM の M
View
ViewMode
l
Application-Presentation
=Model
Binding &Command Update
Notification
Notification
プレゼンテーション
その他
© 2017 @nuits_jp
MVVM の M
© 2017 @nuits_jp
MVVM の M の原則
26
View
ViewMode
l
Application-Presentation
=Model
Binding &Command
Update / public Task
Foo()
Notification
Notification
プレゼンテーション その他
1. ViewModel は Model の影(そしてまた View は ViewModel の影)2. Model について ViewModel が行うことは、イベントに対する反応と戻り
値のないメソッドの呼び出ししかない事出典: http://ugaya40.hateblo.jp/entry/model-mistake
© 2017 @nuits_jp
なぜ戻り値は Task 縛りなのか?
読書中の書籍という Model があり、ある視点から見ると目次というView として表現され別の視点から見ると本文のテキスト画面という View として表現される。
© 2017 @nuits_jp
MVVM の M どう整理する?
View
ViewMode
l
Application-Presentation
=Model
Binding &Command Update
Notification
Notification
プレゼンテーション その他
? ? ?
© 2017 @nuits_jp
BlueMonkey のレイヤーアーキテクチャ
View
ViewModel
ModelUsecase
Service
© 2017 @nuits_jp
What is Usecase ?
Usecase :経費を登録する
Usecase とは、利用者にたいしてアプリ(システム)が提供する本質的な価値のこと「それ」を終えた後、アプリ(システム)から離れてもよい単位と考えると分かりやすい
© 2017 @nuits_jp
BlueMonkey のレイヤーアーキテクチャ
View
ViewModel
ModelUsecase
Service
【 Usecase】画面遷移間にまたがって状態を維持するドメインロジックをカプセル化する• 経費を登録する• 経費を閲覧する• レポートを登録する• レポートを閲覧する
【 Service 】Usecase を実現する為の、「機能」を提供する• ExpenseService (バックエンドの通信ク
ライアント)• LoginService• MediaService• TimeService
© 2017 @nuits_jp
オフライン同期を考慮する
View
ViewModel
ModelUsecase
Service
Usecase と Service の間に• オフライン同期• キャッシュなどを透過的に制御する層が欲しい。
バックエンドの実装から大きく影響を受けるため、 Usecase に対して実装を隠蔽したい。
要検討
Repository ?
© 2017 @nuits_jp
Blue monkey コンポーネント図
© 2017 @nuits_jp
BlueMonkey コンポーネント図cmp Component Model
BlueMonkey
ViewModelsViews Models
Services
Views ViewModels Usecases
ExpenseServices LoginService
MediaServices TimeService
Application
DroidiOS
BlueMonkey Transaction
Transaction.Unity
© 2017 @nuits_jp
BlueMonkey コンポーネント図cmp Component Model
BlueMonkey
ViewModelsViews Models
Services
Views ViewModels Usecases
ExpenseServices LoginService
MediaServices TimeService
Application
DroidiOS
BlueMonkey Transaction
Transaction.Unity
© 2017 @nuits_jp
BlueMonkey コンポーネント図cmp Component Model
BlueMonkey
ViewModelsViews Models
Services
Views ViewModels Usecases
ExpenseServices LoginService
MediaServices TimeService
Application
DroidiOS
BlueMonkey Transaction
Transaction.Unity
© 2017 @nuits_jp
BlueMonkey コンポーネント図cmp Component Model
BlueMonkey
ViewModelsViews Models
Services
Views ViewModels Usecases
ExpenseServices LoginService
MediaServices TimeService
Application
DroidiOS
BlueMonkey Transaction
Transaction.Unity
© 2017 @nuits_jp
BlueMonkey コンポーネント図cmp Component Model
BlueMonkey
ViewModelsViews Models
Services
Views ViewModels Usecases
ExpenseServices LoginService
MediaServices TimeService
Application
DroidiOS
BlueMonkey Transaction
Transaction.Unity
© 2017 @nuits_jp
BlueMonkey コンポーネント図cmp Component Model
BlueMonkey
ViewModelsViews Models
Services
Views ViewModels Usecases
ExpenseServices LoginService
MediaServices TimeService
Application
DroidiOS
BlueMonkey Transaction
Transaction.Unity
© 2017 @nuits_jp
BlueMonkey コンポーネント図cmp Component Model
BlueMonkey
ViewModelsViews Models
Services
Views ViewModels Usecases
ExpenseServices LoginService
MediaServices TimeService
Application
DroidiOS
BlueMonkey Transaction
Transaction.Unity
© 2017 @nuits_jp
Transaction ?
Usecase :経費を登録する
Usecase オブジェクトのライフサイクルを管理する仕組み
© 2017 @nuits_jp
コードを見てみましょう!
© 2017 @nuits_jp
制約事項
© 2017 @nuits_jp
現在未完了の領域• ユーザーインターフェースへのデザインの適用• オフライン同期、キャッシュ制御のアーキテクチャの提示• 検索結果のページング処理
など
© 2017 @nuits_jp
Xamarin 技術同人誌 出します!
• う -13 「 Xamaritans 」• 超技術書典( in ニコニコ長会議 2017 )でも