EXAMPLE · Example 7.1

A toy checkout space

The simplest real Anglish program — one UI space, one data binding.

The smallest example that shows every piece of an Anglish declaration: a UI space, a vibe block, a data binding, and a referenced task.

@checkout:UI
>>> A web-based checkout form with fields for shipping, billing, and payment.
>>> The form inputs are bound to %checkoutForm.
>>> When %checkoutForm is submitted, use $validateForm.

What this declares

  • @checkout:UI creates a UI space called checkout. As a UI space, it has built-in space-native tasks ($ui_reader, $ui_writer) that can be customised through vibe blocks.
  • %checkoutForm is a data binding inside the space — a structured object that holds user input.
  • $validateForm (declared elsewhere) is a task bound to the form-submission event, given %checkoutForm as input.

What the compiler does

It builds the Space–Path Graph:

  • A :UI node is created for checkout.
  • A binding for %checkoutForm is attached to that node.
  • A reference to $validateForm is recorded; the compiler will require it to be declared somewhere in the program.

If $validateForm doesn’t exist, the build fails with a clear identifier-not-found error. If %checkoutForm is referenced but never bound to fields, that’s also caught.

What you’d typically add next

A second UI subspace via dotted name (@checkout.payment:UI), a :FUNC space for $validateForm, and a :DATA space for persisting the order. See composing two forms for the next step.