F# Epoxy

(c) 2021 Kouji Matsui
F# Epoxy
2021.5.22 FUN FAN F#
- KOUJI MATSUI @KEKYO2, @KOZY_KEKYO

View Slide

Kouji Matsui – kozy, kekyo
• NAGOYA city, AICHI pref., JP
• Twitter – @kekyo2, @kozy_kekyo
• Self employed (I’m looking for a job)
• Microsoft Most Valuable Professional VS
and DevTech 2015-
• Center CLR organizer.
• .NET/F#/IL/metaprogramming or like…
• Bicycle rider

View Slide

Agenda
Epoxyとは
EpoxyをF#で使うために
Epoxyがカバーする機能

View Slide

Epoxyとは
XAML MVVM (Model – View – ViewModel) アーキテクチャを実現
するための、補助ライブラリ
https://github.com/kekyo/Epoxy/
同様の既存実装:
◦ Prism
◦ LightMVVM
◦ ReactiveUI
◦ ReactiveProperty
◦ Etc…

View Slide

Epoxyとは
特徴:
C#, F#やそのほかの.NET処理系で使用出来る。
◦ 素の.NET SDK、VS, RiderなどのIDE
マルチプラットフォーム対応:
◦ WPF, UWP, Xamarin Forms, Avalonia, WinUI, Uno
◦ F#では、WPFとAvaloniaに対応
NuGetパッケージで導入出来て、特別な操作を必要としない。
シンプルな補助ライブラリで直交性がある。
完全に非同期処理対応。

View Slide

Epoxyとは
MVVM:

View Slide

Epoxyとは
MVVMを採用したい、一般的な動機と障害:
複雑に入り組んだコードを書きがち
◦ コードビハインドに逃げてしまう
◦ コードビハインドでは事実上書けない場合も…
MVVM実現のための道具が足りない
◦ INotifyPropertyChanged実装のようなボイラープレート
◦ CLRイベントの安全なフック（メモリリーク）
◦ メッセンジャーパターン面倒くさいしわかりにくい
◦ 安全な非同期処理（UnobservedTaskException）

View Slide

Epoxyとは
重量級フレームワークの習得コスト
◦ 使い始めると逃れられない
◦ アドホックに使えない
マルチプラットフォーム対応
◦ ターゲットにしたいプラットフォームで異なるフレームワークを使
わざるを得ない

View Slide

Epoxyとは
Demo:
D:¥Projects>mkdir epoxy_wpf_fsharp
D:¥Projects>cd epoxy_wpf_fsharp
D:¥Projects¥epoxy_wpf_fsharp>dotnet new -i Epoxy.Templates
復元対象のプロジェクトを決定しています...
C:¥Users¥k¥.templateengine¥dotnetcli¥v5.0.104¥scratch¥restore.csproj を復元しました (2.02 sec)。
D:¥Projects¥epoxy_wpf_fsharp>dotnet new epoxy-wpf -lang F#
The template "Epoxy.Wpf MVVM template" was created successfully.
D:¥Projects¥epoxy_wpf_fsharp>dotnet build
.NET 向け Microsoft (R) Build Engine バージョン 16.8.3+39993bd9d
Copyright (C) Microsoft Corporation.All rights reserved.
復元対象のプロジェクトを決定しています...
D:¥Projects¥epoxy_wpf_fsharp¥epoxy_wpf_fsharp.Core¥epoxy_wpf_fsharp.Core.fsproj を復元しました (439 ms)。
D:¥Projects¥epoxy_wpf_fsharp¥epoxy_wpf_fsharp¥epoxy_wpf_fsharp.fsproj を復元しました (3.17 sec)。

View Slide

Epoxyとは

View Slide

Epoxyとは
コンパクトであること:
◦ 小さいライブラリ（パッケージ）
◦ 小さい型（クラス・構造体）
◦ フレームワークとは呼べない構造を着地点に
シンプルであること:
◦ 複雑な構造ではない
◦ 複雑なインターフェイスではない
◦ 複雑な使用方法ではない
◦ 標準で非同期処理に対応

View Slide

Epoxyとは
直交性があること:
◦ 各機能を個別に使用出来る
◦ 各機能を自由に組み合わせる事が出来る
◦ 他のライブラリやフレームワークと組み合わせて使用出来る
副作用が少ないこと:
◦ 意図しない動作を生まない・生みにくい
◦ 連携して使用することが前提の機能にしない

View Slide

Epoxyとは
学習コストが低いこと:
◦ 手早く動かせること
◦ 覚えることが少ない
◦ 固有のアーキテクチャ、目新しい概念などを持ち込まない
◦ 誤った操作を行う事が出来ないか、行いにくい、または気が付く事が
出来るようにする
◦ F#固有: XAML/MVVM自体がOOPベースなので、あまり無理にFP側に寄
せない

View Slide

Agenda
Epoxyとは

View Slide

WPFとAvalonia
F#で便利に使えるように:
C#/F#混在プロジェクトでも機能する
camel-caseの関数名
F#型の直接サポート（関数型・Option）
既定の非同期型としてAsync型を使う
ViewModelインジェクタ
WPF XAMLページの自動リソース化

View Slide

C#/F#混在プロジェクトでも機能する
◦ インスタンス生成はファクトリで行う。
◦ 共通の型のインスタンスが生成される。
◦ メンバー（メソッド・関数）は、拡張メソッド・型拡張で。
※ NuGetパッケージは FSharp.Epoxy.Wpf や FSharp.Epoxy.Avaloniaですが、
実際はいくつかのパッケージに分割されています。
FSharp.Epoxy.Wpf
Epoxy.Wpf.Core
Epoxy.Build

View Slide

WPF XAMLページの自動リソース化
◦ WPFをF#で書く場合、C#のpartial classによるBAMLのロードと初期化が
出来ない。
◦ ワークアラウンドとして、XAMLのままリソースに保存して、ダイナ
ミックロードする手法がある。
◦ XAMLをBAMLにコンパイルしないで格納するには、ItemGroupでPageで
はなくResourceとしてビルドさせるようにする必要がある。
◦ 上記をNuGetパッケージ内で自動化。

View Slide

Agenda
Epoxyとは

View Slide

機能名概要
1. ViewModelインジェクタ ViewModelに必要なPropertyChangedイベントなどを、ビルド時に自動的に実
装出来る機能。
2. ViewModel基底クラス ViewModelに必要なPropertyChangedイベントなどを、オーソドックスな基底
クラスとして提供。
3. CommandFactory 任意の非同期関数を、ICommandとして利用できるようにする。
4. EventBinder 任意のXAMLコントロールのCLRイベントを、ICommandとしてバインディン
グ可能にする添付プロパティ。
5. Anchor/Pile 任意のXAMLコントロールを、一時的かつ安全にViewModelから参照出来るよ
うにする。
6. ValueConverter XAMLの値コンバーターの基底クラスを提供する。
7. UIThread UIスレッドの扱いを、プラットフォーム間で統一出来出来る。
8. GlobalService コンパクトな、依存注入のためのインフラ。非常に高速で単純。
9. Designer デザイン時編集をサポート。
それぞれの機能は独立しているため、自由に組み合わせて使用出来る。

View Slide

Epoxyがカバーする機能 (1)
1. ViewModelインジェクタ
◦ ビルド時にILインジェクションを行って、 ViewModelに必要な実装を自
動で行う。
◦ ViewModelAttributeを適用してビルドするだけ。
◦ 完全に自動化されていて、SDKのみ環境やCIでも使用OK（VSIX不要）。
◦ F#の記述としては、自動実装プロパティを使う。
◦ INotifyPropertyChanging
◦ INotifyPropertyChanged
◦ PrettyPrinter (ToString)

View Slide


View Slide

OnPropertyChangedに相当するフック:
◦ ダックタイピング

View Slide

2. ViewModel基底クラス
◦ オーソドックスな、ViewModelの基底クラス。
◦ ViewModelインジェクタと同様の実装を提供する。
◦ 但し、プロパティの実装は自分で記述する必要がある。

View Slide

3. CommandFactory
◦ ICommandを実装するクラスの提供。ボタンクリックなどに反応。
◦ Commandの呼び出しで関数にバイパスする (DelegateCommandに類す
る)。
◦ 引数型を指定可能（ジェネリック引数）。
◦ 関数は非同期前提（Asyncを返すことが前提）。

View Slide

4. EventBinder
◦ 任意のXAMLコントロールのCLRイベントを、ICommandとしてバイン
ディング可能にする添付プロパティ。
◦ Commandプロパティが提供されていない任意のイベントを、安全にバ
インディング出来る。

View Slide

Command側は、EventArgsを引数に取る関数として実装。

View Slide

ViewModel
5. Anchor/Pile
◦ XAML側のコントロールの完全な操作を、一時的に可能にする。
◦ コードビハインドを完全に排除出来る。メッセンジャー実装をView側
に書く必要がない。
XAML: TextBox

View Slide

XAML: TextBox ViewModel
Pile:
LogPile
Anchor fun()

View Slide


View Slide

6. ValueConverter
◦ XAML 値コンバーターの基底クラス。
◦ 型チェックを自動的に行う。ハンドラ関数は、明示された型を前
提に実装する。
◦ 変換できない場合はNoneを返す事が出来る。
int → Brush

View Slide


View Slide

7. UIThread
◦ UIスレッドとワーカースレッドの遷移を、非同期ワークフロー内
で行うための補助実装。
◦ モデル操作をワーカースレッドで行う場合に使用出来る。

View Slide

8. GlobalService
◦ 依存注入や依存分離といったテクニックを、Epoxy上で実現する。
◦ GlobalService属性でインターフェイスを識別。
◦ 単純な、シングルトンインスタンス戦略。
◦ 非同期処理対応。
◦ Anchor/Pile同様に、一時的に参照を得る事で生存期間を短縮。

View Slide


View Slide

質疑応答
GitHub: https://github.com/kekyo/Epoxy/
NuGet:
◦ https://www.nuget.org/packages/FSharp.Epoxy.Wpf
◦ https://www.nuget.org/packages/FSharp.Epoxy.Avalonia
資料:
◦ 2021年のXAML事情とEpoxyを作った話
https://www.kekyo.net/2021/02/23/7230
◦ Epoxyで C# MVVMアーキテクチャを簡単に実装する話
https://www.youtube.com/watch?v=LkyrgJbuiQs

View Slide

F# Epoxy

F# Epoxy

Kouji Matsui
PRO

More Decks by Kouji Matsui

Other Decks in Programming

Featured

Transcript

F# Epoxy

F# Epoxy

Kouji Matsui PRO

More Decks by Kouji Matsui

Other Decks in Programming

Featured

Transcript

Kouji Matsui
PRO