A comprehensive code comparison testing the exact same draggable, collapsible, multi-column control panel across Canvas, DOM, and Game Engine architectures.
| Framework / Paradigm | Total Chars | Dense Chars | LOC | Nesting Depth | Ratio vs ZIM |
|---|---|---|---|---|---|
| ZIM (Canvas / JS) | ~2,850 | ~1,700 | ~85 | 4 – 5 levels | 1.0× (Baseline) |
| Svelte (DOM / SFC) | ~4,150 | ~2,900 | ~135 | 6 levels | 1.45× (+45%) |
| Vue 3 (DOM / Template) | ~4,350 | ~3,050 | ~145 | 5 – 6 levels | 1.52× (+52%) |
| Raw HTML & CSS (Vanilla DOM) | ~4,700 | ~3,300 | ~155 | 5 – 6 levels | 1.65× (+65%) |
| Python (PyScript / Wasm) | ~4,900 | ~3,450 | ~165 | 3 – 4 levels | 1.72× (+72%) |
| React (DOM / JSX) | ~6,200 | ~4,400 | ~195 | 6 – 7 levels | 2.18× (+118%) |
| Flutter (CanvasKit / Dart) | ~7,400 | ~5,100 | ~235 | 15 – 18 levels | 2.60× (+160%) |
| Unity UI Toolkit (Engine / C#) | ~7,900 | ~5,400 | ~210 | 4 – 5 levels | 2.77× (+177%) |
| PixiJS (WebGL / Canvas) | ~8,600 | ~5,800 | ~250 | 4 – 5 levels | 3.02× (+202%) |
| p5.js (Canvas Immediate / JS) | ~8,900 | ~6,100 | ~265 | 4 – 5 levels | 3.12× (+212%) |
Ultra-lean reactivity (bind:value, v-model) saves JS lines, but they still must declare ~1,700 chars of CSS rules for slider tracks, vertical slider rotation, custom steppers, and drag event listeners.
Avoids framework runtime overhead, but requires manual CSS flexbox rules, explicit input skinning, and ~900 chars of vanilla JS for window drag math, collapse toggling, and stepper array cycling.
Clean indentation, but in the browser Python must communicate across the WebAssembly bridge (create_proxy), query DOM elements manually, and supply all underlying HTML/CSS styling rules.
Inflated by JSX tag trees, useState hooks, synthetic event callbacks, useEffect window listeners for drag delta math, and full CSS component styling.
Strict class typing and wrapping everything in nested widget objects (Padding, SizedBox, RotatedBox, SliderTheme) balloons the code into dozens of boilerplate lines.
Verbose C# style structures (setting 4 individual corner radii, new Color()), pointer capture callbacks, and lack of high-level composite widgets.
Pixi has zero built-in UI components or skins. Every button rect, slider track, thumb circle, checkbox mark, and coordinate offset must be drawn from scratch with PIXI.Graphics.
Immediate-mode rendering forces drawing every shape 60fps in draw(), writing manual hit-testing boundaries in mousePressed(), and tracking slider physics by hand.
Native interactive canvas components with built-in styling, proportional scaling (.sca()), Tile declarative 2D layout arrays, and Panel({draggable: true, collapse: true}).
Nesting depth directly impacts cognitive load. While DOM frameworks average 5–7 levels, Flutter requires up to 18 nested brackets just to render a rotated slider inside a sub-column.
Stepper, Slider, Button, Panel) have refined, proportional vector skins. DOM frameworks require 1,700–2,500 characters of custom CSS just to construct these basic primitives.
Tile Outperforms Flexbox for Composite Layouts: By passing multi-dimensional arrays into nested Tile constructors with unique: true, complex matrices (like 2-column mixed vertical/horizontal controls) are created in single lines without nested <div> soup.
{draggable: true, collapse: true} in ZIM replaces 600–1,000 characters of mouse listeners, window bounding math, pointer capture, and state toggles needed in React, Vue, Svelte, and Unity.