← Back
Home › Systems › Frontend and UI

ui-framework

reactive web UI framework

React, Solid

SystemTechniques · 9Primitives · 21 ui-framework Persistent data structures hamtdata-structures · medium: Hash array mapped tries and persistent vectors with structural sharing for immutable stateCode splitting lazy loadinggraphics · medium: Split bundles at dynamic imports, load chunks on demand, preload critical pathsCooperative ui schedulinggraphics · medium: Prioritized, interruptible render work split into time slices that yield to inputSignals and fine-grained reactivitygraphics · medium: A dependency graph of signals, memos and effects where reads auto-subscribe, so a state change re-runs exactly the outputs that used it, with no tree diff.›Ssr hydrationgraphics · medium: Attach client state and listeners to server-rendered HTML without re-rendering; mismatch handlingUi template compilationgraphics · medium: Compile templates or JSX to direct DOM creation and update instructions with static hoistingVirtual dom diffinggraphics · medium: Diff old and new element trees, patch the DOM with minimal operationsTopological sortgraphs · low: Order the vertices of a DAG so every edge points forward; the core of build systems, schedulers and dependency resolution, with cycle detection for free.›Dom event delegationgraphics · low: One listener at the root dispatching by target path; synthetic events and passive listenersKeyed list reconciliationgraphics · low: Minimal DOM moves for keyed children using a longest increasing subsequenceBrowser rendering pipelinegraphics · low: Style, layout, paint, composite: what triggers reflow and repaint, and how to avoid layout thrashingList virtualization (windowing)graphics · low: Create and lay out only the items inside the viewport plus a little overscan, and fake the full scroll extent, so frame cost depends on the screen, not on N.›Statechartsgraphics · low: State machines with nesting, parallel regions, history and entry/exit actions, so UI and animation logic stays linear in size instead of exploding.›Fast hash functionsdata-structures · low: Non-cryptographic hashes built from 64×64→128-bit multiplies and xor-shifts; pick by key size, trust level and whether the hash is persisted.›Radix triedata-structures · low: Compressed prefix tree for path routing, domain matching and prefix lookupsRank/select bitvectorsdata-structures · low: Bitvector plus small count tables: ones before position i and position of the k-th one in O(1); Elias-Fano builds compressed sorted lists on it.›Module resolutioncompilers · low: Resolve import specifiers to files: Node and ESM resolution, package exports, CJS interopHTTP caching semanticsnetworking · low: The rules (RFC 9111) that decide whether a stored response is still fresh, and how a cheap conditional request revalidates it when it is not.›Cooperative schedulingconcurrency · low: Green threads/coroutines yielding at await points on a user-space schedulerd-ary heapdata-structures · low: Array heap with d children per node (d = 4 typical): half the binary heap's depth, siblings in one cache line, faster priority queues.›Vsync frame pacinggraphics · low: Vsync, swapchain presentation modes, frame pacing, latency and variable refreshRecursive-descent parsingcompilers · low: Hand-written top-down parser with one function per grammar rule; simple, fast, with full control over error messages and recovery.›Name resolutioncompilers · low: Bind every use of a name to its declaration with a scope stack, handling shadowing, hoisting and closure capture in one AST walk.›+ 2 more techniques+ 5 more primitives