How do you write a GUI app in a functional programming language that prefers immutability? From Visual Basic on we have been taught how to compose interactive UIs using events and mutable properties. Is there any other way? The answer is, yes, indeed there is. Not only can you build UIs using functional concepts, but I will argue that the architecture of such an app is more modular and more robust than the standard architecture resulting from objects sending messages to each other. This talk is an introduction to the fringe world of functional programming using F# and will have information useful to both beginners and practitioners.

1. Functional GUIs with F#
Frank A. Krueger
FRINGE 2015

2. I ❤️ F#

4. Simple Domain
module DrawingDomain =
type Shape = Oval | Rectangle

5. Simple Domain
type Point = { X : float; Y : float }
type Size = { Width : float; Height : float }
type Frame = { Position : Point
Size : Size }

6. Simple Domain
type Shape =
| Oval of Frame
| Rectangle of Frame

7. Moar Features!
type Shape =
| Oval of Frame
| Rectangle of Frame
| Path of Point list
| Union of Shape list
| Subtract of Shape list

8. Common Properties
type Element =
{
Id : Guid
Name : string
Color : Color
Shape : Shape
}
and Shape =
| Oval of Frame
| Rectangle of Frame
| Path of Point list
| Union of Element list
| Subtract of Element list

9. Document Model
type Document =
{
Elements : Element list
}

10. module DrawingDomain =
type Color = { R : float; G : float; B : float; A : float }
type Point = { X : float; Y : float }
type Size = { Width : float; Height : float }
type Frame = { Position : Point
Size : Size }
type Shape =
| Oval of Frame
| Rectangle of Frame
| Path of Point list
| Union of Shape list
| Subtract of Shape list
type Element =
{
Id : Guid
Name : string
Color : Color
Shape : Shape
}
type Document =
{
Elements : Element list
}

11. CRUD Operations

12. New Document
let newDocument =
{
Elements = []
}

13. Add Oval
let addOval doc frame =
let gray = rgb 0.5 0.5 0.5
let oval =
{
Id = Guid.NewGuid ()
Name = "Oval"
Color = gray
Shape = Oval frame
}
{ doc with
Elements = oval :: doc.Elements
}

14. Add Oval
let d1 = newDocument
let d2 = addOval d1 { Position = { X = 0.0; Y = 0.0 }
Size = { Width = 200.0;
Height = 200.0; } }
val d1 : Document = {Elements = [];}
val d2 : Document =
{Elements = [{Id = 9993a910-c487-4b6f-9025-279ce941518f;
Name = "Oval";
Color = {R = 0.5;
G = 0.5;
B = 0.5;
A = 1.0;};
Shape = Oval {Position = {X = 0.0;
Y = 0.0;};
Size = {Width = 200.0;
Height = 200.0;};};}];}

15. Remove Elements
let removeElement doc id =
...

16. Mapping
val newData : int list = [0; 1000; 2000; 3000; 4000]
let data = [0; 1; 2; 3; 4]
let times1000 x = x * 1000
let newData = data |> List.map times1000

17. Map the Document
let rec mapElements f elms =
let mapChildren e =
match e.Shape with
| Union children ->
{ e with Shape = Union (mapElements f children) }
| Subtract children ->
{ e with Shape = Subtract (mapElements f children) }
| _ -> e
let mapElement = mapChildren >> f
elms |> List.choose mapElement
and mapDocument f doc =
{ doc with
Elements = mapElements f doc.Elements
}

18. Remove Element
et removeElement doc id =
let keep e = if e.Id = id then None else Some e
mapDocument keep doc

19. Change the Color
let setColor doc ids newColor =
let selected e = Set.contains e.Id ids
let set e =
if selected e then
Some { e with Color = newColor }
else Some e
mapDocument set doc

20. Mutant Free Zone

21. GUIs

22. OOP GUIs
FrankName
Code Behind, View Model, View Controllers,
Reactive, Binding, whatever…
1. User types something
2. Text property changes
3. Some middleman to help you sleep at night
4. Mutate the Model (change properties)
Model

23. Mutant Love Zone

24. F# is OOP
type ShapeMutant () =
let mutable color = rgb 0.5 0.5 0.5
member this.Color
with get () = color
and set v = color <- v

25. F# is OOP
type ShapeMutant () =
let mutable color = rgb 0.5 0.5 0.5
member this.Color
with get () = color
and set v = color <- v

26. How do I keep my functional
model and still use OOP UI
libraries?

27. Answer
• Views reference a way to find the data they need,
they don’t reference the data directly
• There is a single Update function on the Document
that:
1. Sets a new document state
2. Signals that the document has changed

28. OOP Name Editorpublic class ElementNameEditor
{
TextEdit view;
Element model;
void Initialize ()
{
// Display the current data
view.Text = model.Name;
// Handle user changes
view.TextChanged += (s, e) =>
model.Name = view.Text;
// Refresh when the doc changes
model.PropertyChanged += (s, e) => {
if (e.Name == "Text")
view.Text = model.Name;
} ;
}
}

29. public class ElementNameEditor
{
TextEdit view;
Element model;
void Initialize ()
{
// Display the current data
view.Text = model.Name;
// Handle user changes
view.TextChanged += (s, e) =>
model.Name = view.Text;
// Refresh when the doc changes
model.PropertyChanged += (s, e) => {
if (e.Name == "Text")
view.Text = model.Name;
} ;
}
}
OOP Name Editor
Direct Reference
MAGIC

30. Two Changes…

31. 1. Instead of a Direct
Reference, use an Indirect
Reference

32. 2. Instead of MAGIC, call a
function and handle the
update event

33. Functional Name Editor
type ElementNameEditor (view : TextEdit, docc : DocumentController, id) =
member this.Initialize () =
// Handle user changes
view.TextChanged.Add (fun _ ->
let newName = view.Text
let setName e =
if e.Id = id then
Some { e with Name = newName }
else Some e
let newDoc = mapDocument setName docc.Data
docc.Update newDoc)
// Display the current data
let refresh doc =
let model = getElement id doc
view.Text <- model.Name
refresh docc.Data
// Refresh when the doc changes
docc.Updated.Add refresh

34. Functional Name Editor
type ElementNameEditor (view : TextEdit, docc : DocumentController, id) =
member this.Initialize () =
// Handle user changes
view.TextChanged.Add (fun _ ->
let newName = view.Text
let setName e =
if e.Id = id then
Some { e with Name = newName }
else Some e
let newDoc = mapDocument setName docc.Data
docc.Update newDoc)
// Display the current data
let refresh doc =
let model = getElement id doc
view.Text <- model.Name
refresh docc.Data
// Refresh when the doc changes
docc.Updated.Add refresh
Indirect Reference

35. Functional Name Editor
type ElementNameEditor (view : TextEdit, docc : DocumentController, id) =
member this.Initialize () =
// Handle user changes
view.TextChanged.Add (fun _ ->
let newName = view.Text
let setName e =
if e.Id = id then
Some { e with Name = newName }
else Some e
let newDoc = mapDocument setName docc.Data
docc.Update newDoc)
// Display the current data
let refresh doc =
let model = getElement id doc
view.Text <- model.Name
refresh docc.Data
// Refresh when the doc changes
docc.Updated.Add refresh
Explicit Update Function

36. Functional Name Editor
type ElementNameEditor (view : TextEdit, docc : DocumentController, id) =
member this.Initialize () =
// Handle user changes
view.TextChanged.Add (fun _ ->
let newName = view.Text
let setName e =
if e.Id = id then
Some { e with Name = newName }
else Some e
let newDoc = mapDocument setName docc.Data
docc.Update newDoc)
// Display the current data
let refresh doc =
let model = getElement id doc
view.Text <- model.Name
refresh docc.Data
// Refresh when the doc changes
docc.Updated.Add refresh Single Update Event

37. DocumentController
type DocumentController () =
let updated = Event<_> ()
let mutable data = newDocument
member this.Data = data
member this.Update newData =
data <- newData
updated.Trigger newData
member this.Updated = updated.Publish

38. DocumentController
type DocumentController () =
let updated = Event<_> ()
let mutable data = newDocument
member this.Data = data
member this.Update newData =
data <- newData
updated.Trigger newData
member this.Updated = updated.Publish
Single Source of Mutation

39. Why?
public class ElementNameEditor
{
TextEdit view;
Element model;
void Initialize ()
{
// Display the current data
view.Text = model.Name;
// Handle user changes
view.TextChanged += (s, e) =>
model.Name = view.Text;
// Refresh when the doc changes
model.PropertyChanged += (s, e) => {
if (e.Name == "Text")
view.Text = model.Name;
} ;
}
}
type ElementNameEditor (view : TextEdit, docc : DocumentController, id
member this.Initialize () =
// Handle user changes
view.TextChanged.Add (fun _ ->
let newName = view.Text
let setName e =
if e.Id = id then
Some { e with Name = newName }
else Some e
let newDoc = mapDocument setName docc.Data
docc.Update newDoc)
// Display the current data
let refresh doc =
let model = getElement id doc
view.Text <- model.Name
refresh docc.Data
// Refresh when the doc changes
docc.Updated.Add refresh

40. Five Reasons
1. Undo, Redo, and History
2. Atomic Save and Background Open
3. Background Updates
4. No Dangling References
5. Keep My Functional Model

41. Document-based
App Requirements
• Undo & Redo
• Background Save &
Open

42. OOP Undo Architecture
Whenever you change the document,
pass a reference to another function that
can undo all those changes

43. OOP Undo
view.TextChanged += (s, e) =>
SetName (view.Text);
void SetName (string newName)
{
var oldName = model.Name;
UndoManager.RegisterUndo (() =>
SetName (oldName));
UndoManager.SetAction ("Rename");
model.Name = newName;
}
view.TextChanged += (s, e) =>
model.Name = view.Text;

44. For every command you write,
you have to write its inverse
😳

45. F# Undo
docc.Update newDoc

46. F# Undo
docc.Update newDoc
docc.Update newDoc "Rename"

47. F# Undo
docc.Update newDoc
docc.Update newDoc "Rename"
No Need to Write an Inverse Function!

48. type DocumentControllerWithUndo () =
let updated = Event<_> ()
let mutable historyIndex = 0
let mutable history = [(newDocument, "New")]
member this.Data = history.[historyIndex]
member this.Update newData message =
history <- (newData, message) :: history
historyIndex <- 0
updated.Trigger newData
member this.Updated = updated.Publish
member this.Undo () =
historyIndex <- historyIndex + 1
updated.Trigger this.Data
member this.Redo () =
historyIndex <- historyIndex - 1
updated.Trigger this.Data

49. type DocumentControllerWithUndo () =
let updated = Event<_> ()
let mutable historyIndex = 0
let mutable history = [(newDocument, "New")]
member this.Data = history.[historyIndex]
member this.Update newData message =
history <- (newData, message) :: history
historyIndex <- 0
updated.Trigger newData
member this.Updated = updated.Publish
member this.Undo () =
historyIndex <- historyIndex + 1
updated.Trigger this.Data
member this.Redo () =
historyIndex <- historyIndex - 1
updated.Trigger this.Data

50. Atomic Save
Because the DocumentController has a
immutable snapshots of the data,
atomic saves are trivial.

51. Atomic Save
Because the DocumentController has a
immutable snapshots of the data,
atomic saves are trivial.

52. Background Open
Because the Document is immutable, it
doesn’t matter what thread it came
from.

53. Background Open
Because the Document is immutable, it
doesn’t matter what thread it came
from.

54. Background Updates
Because the Document is immutable, it
doesn’t matter what thread was used to
create it or how long it took to generate.

55. Background Updates
Because the Document is immutable, it
doesn’t matter what thread was used to
create it or how long it took to generate.

56. No Dangling References
Most of my memory leaks occur
because my model has an event that
has a reference to a UI object.
I never remember to unsubscribe all my
events.
With fewer events, there are fewer
mistakes to be made, and its easier to
track down trouble makers.

57. No Dangling References
Most of my memory leaks occur
because my model has an event that
has a reference to a UI object.
I never remember to unsubscribe all my
events.
With fewer events, there are fewer
mistakes to be made, and its easier to
track down trouble makers.

58. For This…
1. Undo, Redo, and History
2. Atomic Save and Background Open
3. Background Updates
4. No Dangling References
5. Keep My Functional Model
I Get…
1. Instead of a Direct Reference,
use an Indirect Reference
2. Call a single Update function
and handle the Updated event

59. Thank You
Frank A. Krueger
@praeclarum
http://github.com/praeclarum
http://praeclarum.org
fak@praeclarum.org