Fabulous is Fabulous 

自己紹介 宮坂雅彦 @omanuke トレードワークスという証券システムを作ってる会社 でチャートやスマホアプリを作ってます。 F#大好き 最近はUnityがメイン。 

Fabulousとは ⚫FabulousはMVUアーキテクチャを 使ってXamarin.Formsアプリを開発 するためのライブラリ。 ⚫ElmアーキテクチャをF#で実装し たElmishの一つのバリエーション。 ⚫ElmishはFableというF#のAltJSで ElmのようにMVUスタイルでアプリ を書けるようにしたもの。 

Elmとは ⚫Haskellを簡略化したような純粋関数型の言語でWebフロ ントエンドを作る事の出来る言語・開発環境。 ⚫Model-View-Update(=The Elm Architecture=TEA) ⚫速い・軽い・環境構築が簡単 ⚫事実上一切の実行時例外が起こらない ⚫もともとはFRPを使っていたけれどReactの仮想DOMを参 考にしてMVU(TEA)にアーキテクチャを変更、それを参考に Fluxが作られた。 

MVU Model View Update Msg これらを副作用を含まない純粋関数で行う 

MVUのコード 

Model：アプリケーションの状態 Msg：Modelを変更するメッセージ Update：メッセージにより今のModel を次の状態にアップデートする View：Modelの状態によ りViewを生成 Program/App：以上をつなげて アプリケーションにする 

プログラムループ メッセージを受けて現在のモデルか ら次の状態を作りそれをもとにView を更新。 更新されたモデルより新しいViewを 作り必要に応じてXamarin.Formsの Pageを生成または更新。 

View要素 view関数で定義してる ものはstaticメソッドの 呼び出し。戻り値として 次に説明する ViewElementを返す。 省略可能引数として定 義されているので必要 なものだけを設定。 設定された値は後で説 明するAttributeとなる。 

⚫ 生成されるType（生成されたXamarin.FormsのView要素を 再利用できるかなどに使用） ⚫ 必要に応じてXFのViewを生成するcreate ⚫ attributesの変更内容によりXFのViewのプロパティを設定 するupdate ⚫ 現在のattributesをもつView要素としての値 全ページのメソッドの戻り値にあたるもの 

Update 現在のAttributes読み込み 前のAttributes読み込み 値を比べてXFのViewに値 を設定 前の値と現在の値で比較 Baseクラスの更新 

要素数が変わっていたら クリアや削除 追加されたり別のTypeのXFのViewとなる ものならば新しくXFのViewを生成・挿入な どを行いつつ値を更新する 

動作速度は大丈夫? ⚫View関数などは純粋関数なのでModelからViewを生成する場 合、キャッシュを使える(dependsOn) ⚫更新される際はViewElementの参照比較や値比較などを行い 必要なければその先は更新しない。これも値がイミュータブルな ので動作は保証される。 ⚫そもそもUI系で遅いのはたいてい実際にUIを弄るところでロ ジック部ではないことが多い。すでにElmやReactなどで仮想 DOM系の実装速度は結構いけることは立証されていると思う。 ⚫もちろん場合によってはパフォーマンスに問題生じることもある かもしれないけれどかなりの部分までは大丈夫なのでは。 

LabelをButtonに変更 (当然別インスタンス) 変更ないので前のイン スタンスのまま 子要素が変わったので値 の違う別インスタンス インスタンスはそのままだが 子要素が変更されている LabelをButtonに 変えたのでButton に置き換えられた インスタンスに変更な いので更新処理走らず そのまま ViewElement Xamarin.Forms 

他気になるところ ⚫ナビゲーションやポップアップ、TabやMasterDetailなどは？ →仕組みある。サンプルもある。 ⚫いうても仮想DOMしか扱えないと困るんじゃ? →XFのViewに直接触れるようにする仕組みある(ref)。アニメーションとかはそれで。 ⚫見た目やスタイルは? → ShellForegroundColorとかいじれる。あとはCSSとか？ ⚫カスタムコントロールは？ →View.StackLayoutでやってるようなコードを自分で書けばいい。ライブラリの中に SkiaSharpやMapなどでそうやって実装してる(Extension) ⚫SQLiteとかWebリクエストとかどうするの？ →Commandという仕組みある。それで外部とやり取りして結果をメッセージにして Modelに反映させる。 

まとめ ⚫結構いろんなことまでできるんじゃないですか ね？ ⚫純粋関数型でUIを書いてみることで状態を排除 することの利点なども感じられると思うしMVUを MVVMでのModelとVMの関係などにも応用効くの ではとも思うのでぜひ試してみては ⚫C#とXAMLで疲弊してるならFしゃ文字数 ⚫もうMVVM警察も怖くない