Elmish implements core abstractions that can be used to build applications following “model view update” style of architecture, as made famous by Elm. The library however does not model any "view" and is intended for use in conjuction with a DOM/renderer, like React/ReactNative or VirtualDOM. For those familiar with Redux, the Fable applications targeting React or ReactNative may find Elmish a more natural fit than Redux allowing one to stay completely in idiomatic F#.
Elmish abstractions have been carefully designed to resemble Elm's "look and feel" and anyone familiar with post-Signal Elm terminology will find themselves right at home.
Elm architecture operates using following concepts, as they translate to Elmish:
This is a snapshot of your applications state, defined as an immutable data structure.
This an event representing a change (delta) in state of your applications, defined as a discriminated union.
This is a pure function that produces inital state of your application and, optionally, message(s) to process.
This is a pure function that produces new state of your application given the previous state and, optionally, new message(s) to process.
This is a pure function that produces new UI layout/content given the current state, defined as a F# function that uses a renderer (such as React) to declaratively build a UI.
This is an opaque data structure that combines all of the above + your setState function to start a dispatch loop.
A dispatch loop is responsible for running the update cycle.
Command is an opaque data structure that when evaluated may produce one or more new messages.
Task is any code that will execute when a command is evalutated, like reading a database, defined in Elmish as async or promise blocks or just a plain function.
These are external sources of events to process, defined as a F# functions that can dispatch new messages as they happen.
Please refer to Elm's diagrams for an overview.
Application state is composed of the state of all its children, events buble up from the children all the way to the top update function where they are distributed back to the children in an explicit fashion. The views delegate portions of the model to the appropriate child views to produce the new UI.
Elmish-React: boilerplate to get the React/Native root components registered and start the dispatch loop.
npm install --save-dev fable-elmish-react
For more information see the readme
Elmish-Snabbdom: boilerplate to get the Snabbdom virtual DOM registered and start the dispatch loop.
npm install --save-dev fable-elmish-snabbdom
For more information see the readme
Elmish-Debugger: RemoteDev tools integration adds support for time-travelling debugger and import/export.
npm install --save-dev fable-elmish-debugger
For more information see the readme
Make sure you have yarn installed (yarn is to npm like paket is to nuget) and it's in the PATH.
npm install -g yarn
Then run fake:
./build.shorbuild
And/or build samples:
build Samples