Elmish is an F# library for building user interfaces with the Elm-style Model-View-Update (MVU) pattern. MVU separates application state, displayed UI, and state-changing messages while keeping data flow unidirectional. section 13.5.1 section 13.5.3
MVU organizes an application around three cooperating parts:
- Model stores application state, such as a to-do list and the current input value. section 13.5.3
- Messages represent UI actions, timer events, system events, or asynchronous callbacks. section 13.5.3
- The update function pattern-matches on a message and returns a new model without mutating existing data. section 13.5.3
- Elmish queues simultaneous UI actions and processes them one at a time, supporting asynchronous messaging and concurrency. section 13.5.3
To-do application
A SAFE Stack starter application models its frontend with `{ Todos: Todo list; Input: string }`. User typing and button clicks produce messages; update applies each message to the current model, while the view renders the resulting state. Adding a basket command follows the same approach: represent the command with a discriminated union and update the existing basket. section 13.5.3
Figure 13.14 The MVU pattern is a pattern that allows you to manage UI changes to a data model in a pure functional style.
Use the MVU diagram to follow the pure functional flow from UI changes and messages to updated application state. section 13.5.3
Figure 13.12 The SAFE Stack is a collection of different technologies bundled together to allow writing standards-compliant, rich web applications entirely in F#. The left-hand side of this figure represents the server side of the stack; the right-hand side represents the client side, which typically runs in the browser as a so-called single-page application.
Use the SAFE Stack diagram to locate Elmish within an F# web application alongside server, communication, and UI technologies. section 13.5.1
