F# Epoxy (English translated)

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

View Slide

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

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

What is Epoxy?
MVVM:

View Slide

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

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

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

What is Epoxy?

View Slide

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

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

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

Agenda
What is Epoxy?
Functions covered

View Slide

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

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

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

Agenda
What is Epoxy?
Functions covered

View Slide

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

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


View Slide

Ability for hook equivalent likes to OnPropertyChanged:
◦ Duck-typed

View Slide

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

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

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

The Command side is implemented as a function that takes
EventArgs as an argument.

View Slide

ViewModel
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

XAML: TextBox ViewModel
Pile:
LogPile
Anchor fun()

View Slide


View Slide

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


View Slide

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

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


View Slide

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

F# Epoxy (English translated)

F# Epoxy (English translated)

Kouji Matsui
PRO

More Decks by Kouji Matsui

Other Decks in Programming

Featured

Transcript

F# Epoxy (English translated)

F# Epoxy (English translated)

Kouji Matsui PRO

More Decks by Kouji Matsui

Other Decks in Programming

Featured

Transcript

Kouji Matsui
PRO