$30 off During Our Annual Pro Sale. View Details »

F# Epoxy (English translated)

F# Epoxy (English translated)

F# Epoxy - Introduction to Epoxy and F# support content

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

[First] Fun Fan Fsharp | Online (ja)
https://fun-fan-fsharp.connpass.com/event/210131/

"Epoxy is an independent and flexible library for the Model-View-ViewModel (MVVM) architecture that can be used in the .NET XAML environment.
There are NuGet packages for all .NET development, including C#, and for F#."

Kouji Matsui
PRO

May 22, 2021
Tweet

More Decks by Kouji Matsui

Other Decks in Programming

Transcript

  1. (c) 2021 Kouji Matsui
    F# Epoxy
    (English translated)
    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
    What is Epoxy?
    How to use Epoxy in F#
    Functions covered

    View Slide

  4. (c) 2021 Kouji Matsui
    What is Epoxy?
    Auxiliary library to implement XAML MVVM (Model - View -
    ViewModel) architecture.
    https://github.com/kekyo/Epoxy/
    Similar existing implementations:
    ◦ Prism
    ◦ LightMVVM
    ◦ ReactiveUI
    ◦ ReactiveProperty
    ◦ Etc…

    View Slide

  5. (c) 2021 Kouji Matsui
    What is Epoxy?
    Features:
    .NET development such as C#, F# and others.
    ◦ .NET SDK, VS, Rider and other IDEs.
    Supported multi-platform:
    ◦ WPF, UWP, Xamarin Forms, Avalonia, WinUI, Uno
    ◦ WPF and Avalonia in F#
    Can be applied by NuGet package form and requires no special
    operations.
    Simple auxiliary library with orthogonality.
    Fully asynchronous operation support.

    View Slide

  6. (c) 2021 Kouji Matsui
    What is Epoxy?
    MVVM:

    View Slide

  7. (c) 2021 Kouji Matsui
    What is Epoxy?
    Common motivations and obstacles for adopting MVVM:
    Tend to write complex and intricate code.
    ◦ Tend to run away to code-behind.
    ◦ Sometimes it is virtually impossible to write code in code-behind...
    (ex: Collection bound complex UI)
    Lack of tools for MVVM implementation.
    ◦ Boilerplate, like the INotifyPropertyChanged implementation.
    ◦ Safe hooks for CLR events. (cause memory leaks)
    ◦ Messenger pattern cumbersome and hard to understand.
    ◦ Make safer asynchronous processing (UnobservedTaskException)

    View Slide

  8. (c) 2021 Kouji Matsui
    What is Epoxy?
    The Cost of learning heavyweight frameworks:
    ◦ Once you start using it, you cannot escape it.
    ◦ Cannot be used on an ad-hoc basis.
    Multi-platform support:
    ◦ Forced to use different frameworks on different platforms you want to
    target.

    View Slide

  9. (c) 2021 Kouji Matsui
    What is Epoxy?
    Demo:
    D:¥Projects>mkdir epoxy_wpf_fsharp
    D:¥Projects>cd epoxy_wpf_fsharp
    D:¥Projects¥epoxy_wpf_fsharp>dotnet new -i Epoxy.Templates
    Deciding which projects to restore....
    C:¥Users¥k¥.templateengine¥dotnetcli¥v5.0.104¥scratch¥restore.csproj restored. (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 version 16.8.3+39993bd9d
    Copyright (C) Microsoft Corporation.All rights reserved.
    Deciding which projects to restore....
    D:¥Projects¥epoxy_wpf_fsharp¥epoxy_wpf_fsharp.Core¥epoxy_wpf_fsharp.Core.fsproj restored. (439 ms)
    D:¥Projects¥epoxy_wpf_fsharp¥epoxy_wpf_fsharp¥epoxy_wpf_fsharp.fsproj restored. (3.17 sec)

    View Slide

  10. (c) 2021 Kouji Matsui
    What is Epoxy?

    View Slide

  11. (c) 2021 Kouji Matsui
    What is Epoxy?
    Compactness:
    ◦ Small libraries. (packages)
    ◦ Smaller and simple types. (classes, structures and inheritance)
    ◦ Landing on an architecture that cannot be called “A framework.”
    Be simple:
    ◦ Not a complex structure.
    ◦ Not a looks of complex interface.
    ◦ Not complex to use.
    (These topics are theme of saving beginners.)
    ◦ Support for asynchronous processing by default.

    View Slide

  12. (c) 2021 Kouji Matsui
    What is Epoxy?
    Orthogonality:
    ◦ Each function can be used individually.
    ◦ Ability to combine functions freely.
    ◦ Can be used in combination with other libraries and frameworks.
    Few side effects:
    ◦ Does not create unintended behavior.
    ◦ Does not make it a prerequisite to use the functions in combination.

    View Slide

  13. (c) 2021 Kouji Matsui
    What is Epoxy?
    Low learning cost:
    ◦ Being able to move quickly.
    ◦ Less to learn.
    ◦ No unique architecture, no new concepts, etc.
    ◦ Make it impossible or difficult to perform wrong operations, or to notice them.
    ◦ F# specific: XAML/MVVM is OOP based technology, so don't force it to
    Functional paradigm (FP) too much.

    View Slide

  14. (c) 2021 Kouji Matsui
    (c) 2021 Kouji Matsui
    Agenda
    What is Epoxy?
    How to use Epoxy in F#
    Functions covered

    View Slide

  15. (c) 2021 Kouji Matsui
    How to use Epoxy in F#
    Only WPF and Avalonia suppoted F# now.
    Make it useful in F#:
    Works well in mixed C#/F# projects.
    Function names in camel-case.
    Direct support for F# types. (function types and Option)
    Use Async<‘T> type as default async type.
    ViewModel Injector.
    Automatic resourceization of WPF XAML pages.

    View Slide

  16. (c) 2021 Kouji Matsui
    How to use Epoxy in F#
    Only WPF and Avalonia suppoted F# now.
    Make it useful in F#:
    Works well in mixed C#/F# projects.
    Function names in camel-case.
    Direct support for F# types. (function types and Option)
    Use Async<‘T> type as default async type.
    ViewModel Injector.
    Automatic resourceization of WPF XAML pages.

    View Slide

  17. (c) 2021 Kouji Matsui
    How to use Epoxy in F#
    Strategy for works well in mixed C#/F# projects:
    ◦ Generates instance by factory functions.
    ◦ Instances will be created commonly types.
    ◦ Members (methods and functions) are extension methods (in C#) and type
    extensions. (in F#)
    The NuGet packages are FSharp.Epoxy.Wpf and FSharp.Epoxy.Avalonia, but they
    are actually divided into several packages.
    FSharp.Epoxy.Wpf
    Epoxy.Wpf.Core
    Epoxy.Build

    View Slide

  18. (c) 2021 Kouji Matsui
    How to use Epoxy in F#
    Automatic resourceization of WPF XAML pages:
    ◦ When writing WPF in F#, it is not possible to load and initialize BAML using
    C#'s partial class.
    ◦ As a work-around, there is a technique to save the XAML (XML formed) as a
    resource and load it dynamically.
    ◦ In order to store XAML without compiling it into BAML, it is necessary to have
    ItemGroup build it as a Resource instead of a Page.
    ◦ The above is fully automated in the NuGet package. (FSharp.Epoxy.Wpf)

    View Slide

  19. (c) 2021 Kouji Matsui
    (c) 2021 Kouji Matsui
    Agenda
    What is Epoxy?
    How to use Epoxy in F#
    Functions covered

    View Slide

  20. (c) 2021 Kouji Matsui
    Functions covered
    Function name Description
    1. ViewModel Injector The ability to automatically implement the necessary ViewModel PropertyChanged
    events at build time.
    2. ViewModel base class Provides the necessary PropertyChanged events, etc. for ViewModel as an orthodox
    base class.
    3. CommandFactory Allow arbitrary asynchronous functions to be used as ICommand.
    4. EventBinder Attached property that enables the binding of CLR events of any XAML control as
    ICommand.
    5. Anchor/Pile Allows arbitrary XAML controls to be temporarily and safely referenced from the
    ViewModel.
    6. ValueConverter Provides a base class for the XAML value converter.
    7. UIThread The handling of UI threads can be unified across platforms.
    8. GlobalService Compact, infrastructure for dependent injection. Very fast and simple.
    9. Designer Support for design-time editing.
    Each function is independent, so they can be combined freely.

    View Slide

  21. (c) 2021 Kouji Matsui
    Functions covered (1)
    1. ViewModel Injector
    ◦ Perform IL injection at build time to automatically perform the necessary
    implementation for the ViewModel.
    ◦ Just apply the ViewModelAttribute and build.
    ◦ It is fully automated and can be used in SDK-only environment or CI (No VSIX
    required).
    ◦ In F#, it uses auto-implemented properties.
    Covered members:
    ◦ INotifyPropertyChanging
    ◦ INotifyPropertyChanged
    ◦ PrettyPrinter (ToString)

    View Slide

  22. (c) 2021 Kouji Matsui
    Functions covered (1)

    View Slide

  23. (c) 2021 Kouji Matsui
    Functions covered (1)

    View Slide

  24. (c) 2021 Kouji Matsui
    Functions covered (1)

    View Slide

  25. (c) 2021 Kouji Matsui
    Functions covered (1)

    View Slide

  26. (c) 2021 Kouji Matsui
    Functions covered (1)
    Ability for hook equivalent likes to OnPropertyChanged:
    ◦ Duck-typed

    View Slide

  27. (c) 2021 Kouji Matsui
    Functions covered (2)
    2. ViewModel base class
    ◦ Orthodox base class for ViewModel.
    ◦ It provides the same implementation as the ViewModel injector.
    ◦ However, you need to write the implementation of the properties by yourself.

    View Slide

  28. (c) 2021 Kouji Matsui
    Functions covered (3)
    3. CommandFactory
    ◦ Provides a class that implements ICommand. Responds to button clicks, etc.
    ◦ Bypasses the function by calling Command (similar to DelegateCommand).
    ◦ Argument types can be specified (generic arguments).
    ◦ Functions are assumed to be asynchronous (Async is assumed to be returned).

    View Slide

  29. (c) 2021 Kouji Matsui
    Functions covered (4)
    4. EventBinder
    ◦ Attached property that enables binding of CLR events of any XAML control as
    ICommand.
    ◦ Any event for which no Command property is provided can be safely bound.

    View Slide

  30. (c) 2021 Kouji Matsui
    Functions covered (4)
    The Command side is implemented as a function that takes
    EventArgs as an argument.

    View Slide

  31. (c) 2021 Kouji Matsui
    ViewModel
    Functions covered (5)
    5. Anchor/Pile
    ◦ Temporarily allow fully manipulation for XAML control in the ViewModel side.
    ◦ Completely eliminate code-behind. No need to write messenger (architecture)
    implementation on the View side.
    XAML: TextBox

    View Slide

  32. (c) 2021 Kouji Matsui
    Functions covered (5)
    XAML: TextBox ViewModel
    Pile:
    LogPile
    Anchor fun()

    View Slide

  33. (c) 2021 Kouji Matsui
    Functions covered (5)

    View Slide

  34. (c) 2021 Kouji Matsui
    Functions covered (6)
    6. ValueConverter
    ◦ Base class for XAML value converters.
    ◦ Automatically performs type checking. Handler functions are
    implemented assuming the explicit type.
    ◦ If the type cannot be converted, it can return None.
    int → Brush

    View Slide

  35. (c) 2021 Kouji Matsui
    Functions covered (6)

    View Slide

  36. (c) 2021 Kouji Matsui
    Functions covered (7)
    7. UIThread
    ◦ An auxiliary implementation for transitioning between UI threads and
    worker threads in an asynchronous workflow.
    ◦ It can be used when model operations are performed in worker threads.

    View Slide

  37. (c) 2021 Kouji Matsui
    Functions covered (8)
    8. GlobalService
    ◦ Techniques such as dependency injection and dependency isolation are
    implemented on Epoxy.
    ◦ GlobalServiceAttribute identifies the interface.
    ◦ Simple, singleton instance strategy.
    ◦ Supports asynchronous processing.
    ◦ Like Anchor/Pile, it shortens the life time by obtaining a temporary
    reference.

    View Slide

  38. (c) 2021 Kouji Matsui
    Functions covered (8)

    View Slide

  39. (c) 2021 Kouji Matsui
    Functions covered (8)

    View Slide

  40. (c) 2021 Kouji Matsui
    Q&A
    GitHub: https://github.com/kekyo/Epoxy/
    NuGet:
    ◦ https://www.nuget.org/packages/FSharp.Epoxy.Wpf
    ◦ https://www.nuget.org/packages/FSharp.Epoxy.Avalonia
    References:
    ◦ The XAML situation in 2021 and the story of creating Epoxy (ja)
    https://www.kekyo.net/2021/02/23/7230
    ◦ A simple implementation of the C# MVVM architecture
    in Epoxy (ja)
    https://www.youtube.com/watch?v=LkyrgJbuiQs

    View Slide