Glossary
Alphabetical definitions for all terms used across the MVT documentation. Each entry links to the page where the concept is explained in depth.
Related: Architecture Rules · Style Guide · Project Structure
| Term | Definition |
|---|---|
| Attribute | In JSX, a name={value} pair on a tag. On an intrinsic element (<sprite>, <text>) it sets a Pixi property; on a view, it gives the value of one of the view's bindings. A plain value is applied once; a function is re-read every frame. Other JSX libraries call a component's attributes props; this project calls them bindings. Style Guide |
| Barrel file | An index.ts that re-exports the public API of a directory module. All cross-directory imports must go through the barrel. Project Structure |
| Bindings | A plain object bridging view and model. Contains query bindings, which the view reads for state, and relay bindings, which the view calls to report user input. In this project, query bindings are named for what they return (score, isAlive) and relay bindings are on*() members (see the view convention). Architecture: Bindings · Bindings · Bindings in Depth |
| Change detection | A technique where the view polls a binding each frame and acts only when the value differs from the previous frame. Avoids expensive rebuilds for discrete state. Change Detection |
| Changed per frame | The share of containers that change in a given frame. A container that changes gets a new value in every one of its dynamic properties, so this is also the share of dynamic properties that change: 0% is a scene at rest, 100% means every container changes every frame. Used to describe the workload in the performance measurements. Performance Measurements |
| Continuous state | Model state that changes most frames - positions, velocities, animation progress. Read directly in refresh() with no change detection overhead. Reactivity |
| Discrete state | Model state that changes infrequently - scores, phases, lives, wave numbers. Watched via change detection to avoid expensive per-frame rebuilds. Reactivity |
deltaMs | Milliseconds elapsed since the last tick. The sole mechanism by which time flows into models. Models · Time Management |
| Domain units | Position, distance, and velocity units meaningful to the game domain (tiles, world-units, slots) rather than presentation-layer measures (pixels, points). Models |
| Dynamic property | A property on a view's output, such as a Pixi container's x, that is updated every frame to reflect a value in the model, so it can change. In JSX, given as a function that reads the model. Contrast with static property. Performance Measurements |
| Entry | A game, demo or art piece that the site's Arcade lists and runs: a directory under packages/website/src/entries/, whose start/ holds what the Arcade lists (entry.ts) and the code it imports when the entry is launched (load.ts). A project term, not an MVT one. Project Structure |
| Factory function | A createXxx(options) function that returns an object satisfying an interface. Used instead of classes for encapsulation via closures. Views are not factory functions in this sense: see View. This is a project convention, not an MVT requirement. Style Guide |
| Frame sequence | The strict per-frame order: model.update(deltaMs) then view.update(deltaMs) (views with state) then view.refresh() then the renderer draws. The Game Loop |
| GSAP timeline | A paused GSAP timeline used inside models to tween state over time, advanced manually via update(deltaMs). Never auto-playing. This is a project convention for time management, not an MVT requirement. Time Management |
| Hot path | Code that runs every tick (~60fps) - update() and refresh() and everything they call. Must avoid unnecessary allocations. Hot Paths |
| JSX target | A renderer's scene graph as this project's JSX runtime needs it: how to make a group, add, replace and detach children, show and hide a node, destroy it, and listen for its events. Each renderer has one, beside a table of its intrinsic elements; the runtime is the same for all. Always "JSX target", never just "target" |
| Leap-safe model | A model whose update() produces correct results for any deltaMs size (including large leaps). Purely arithmetic models are typically leap-safe; GSAP-based models with orchestration guards are typically not. Time Management |
<List> | This project's JSX component for presenting a collection: one item view per slot, built once and reused, each given an accessor for whatever occupies its slot this frame. Empty slots hide themselves and skip their subtree. Callable as a plain function too. Presenting Collections |
memoiseLast | A helper in @mvtjs/utils that wraps a one-argument function so it runs only when its argument differs from last time's, returning its last result otherwise. Remembers one argument, which must be a primitive. For views that poll a value every frame but should not rebuild what they show from it every frame, such as text from a number. Style Guide |
| Method list | The cached list of the update methods, or the refresh methods, in a view's subtree, parents before children, that updateView or refreshView invokes. Rebuilt only when the tree changes, so a steady scene costs a run through the list and nothing else. A performance detail of this project's renderer packages. Performance Measurements |
| Model | A stateful object that owns domain logic and advances via update(deltaMs). Has no knowledge of views or rendering. Models |
| MVT | Model-View-Ticker. An architecture for visual, interactive applications that separates state from presentation with a ticker-driven frame loop. Architecture Overview |
| Presentation state | State that exists purely for cosmetic transitions that the model doesn't track - the model has no reason to know about them because no domain outcome depends on them. Owned by the view that needs it. When the logic is complex, can be extracted into a view model. Presentation State |
| Query binding | A binding the view reads for state it presents, such as a position or a score. Given as a function the view calls every frame, or as a fixed value it reads once at construction; the bindings type declares which it accepts, and so whether the view supports the value changing. Never changes anything. In this project, named for what it returns (score, isAlive, tileKindAt(row, col)), with no get prefix. Architecture: Bindings · Style Guide |
refresh() | A view's per-frame function that reads bindings and updates the presentation output to match current state. Called after all models have updated. Views |
refreshView | This project's way to refresh a view: refreshView(view) calls every refresh method in the view, each once, parents before children, including what those methods attach while it runs. A host calls it once per frame on its whole stage, after updateView. The Game Loop |
| Relay binding | A binding the view calls to report user input, such as a tap, with the details of what happened. What the input means is up to whoever wired it. Usually optional. In this project, on + what the user did (onFirePressed). Architecture: Bindings · Style Guide |
| Renderer | The library a view's output is drawn with: Pixi, three.js, or the browser's DOM. This project has a package for each (@mvtjs/pixi, @mvtjs/three, @mvtjs/html), which registers its views with updateView and refreshView and provides a JSX runtime |
setUpdate / setRefresh | This project's way to give a view its per-frame steps: setUpdate(view, fn) sets its update method (its update(deltaMs)), and setRefresh(view, fn) its refresh method (its refresh()), on its Pixi container, three.js object or DOM element. A method that declares a parameter for the one it replaces wraps it; undefined clears it. Called by updateView and refreshView, never by hand. A project convention, not an MVT requirement. The Game Loop |
| Skills file | A self-contained instruction document that an AI agent can load for a specific task (writing a model, writing a view, following code conventions). Located in packages/docs/ai-agents/. |
SKIP_DESCENDANTS | A value an update or refresh method may return to skip its container's descendants for that call of updateView or refreshView, such as a hidden subtree. The Game Loop |
| Stateful view | A view that holds presentation state for cosmetic transitions the model doesn't track. Has an update(deltaMs) step so the ticker can advance its state; in this project, an update method set with setUpdate. Presentation State |
| Static property | A property on a view's output that is assigned once when the view is built and never updated from the model after that, so it costs nothing per frame. In JSX, given as a plain value. Contrast with dynamic property. Performance Measurements |
| Tick | One turn of the ticker's loop, and the word for each part of it: ticking a model calls its update(deltaMs); ticking a view calls its update(deltaMs), if it has one, then its refresh(); the ticker ticks the models, then the views, then the renderer draws. Architecture: The Ticker |
| Tick API | This project's name for the functions that update and refresh views, and what goes with them: updateView and refreshView for the host, setUpdate and setRefresh for views, hasUpdate, hasRefresh, SKIP_DESCENDANTS, and the tick counter (tickCounter, countTick). Defined once in @mvtjs/utils, for every renderer; each renderer package registers its views with it and re-exports it, and code imports it from the renderer package it uses. A project convention, not an MVT requirement. The Game Loop · Project Structure |
| Ticker | The frame loop that drives the application, one tick per frame: calls model.update(deltaMs), then view.update(deltaMs) (views with presentation state), then view.refresh(), then the renderer draws. The Game Loop |
update(deltaMs) | A model's per-frame method that advances state based on elapsed milliseconds. The sole mechanism for time to flow into a model. Models · Time Management |
updateView | This project's way to update a view: updateView(view, deltaMs) calls every update method in the view, each once, parents before children. A host calls it once per frame on its whole stage, after advancing its models, and then calls refreshView. The Game Loop |
| View | Presents the model's state: reads it through bindings (or model properties, for top-level views) and writes it to the presentation output via refresh(). Holds no domain state; anything it keeps is presentation state. In this project, a function XxxView(bindings) returning a Pixi container, three.js object or DOM element, usable as a JSX tag or a plain call. Views · Style Guide |
| View model | A plain object that owns extracted presentation state and advances it through update(deltaMs). A technique borrowed from MVVM for cases where a view's presentation logic is complex enough to warrant separate testing. Created and owned by the view that uses it - an internal implementation detail. When two sibling views share a view model, the nearest common parent creates it and passes it to both. Presentation State |
| Watch | A helper (watch()) that accepts a record of named getter functions, polls them each frame, and reports which values changed. Each watched property exposes changed, value, and previous. Change Detection |