Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Fabulous is Fabulous
Search
omanuke
August 31, 2019
Programming
0
400
Fabulous is Fabulous
about Fabulous library
omanuke
August 31, 2019
Tweet
Share
More Decks by omanuke
See All by omanuke
ElixirとWeb初心者がLiveView初めて触ってみた
omanuke
0
100
Other Decks in Programming
See All in Programming
GitHub Actionsで泣かないためにやっておきたい設定 / Recommended GHA settings to avoid crying
pinkumohikan
3
530
Rethinking UI building strategies @ SFI 2024
letelete
0
270
try! Swift Tokyo 2024 参加報告 / try! Swift Tokyo 2024 Report
hironytic
0
200
検証も兼ねて個人開発でHonoとかと向き合った話
hanetsuki
0
680
Zero Waste, Radical Magic, and Italian Graft – Quarkus Efficiency Secrets
hollycummins
0
230
冗長なエラーログを削減し、スタックトレースを手に入れる / Reducing Verbose Error Logs and Obtaining Stack Traces
upamune
0
400
Snowflakeで眠ったデータを起こそう!
estie
0
110
What We Can Learn From OSS
inouehi
0
420
Random\Randomizer クラスで日常のあれこれを解決しよう! / Random\Randomizer class solves familiar trouble
cocoeyes02
0
200
Prepare for Jakarta EE 11 - Performance and Developer Productivity
ivargrimstad
0
710
DMMプラットフォームがTiDB Cloudを採用した背景
pospome
8
4k
1BRC--Nerd Sniping the Java Community
gunnarmorling
0
340
Featured
See All Featured
Writing Fast Ruby
sferik
621
60k
Infographics Made Easy
chrislema
238
18k
From Idea to $5000 a Month in 5 Months
shpigford
377
45k
Unsuck your backbone
ammeep
663
57k
Automating Front-end Workflow
addyosmani
1356
200k
Teambox: Starting and Learning
jrom
128
8.4k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
25
2.3k
Music & Morning Musume
bryan
41
5.6k
Design by the Numbers
sachag
274
18k
How GitHub Uses GitHub to Build GitHub
holman
468
290k
What’s in a name? Adding method to the madness
productmarketing
PRO
16
2.6k
Building Adaptive Systems
keathley
31
1.9k
Transcript
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警察も怖くない