Porting a simple toy app to Elmish

In the past I developed a toy app/kata (Animalquiz) for learning purposes. First version was Java, then I ported it to F#.

This post is about making the  F# version run under Elmish.

Roughly speaking, an Emish based application consists in a set of possible messages, a model to represent the current state of the application, and an update function that given a message and a model, returns a new model (and a list of other messages,  but I can skip this part and assume that this list will always be returned as empty, that is ok for my purposes).

My original AnimalQuiz was console based (also with a gtk# interface), and it was based on a sort of model-view-update patten, even if I wasn’t aware of it.

So I expect there will not be so much work to do to put it under Elmish.

First step is creating a project based on the Elmish-Fable template.

According to the documentation that you can find in https://devhub.io/repos/kunjee17-awesome-fable

to install the Fable-Elmish-React template you need the following command:

dotnet new -i "Fable.Template.Elmish.React::*"

To create a new project:

dotnet new fable-elmish-react -n awesome

The template created contains three sample (sub)apps: 

• The “Home” app which shows us a simple textbook where the content will be coped in a text area (using “onchange” property).
• The classical counter app called “Counter sample”. 
• The “About” which just shows some static text (which is just static text).

I want to add the AnimalQuiz as a fourth application, so what I'll do is:

1. make a clone of one of them, and call the cloned app “AnimalQuiz”, 
2. make the cloned app accessible from the outer menu.
3. modify the cloned app, to  behave as the AnimalQuiz app.

The app I clone is the “Home” app, so I just copy the three file of it in a new folder called AnimalQuiz. In each module declaration I'll substitute "AnimalQuiz" to "Home".

I have to add the following rows in the in the project file awesome.fsproj, in that order,  to make sure they will be compiled:

<Compile Include="AnimalQuiz/Types.fs" />
<Compile Include="AnimalQuiz/View.fs" />
<Compile Include="AnimalQuiz/State.fs" />

     

Now the step 2: I want to make extra app reachable by the outer menu, so as follows there are the files that I have to change at it, and how I have to change them:

module App.Types: the message and the model will reference the message and the models of the sub apps:

	module App.Types
	open Global
	type Msg =
	| CounterMsg of Counter.Types.Msg
	| HomeMsg of Home.Types.Msg
	| AnimalQuizMsg of AnimalQuiz.Types.Msg
	type Model = {
	currentPage: Page
	counter: Counter.Types.Model
	home: Home.Types.Model
	animalQuiz: AnimalQuiz.Types.Model
	}

view raw Types.fs hosted with ❤ by GitHub

Module Global (file Global.fs): I extend the Page discriminated union, and the toHash function:

	module Global
	type Page =
	| Home
	| AnimalQuiz
	| Counter
	| About
	let toHash page =
	match page with
	| About -> "#about"
	| Counter -> "#counter"
	| Home -> "#home"
	| AnimalQuiz -> "#animalQuiz"

view raw Global.fs hosted with ❤ by GitHub

Then I need to change the App.State module (only the row with some animalQuiz string are mine):

	module App.State
	open Elmish
	open Elmish.Browser.Navigation
	open Elmish.Browser.UrlParser
	open Fable.Import.Browser
	open Global
	open Types
	let pageParser: Parser<Page->Page,Page> =
	oneOf [
	map About (s "about")
	map Counter (s "counter")
	map Home (s "home")
	map AnimalQuiz (s "animalQuiz")
	]
	let urlUpdate (result: Option<Page>) model =
	match result with
	| None ->
	console.error("Error parsing url")
	model,Navigation.modifyUrl (toHash model.currentPage)
	| Some page ->
	{ model with currentPage = page }, []
	let init result =
	let (counter, counterCmd) = Counter.State.init()
	let (home, homeCmd) = Home.State.init()
	let (animalQuiz, animalQuizCmd) = AnimalQuiz.State.init()
	let (model, cmd) =
	urlUpdate result
	{ currentPage = Home
	counter = counter
	home = home
	animalQuiz = animalQuiz}
	model, Cmd.batch [ cmd
	Cmd.map CounterMsg counterCmd
	Cmd.map HomeMsg homeCmd
	Cmd.map AnimalQuizMsg animalQuizCmd]
	let update msg model =
	match msg with
	| CounterMsg msg ->
	let (counter, counterCmd) = Counter.State.update msg model.counter
	{ model with counter = counter }, Cmd.map CounterMsg counterCmd
	| HomeMsg msg ->
	let (home, homeCmd) = Home.State.update msg model.home
	{ model with home = home }, Cmd.map HomeMsg homeCmd
	| AnimalQuizMsg msg ->
	let (animalQuiz, animalQuizCmd) = AnimalQuiz.State.update msg model.animalQuiz
	{ model with animalQuiz = animalQuiz }, Cmd.map AnimalQuizMsg animalQuizCmd

view raw State.fs hosted with ❤ by GitHub

Last thing to do is modifying App.View module in two parts.
One is the definition of the menu:

	let menu currentPage =
	aside
	[ ClassName "menu" ]
	[ p
	[ ClassName "menu-label" ]
	[ str "General" ]
	ul
	[ ClassName "menu-list" ]
	[
	menuItem "Animal Quiz" AnimalQuiz currentPage
	menuItem "Home" Home currentPage
	menuItem "Counter sample" Counter currentPage
	menuItem "About" Page.About currentPage ] ]

view raw App.fs hosted with ❤ by GitHub

Another one is the definition of the pageHtml internal to the root definition:

	let pageHtml =
	function
	| Page.About -> Info.View.root
	| Counter -> Counter.View.root model.counter (CounterMsg >> dispatch)
	| Home -> Home.View.root model.home (HomeMsg >> dispatch)
	| AnimalQuiz -> AnimalQuiz.View.root model.animalQuiz (AnimalQuizMsg >> dispatch)

view raw App.fs hosted with ❤ by GitHub

This is enough to make the new app visible and selectable from the outer menu.

Now is time to take a look to the actual app, that, until now, is just a copy of Home, but I'm going to change everything there.

The model is the following:

	type Model = { MessageFromPlayer: string;
	NumberOfReplaySteps: int option;
	CurrentState:State;
	RootTree: KnowledgeTree;
	CurrentNode: KnowledgeTree;
	MessageFromEngine: string;
	AnimalToBeLearned: string Option;
	YesNoList: string list;
	NewDiscriminatingQuestion: string option;
	MessageHistory: Msg list;
	}

view raw Types.fs hosted with ❤ by GitHub

Those data are useful to manage an interaction between the user and the engine, but I am not going to explain all of them, with the exception of the CurrentState, which is of the type State, that describe the different states of the interaction with the user:

	type State = | Welcome | InviteToThinkAboutAnAnimal | GuessingFromCurrentNode |AskWhatAnimalWas | ExpectingDiscriminatingQuestion | AnsweringDiscriminatingQuestion | SetReplayValue

view raw Types.fs hosted with ❤ by GitHub

What follows are the messages:

	type Msg =
	| InputStr of string
	| Submit
	| Yes
	| No
	| Reset
	| Replay
	| NumOfReplay of string
	| DoReplay
	| Undo

view raw Types.fs hosted with ❤ by GitHub

The model include also a history of messages. The history of messages is useful because I can do any "replay n steps from the beginning" by applying n times the messages of the history from the initial state using the fold function.

For instance there is an "undo" that applyes the list of the messages from the initial state a nuber of times given by the length of the history minus one:

| (Undo,_) -> 

     let msgHistoryTruncated = model.MessageHistory |> List.take (List.length model.MessageHistory - 1)

     msgHistoryTruncated |> List.fold (fun (acc,_) x -> update x  acc   )  (initState,[])

     

repo is here https://github.com/tonyx/animalquiz-elmish