Slide 1

Slide 1 text

Fabulous is Fabulous

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

MVUのコード

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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