Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
© 2017 @nuits_jp
Blue Monkey
Architecture Overview
2017.03.14
© 2017 @nuits_jp
中村 充志 / Atsushi Nakamura
• Enterprise系アプリケーションアーキテクト
• Prism for WPFを仕事にて活用
• Xamarinを仕事にしたくて奮闘中
• Micros...
© 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パターンで辛くなりがちな点
Binding &
Command
Update
NotificationNotification
• 画面遷移
• 確認ダイアログ
• 選択ダイアログ
© 2017 @nuits_jp
What is Prism?
• XAML Application Framework
• Guidance
• Patterns & Practices
• Testable & Maintainable
•...
© 2017 @nuits_jp
What do you get?
• MVVM Support
• Commanding
• Messaging
• Navigation
• Page Dialog Service
• Dependency ...
© 2017 @nuits_jp
What do you get?
• MVVM Support
• Commanding
• Messaging
• Navigation
• Page Dialog Service
• Dependency ...
© 2017 @nuits_jp
What is Prism?
• XAML Application Framework
• Guidance
• Patterns & Practices
• Testable & Maintainable
•...
© 2017 @nuits_jp
MVVMパターンとは
© 2017 @nuits_jp
よくみかけるMVVMの図
Binding &
Command
Update
NotificationNotification
© 2017 @nuits_jp
MVVM is 何
© 2017 @nuits_jp
MVVM is PDS
Presentaion Domain Separation:PDS
© 2017 @nuits_jp
PDS is SoC
Separation of Concerns:SoC
Presentaion Domain Separation:PDS
© 2017 @nuits_jp
SoC Overview
Separation of Concerns:SoC
Presentaion Domain Separation:PDSInversion of Control:IoC
© 2017 @nuits_jp
よくみかけるMVVMの図
Binding &
Command
Update
NotificationNotification
© 2017 @nuits_jp
よくみかけるMVVMの図
Binding &
Command
Update
NotificationNotification
プレゼンテーション その他
© 2017 @nuits_jp
実際の割合
Binding &
Command
Update
NotificationNotification
プレゼンテー
ション
その他
© 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
Binding &
Command
Update
NotificationNotification
プレゼンテー
ション
その他
© 2017 @nuits_jp
MVVMのM
© 2017 @nuits_jp
MVVMのMの原則
Binding &
Command
Update /
public Task Foo()
NotificationNotification
プレゼンテーション その他
1. ViewMode...
© 2017 @nuits_jp
なぜ戻り値はTask縛りなのか?
読書中の書籍というModelがあり、ある視点から見ると目次というViewと
して表現され
別の視点から見ると本文のテキスト画面というViewとして表現される。
© 2017 @nuits_jp
MVVMのM どう整理する?
Binding &
Command
Update
NotificationNotification
プレゼンテーション その他
? ? ?
© 2017 @nuits_jp
BlueMonkeyのレイヤーアーキテクチャ
View
ViewModel
Model
© 2017 @nuits_jp
What is Usecase?
Usecase:経費を登録する
Usecaseとは、利用者にたいしてアプリ(システム)が提供する本質的な価値のこと
「それ」を終えた後、アプリ(システム)から離れてもよい単位と...
© 2017 @nuits_jp
BlueMonkeyのレイヤーアーキテクチャ
View
ViewModel
Model
【Usecase】
画面遷移間にまたがって状態を維持する
ドメインロジックをカプセル化する
• 経費を登録する
• 経費を...
© 2017 @nuits_jp
オフライン同期を考慮する
View
ViewModel
Model
UsecaseとServiceの間に
• オフライン同期
• キャッシュ
などを透過的に制御する層が欲しい。
バックエンドの実装から大きく影響...
© 2017 @nuits_jp
Blue monkey コンポーネント図
© 2017 @nuits_jp
BlueMonkeyコンポーネント図
cmp Component Model
BlueMonkey
ViewModelsViews Models
Services
Views ViewModels Usecas...
© 2017 @nuits_jp
BlueMonkeyコンポーネント図
cmp Component Model
BlueMonkey
ViewModelsViews Models
Services
Views ViewModels Usecas...
© 2017 @nuits_jp
BlueMonkeyコンポーネント図
cmp Component Model
BlueMonkey
ViewModelsViews Models
Services
Views ViewModels Usecas...
© 2017 @nuits_jp
BlueMonkeyコンポーネント図
cmp Component Model
BlueMonkey
ViewModelsViews Models
Services
Views ViewModels Usecas...
© 2017 @nuits_jp
BlueMonkeyコンポーネント図
cmp Component Model
BlueMonkey
ViewModelsViews Models
Services
Views ViewModels Usecas...
© 2017 @nuits_jp
BlueMonkeyコンポーネント図
cmp Component Model
BlueMonkey
ViewModelsViews Models
Services
Views ViewModels Usecas...
© 2017 @nuits_jp
BlueMonkeyコンポーネント図
cmp Component Model
BlueMonkey
ViewModelsViews Models
Services
Views ViewModels Usecas...
© 2017 @nuits_jp
Transaction?
Usecase:経費を登録する
Usecaseオブジェクトのライフサイクルを管理する仕組み
© 2017 @nuits_jp
コードを見てみましょう!
© 2017 @nuits_jp
制約事項
© 2017 @nuits_jp
現在未完了の領域
• ユーザーインターフェースへのデザインの適用
• オフライン同期、キャッシュ制御のアーキテクチャの提示
• 検索結果のページング処理
など
© 2017 @nuits_jp
Xamarin 技術同人誌 出します!
• う-13 「Xamaritans」
• 超技術書典(in ニコニコ長会議2017)でも
Upcoming SlideShare
Loading in …5
×

Blue monkey architecture overview

1,016 views

Published on

Blue monkey architecture overview

Published in: Engineering
  • Be the first to comment

Blue monkey architecture overview

  1. 1. © 2017 @nuits_jp Blue Monkey Architecture Overview 2017.03.14
  2. 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. 3. © 2017 @nuits_jp はじめに
  4. 4. © 2017 @nuits_jp BlueMonkeyプロジェクトのゴール 【ゴール】 一定規模のチーム開発に耐えうる アーキテクチャのリファレンス実装の提案 【重視しているポイント】 • テスト容易性・変更容易性の確保 • クロスプラットフォーム対応 • 特定バックエンドへの非依存
  5. 5. © 2017 @nuits_jp アーキテクチャ上のキーワード • Prism for Xamarin.Forms • MVVM Pattern • MVVMのM
  6. 6. © 2017 @nuits_jp Prism for Xamarin.Forms
  7. 7. © 2017 @nuits_jp MVVMパターンで辛くなりがちな点 Binding & Command Update NotificationNotification • 画面遷移 • 確認ダイアログ • 選択ダイアログ
  8. 8. © 2017 @nuits_jp What is Prism? • XAML Application Framework • Guidance • Patterns & Practices • Testable & Maintainable • Open Source • .NET Foundation
  9. 9. © 2017 @nuits_jp What do you get? • MVVM Support • Commanding • Messaging • Navigation • Page Dialog Service • Dependency Injection • Logging
  10. 10. © 2017 @nuits_jp What do you get? • MVVM Support • Commanding • Messaging • Navigation • Page Dialog Service • Dependency Injection • Logging
  11. 11. © 2017 @nuits_jp What is Prism? • XAML Application Framework • Guidance • Patterns & Practices • Testable & Maintainable • Open Source • .NET Foundation
  12. 12. © 2017 @nuits_jp MVVMパターンとは
  13. 13. © 2017 @nuits_jp よくみかけるMVVMの図 Binding & Command Update NotificationNotification
  14. 14. © 2017 @nuits_jp MVVM is 何
  15. 15. © 2017 @nuits_jp MVVM is PDS Presentaion Domain Separation:PDS
  16. 16. © 2017 @nuits_jp PDS is SoC Separation of Concerns:SoC Presentaion Domain Separation:PDS
  17. 17. © 2017 @nuits_jp SoC Overview Separation of Concerns:SoC Presentaion Domain Separation:PDSInversion of Control:IoC
  18. 18. © 2017 @nuits_jp よくみかけるMVVMの図 Binding & Command Update NotificationNotification
  19. 19. © 2017 @nuits_jp よくみかけるMVVMの図 Binding & Command Update NotificationNotification プレゼンテーション その他
  20. 20. © 2017 @nuits_jp 実際の割合 Binding & Command Update NotificationNotification プレゼンテー ション その他
  21. 21. © 2017 @nuits_jp Mobile & Cross Platform開発 Modelにも • 専門性の高い領域 • テストが難しい領域 が多数存在します
  22. 22. © 2017 @nuits_jp Mobile & Cross Platformは課題の山 • プラットフォーム依存領域 • 時間 • 非同期処理 • プッシュ通知 • センサー類(位置情報、加速度、カメラ)
  23. 23. © 2017 @nuits_jp Why Prism for Xamarin.Forms • PrismはMVVMの課題だけでなく、これらの課題に対しても、ガ イダンスを提供します • Prismはアプリケーションを開発する上での、パターンとプラク ティスの集合です • そしてこれらは、テスト容易性と保守容易性を提供します
  24. 24. © 2017 @nuits_jp MVVMのM Binding & Command Update NotificationNotification プレゼンテー ション その他
  25. 25. © 2017 @nuits_jp MVVMのM
  26. 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. 27. © 2017 @nuits_jp なぜ戻り値はTask縛りなのか? 読書中の書籍というModelがあり、ある視点から見ると目次というViewと して表現され 別の視点から見ると本文のテキスト画面というViewとして表現される。
  28. 28. © 2017 @nuits_jp MVVMのM どう整理する? Binding & Command Update NotificationNotification プレゼンテーション その他 ? ? ?
  29. 29. © 2017 @nuits_jp BlueMonkeyのレイヤーアーキテクチャ View ViewModel Model
  30. 30. © 2017 @nuits_jp What is Usecase? Usecase:経費を登録する Usecaseとは、利用者にたいしてアプリ(システム)が提供する本質的な価値のこと 「それ」を終えた後、アプリ(システム)から離れてもよい単位と考えると分かりやすい
  31. 31. © 2017 @nuits_jp BlueMonkeyのレイヤーアーキテクチャ View ViewModel Model 【Usecase】 画面遷移間にまたがって状態を維持する ドメインロジックをカプセル化する • 経費を登録する • 経費を閲覧する • レポートを登録する • レポートを閲覧する 【Service】 Usecaseを実現する為の、「機能」を提供する • ExpenseService(バックエンドの通信クライ アント) • LoginService • MediaService • TimeService
  32. 32. © 2017 @nuits_jp オフライン同期を考慮する View ViewModel Model UsecaseとServiceの間に • オフライン同期 • キャッシュ などを透過的に制御する層が欲しい。 バックエンドの実装から大きく影響を受け るため、Usecaseに対して実装を隠蔽した い。 要検討
  33. 33. © 2017 @nuits_jp Blue monkey コンポーネント図
  34. 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. 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. 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. 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. 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. 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. 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. 41. © 2017 @nuits_jp Transaction? Usecase:経費を登録する Usecaseオブジェクトのライフサイクルを管理する仕組み
  42. 42. © 2017 @nuits_jp コードを見てみましょう!
  43. 43. © 2017 @nuits_jp 制約事項
  44. 44. © 2017 @nuits_jp 現在未完了の領域 • ユーザーインターフェースへのデザインの適用 • オフライン同期、キャッシュ制御のアーキテクチャの提示 • 検索結果のページング処理 など
  45. 45. © 2017 @nuits_jp Xamarin 技術同人誌 出します! • う-13 「Xamaritans」 • 超技術書典(in ニコニコ長会議2017)でも

×