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#."

Transcript

1. (c) 2021 Kouji Matsui F# Epoxy (English translated) 2021.5.22 FUN FAN F# - KOUJI MATSUI @KEKYO2, @KOZY_KEKYO
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
3. (c) 2021 Kouji Matsui (c) 2021 Kouji Matsui Agenda What is Epoxy? How to use Epoxy in F# Functions covered
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…
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.
6. (c) 2021 Kouji Matsui What is Epoxy? MVVM:
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)
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.
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)
10. (c) 2021 Kouji Matsui What is Epoxy?
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.
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.
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.
14. (c) 2021 Kouji Matsui (c) 2021 Kouji Matsui Agenda What is Epoxy? How to use Epoxy in F# Functions covered
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.
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.
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
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)
19. (c) 2021 Kouji Matsui (c) 2021 Kouji Matsui Agenda What is Epoxy? How to use Epoxy in F# Functions covered
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.
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)
22. (c) 2021 Kouji Matsui Functions covered (1)
23. (c) 2021 Kouji Matsui Functions covered (1)
24. (c) 2021 Kouji Matsui Functions covered (1)
25. (c) 2021 Kouji Matsui Functions covered (1)
26. (c) 2021 Kouji Matsui Functions covered (1) Ability for hook equivalent likes to OnPropertyChanged: ◦ Duck-typed
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.
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).
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.
30. (c) 2021 Kouji Matsui Functions covered (4) The Command side is implemented as a function that takes EventArgs as an argument.
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
32. (c) 2021 Kouji Matsui Functions covered (5) XAML: TextBox ViewModel Pile: LogPile Anchor fun()
33. (c) 2021 Kouji Matsui Functions covered (5)
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
35. (c) 2021 Kouji Matsui Functions covered (6)
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.
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.
38. (c) 2021 Kouji Matsui Functions covered (8)
39. (c) 2021 Kouji Matsui Functions covered (8)
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