Bind a value once, and let the page keep itself right

DOM/store turns a value into something the page follows. Set it in one place and every element bound to it redraws, without a render call and without a framework.

It grew up on a register. The Phlo POS draws the same order in two places at once: the cashier's screen and the customer-facing display, plus a running total, a tax breakdown and a receipt preview. That was string building, and string building means every screen has to remember to update itself. Now the receipt comes out of the store, and the customer half draws itself from the same data the cashier is touching.

Binding is markup:

<strong data-bind="cart.total" data-bind-format=money></strong>
<ul data-each="cart.lines">
    <template><li data-bind=".name"></li></template>
</ul>

data-bind follows a path, data-bind-format runs it through a formatter registered with app.format(), data-bind-attr binds to an attribute, and data-each repeats its <template> over a list and rebinds the copies. Computed values are declared once with their dependencies and recalculate when any of them changes.

Three things come along for free. persist() writes a path to local storage, so a half-finished order survives a refresh. Scope decides whether state belongs to the page, the tab or the app. And sync() mirrors a path to other clients over the daemon, which is how a second terminal shows the same order without a line of transport code.

One deliberate choice: a binding that fails logs and keeps going. On a register, one bad expression must not stop the rest of the receipt from updating.

Engine 1.0.1. See the store in the manual.