Upgrade to Pro — share decks privately, control downloads, hide ads and more …

F# Epoxy

F# Epoxy

F# Epoxy – Epoxyの紹介とF#対応の内容について

GitHub: https://github.com/kekyo/Epoxy

【第一回】Fun Fan Fsharp | オンライン
https://fun-fan-fsharp.connpass.com/event/210131/

"Epoxyは、.NET XAML環境で使える、Model-View-ViewModel (MVVM) アーキテクチャ向けの、独立した柔軟性のあるライブラリです。
C#を含む.NETの全処理系向け、及びF#用のNuGetパッケージがあります。"

In english version: https://speakerdeck.com/kekyo/f-number-epoxy-english-translated

Kouji Matsui
PRO

May 22, 2021
Tweet

More Decks by Kouji Matsui

Other Decks in Programming

Transcript

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

    View Slide

  2. (c) 2021 Kouji Matsui
    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

  3. (c) 2021 Kouji Matsui
    (c) 2021 Kouji Matsui
    Agenda
    Epoxyとは
    EpoxyをF#で使うために
    Epoxyがカバーする機能

    View Slide

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

    View Slide

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

    View Slide

  6. (c) 2021 Kouji Matsui
    Epoxyとは
    MVVM:

    View Slide

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

    View Slide

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

    View Slide

  9. (c) 2021 Kouji Matsui
    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

  10. (c) 2021 Kouji Matsui
    Epoxyとは

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  14. (c) 2021 Kouji Matsui
    (c) 2021 Kouji Matsui
    Agenda
    Epoxyとは
    EpoxyをF#で使うために
    Epoxyがカバーする機能

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  19. (c) 2021 Kouji Matsui
    (c) 2021 Kouji Matsui
    Agenda
    Epoxyとは
    EpoxyをF#で使うために
    Epoxyがカバーする機能

    View Slide

  20. (c) 2021 Kouji Matsui
    Epoxyがカバーする機能
    機能名 概要
    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

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

    View Slide

  22. (c) 2021 Kouji Matsui
    Epoxyがカバーする機能 (1)

    View Slide

  23. (c) 2021 Kouji Matsui
    Epoxyがカバーする機能 (1)

    View Slide

  24. (c) 2021 Kouji Matsui
    Epoxyがカバーする機能 (1)

    View Slide

  25. (c) 2021 Kouji Matsui
    Epoxyがカバーする機能 (1)

    View Slide

  26. (c) 2021 Kouji Matsui
    Epoxyがカバーする機能 (1)
    OnPropertyChangedに相当するフック:
    ◦ ダックタイピング

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  30. (c) 2021 Kouji Matsui
    Epoxyがカバーする機能 (4)
    Command側は、EventArgsを引数に取る関数として実装。

    View Slide

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

    View Slide

  32. (c) 2021 Kouji Matsui
    Epoxyがカバーする機能 (5)
    XAML: TextBox ViewModel
    Pile:
    LogPile
    Anchor fun()

    View Slide

  33. (c) 2021 Kouji Matsui
    Epoxyがカバーする機能 (5)

    View Slide

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

    View Slide

  35. (c) 2021 Kouji Matsui
    Epoxyがカバーする機能 (6)

    View Slide

  36. (c) 2021 Kouji Matsui
    Epoxyがカバーする機能 (7)
    7. UIThread
    ◦ UIスレッドとワーカースレッドの遷移を、非同期ワークフロー内
    で行うための補助実装。
    ◦ モデル操作をワーカースレッドで行う場合に使用出来る。

    View Slide

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

    View Slide

  38. (c) 2021 Kouji Matsui
    Epoxyがカバーする機能 (8)

    View Slide

  39. (c) 2021 Kouji Matsui
    Epoxyがカバーする機能 (8)

    View Slide

  40. (c) 2021 Kouji Matsui
    質疑応答
    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