F# Epoxy (English translated)

Slide 1

Slide 1 text

Slide 2

Slide 2 text

(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

Slide 3

Slide 3 text

Slide 4

Slide 4 text

(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…

Slide 5

Slide 5 text

(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.

Slide 6

Slide 6 text

Slide 7

Slide 7 text

(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)

Slide 8

Slide 8 text

(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.

Slide 9

Slide 9 text

(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)

Slide 10

Slide 10 text

Slide 11

Slide 11 text

(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.

Slide 12

Slide 12 text

(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.

Slide 13

Slide 13 text

(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.

Slide 14

Slide 14 text

Slide 15

Slide 15 text

(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.

Slide 16

Slide 16 text

Slide 17

Slide 17 text

(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

Slide 18

Slide 18 text

(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)

Slide 19

Slide 19 text

Slide 20

Slide 20 text

(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.

Slide 21

Slide 21 text

(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)

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

(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.

Slide 28

Slide 28 text

(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).

Slide 29

Slide 29 text

(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.

Slide 30

Slide 30 text

Slide 31

Slide 31 text

(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

Slide 32

Slide 32 text

Slide 33

Slide 33 text

Slide 34

Slide 34 text

(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

Slide 35

Slide 35 text

Slide 36

Slide 36 text

(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.

Slide 37

Slide 37 text

(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.

Slide 38

Slide 38 text

Slide 39

Slide 39 text

Slide 40

Slide 40 text

(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