Xamarin.Forms とコンソールアプリでモデル層 を共通化してみた まどすた #2 2017/03/11 Yuka Abuno

@yu_ka1984 Yuka Abuno http://tamafuyou.hatenablog.com/ シグマコンサルティング株式会社 アーキテクト になることが目標

初めてXamarin.Formsを使ったスマホアプリプロジェクトは WPFアプリをスマホで使えるようにするプロジェクトでした。 ほとんどコード共通化できなかった(´・ω・`)

.NET Frameworkで書けるクライアントアプリ 2010年当時 現在 ▪ コンソールアプリ ▪ Windows Forms (まだまだ現役!(^^)!) ▪ WPF ▪ UWP ▪ Xamarin Mac ▪ Xamarin Android ▪ Xamarin iOS ▪ Unity ▪ erc ▪ コンソールアプリ ▪ Windows Forms(当時も現役!(^^)!) ▪ WPF ▪ Mono Gtk# ▪ SilverLight

Xamarin開発だけでも Xamarin.Formsを使ってクロスプラットフォーム開発 UIも共通コードで爆速＼(^o^)／ Xamarin Nativeで各プラットフォーム毎に Nativeと同じ実装方法で 最適なUIを目指して開発 一つのプロダクトでXFとXNの２タイプの開発を行うこともあり得る。

これからの.NETアプリ開発は マルチプラットフォーム開発を通り越して マルチタイプ開発が前提になる かもしれない・・・

C#のGUIアプリは Model – View – Whatever Ｍ V C P VM Ｍ V Ｍ V

VM fat VM Ｍ V Model層にある関数をコールして 戻り値を受け取ってＶＭに反映 VMでロジックが書かれている VM fat

マルチタイプ what ever Ｍ V クライアントGUIタイプ コマンド CLIタイプ タイプが違っても共通化で きるのるはモデル層 • バックエンド • ハードウェアデバイス • インフラ

モデル層は入出力をつなげたら動く タイプに依存しないアプリケーションそのもの

アプリケーションそのものなモデル層は コンソールアプリでも使えるはず

簡単なチャットアプリを作ってみました。 http://websocketscaletest1.azurewebsites.net/ ASP.NET Core の WebSocketとスケールアウトを検証する ために作ったブラウザサンプルアプリ。 バックエンド -> • Azure WebApps • ASP.NET Core • ASP.NET WebSocet Server • Azure ServiceBus フロントエンド-> • Vue.js (JavaScript MVVM フレームワーク) フロントエンドを コンソールアプリ Xamarin.Forms(Android/iOS) で作成 Xamarin.Forms とコンソールアプリでモデル層を共通化して

Visual Studio 2017 RC ChatSample クラスライブラリ(.NET Standard) App1 Xamarin.Forms ( Shared ) ConsoleApp1 コンソールアプリ(.NET Core) https://github.com/yuka1984/ChatXFSample

ChatServiceクラス 入力 非同期メソッド • LoadRoomsAsync • JoinRoomAasync • ExitRoomAsync • SendMessageAsync 出力 • INotifyPropertyChanged(BindableBase) • INotifyCollectionChanged (ReadOnlyObservableCollection) • ErrorEventHandler 入力 状態変更通知

インスタンス管理 アプリケーションを構成するためのモデル層のインスタンスを提供する事はモ デル層の責務 コンテナーを使ってアプリに必要なモデル層のインスタンスをモデル層で構築 して引き出せるようにする。 Repositoryクラスやプラットフォーム依存となるようなクラスはInterfaceを 作成して差し替えられるようにする

Xamarin.Formsの場合 ▪ MVVM ▪ ViewModelクラスとViewクラスは基本的に１対１の関係(例外あり) ▪ ViewModelクラスとServiceクラスはＮ対Nの関係 ▪ ReactivePropertyを使用することでサービスクラスの変更通知に対する ViewModelのプロパティへの反映を行う V M V M V M V V V Ｓ Ｓ Ｓ

ReactiveProperty モデル側の プロパティ VM側のプ ロパティ Rx public RoomModel SelectedRoom{ get { return selectedRoom; } private set { this.SetProperty(ref this.selectedRoom, value); } } public string UserName { get { return username; } private set { this.SetProperty(ref this.username, value); } } ReadOnlyReactiveProperty Title = service.ObserveProperty(x => x.SelectedRoom).Select(x => x?.Name) .CombineLatest( service.ObserveProperty(x => x.UserName), (roomname, username) => $"{username} - {roomname}" ) .ToReadOnlyReactiveProperty();

コンソールアプリの場合 ▪ ごりごり実装してみました ▪ サービスクラスの変更通知はイベントで受信してコンソール出力へ反映

まとめ ▪ これからの.NETクライアント開発はマルチプラットフォームに加えてマルチタイプ開発を 意識すると良いかもしれない ▪ モデル層はアプリケーションそのもの ▪ .NETプログラマにマルチプラットフォーム/マルチタイプ開発な環境を用意してくれて、 様々なプラットフォーム開発の知識やデザインパターンの勉強をさせてくれる凄い人た ちに 感謝っ・・・・！ 圧倒的感謝っ・・・・！

ご清聴ありがとうございました。