Model, View, Update

Part I established the raw material: immutable values, pure functions, expressions, and types. This part assembles them into a user interface.

The architecture is called MVU, for Model-View-Update, and it originated in the Elm community (you will also hear “The Elm Architecture”). It is not one option among many in Mar; it is the way frontends are written. Every page in every Mar app, and every 60fps game, is the same three pieces:

• a Model: one immutable value holding all the state of the page,
• a view function: Model in, description of the screen out,
• an update function: message plus old Model in, new Model (plus commands) out.

If you have used React with a reducer (Redux, useReducer), you have met MVU’s grandchild; the pattern crossed over from Elm. The original, as usual, is simpler than the copies: there are no hooks, no effects-in-components, no context, no memoization decisions, because the language guarantees make them unnecessary.

The chapters:

1. The Loop: the full circle, from Model to pixels to input and back, and why one-way data flow ends a whole genre of UI bugs.
2. Commands: how a pure update talks to servers and clocks.
3. Subscriptions: how the world talks back on its own schedule: timers, keyboards, game ticks.
4. Pages and Navigation: how Models become an application with routes, protected pages, and typed links.