NoDOM internal structure

The diagram below shows browser internal state once the NoDOM app loading process has completed. NoDOM has three caches: the data layout cache, the bulk cache, and finally, the live cache. More detail on those below. At the centre of the diagram is NDContext, the main rendering engine at the core of NoDOM. NDContext is stack based and uses a widget stack to drive the render process, which is built on the ImGui and ImPlot APIs. ImGui and ImPlot are, in turn, based on WebGL. We use the fmtlib/fmt implementation of std::format_to_n as a faster replacement for printf. Also note Font Cache IndexDB on the right. NoDOM uses emscripten's IDBFS API to access Chrome's IndexedDB for font storage.

Data Layout Cache: referred to as DLC or data lay in the code. The DLC holds the data and layout JSON delivered via WebSock once the initial HTTP GETs of shell.html, nodom.js and nodom.wasm have completed. Once the DLC has fetched data and layout JSON it uses emscripten::val to copy the data across from JSON into wasm memory. This is of critical importance as one of the biggest drags on wasm performance is crossing the JavaScript wasm boundary. The DLC's primary function is to ensure the render hot path is 100% in wasm.

Bulk cache: NoDOM has a close integration with DuckDB-WASM for bulk data. DuckDB-WASM gives NoDOM a SQL API for bulk data like cpty or instrument static. We use DuckDB-WASM to fetch parquet from our example servers for eg instrument static. In the breadboard.exe test app on win32 we link DuckDB in process and use the C API.

Live cache: NoDOM's live cache provides a fast path for market data, quotes, prices and analytics arriving by WebSock.

This diagram shows Chrome running the fin_server example. The top pane with ticker symbols is sourced from the bulk cache, from DuckDB-WASM, and is rendered using the BulkTable widget. Below it is a LiveTable showing us the live cache of faked market data. At the bottom right you see the MemEdit widget displaying the memory underlying the mid column in the live table.