TL;DR
An experiment shows how native web APIs and small utilities can deliver declarative, reactive UI behavior without a framework. The approach composes a DOM helper, a Proxy-based deep state tracker, a reusable polling routine, and a modal orchestrator to mount a self-managing polling dialog.
What happened
The piece outlines an experiment that implements a modal dialog which mounts into the DOM, runs periodic API polling, exposes reactive internal state, and closes automatically when a specified condition is met. Rather than using a framework, the author composes four building blocks: a DomToolkit that centralizes element creation; a DeepStateProxy that uses JavaScript Proxy to observe deep mutations; a runPolling helper that isolates asynchronous retry logic; and a ModalOrchestrator that wires these parts together. Consumers call a declarative showPollingDialog API with options such as endpoint, request payload builder, shouldContinue predicate, polling interval, callbacks for resolution or rejection, and a content builder. The orchestrator updates Proxy-backed state during polling and routes final results to the provided handlers, demonstrating clear separation of concerns while relying only on built-in Web APIs.
Why it matters
- Demonstrates that core patterns of reactivity and declarative UI can be achieved without external frameworks.
- Separates concerns (DOM creation, state tracking, async polling, orchestration) to improve clarity and potential reuse.
- Isolating polling and DOM plumbing enhances testability because business logic has fewer platform dependencies.
- Highlights how small native primitives (Proxy, fetch, Promises, DOM APIs) can form readable architectural building blocks.
Key facts
- The example goal is a modal that polls an API until a consumer-provided condition is satisfied.
- DomToolkit centralizes element creation and standardizes attributes, classes, styles, and inner HTML.
- DeepStateProxy wraps plain objects with Proxy to report deep property sets and deletions to callbacks.
- runPolling is an async loop that calls a task, checks a stop predicate, and waits an interval between attempts.
- ModalOrchestrator.showPollingDialog accepts a declarative config (endpoint, requestPayload, shouldContinue, intervalMs, buildContent, onResolved, onRejected, devToolsEnabled).
- State updates during polling toggle flags like polling, attempts, and lastResponse, and can trigger dev debug output when enabled.
- The implementation intentionally avoids framework concepts such as components, hooks, virtual DOM, or stores.
- The article was published on January 12, 2026 and framed as an experimental exploration rather than a production library.
What to watch next
- Security, error-handling strategies, and edge-case behavior in production deployments: not confirmed in the source
- Browser compatibility limits and performance implications of deep Proxy usage at scale: not confirmed in the source
- Testing strategies and integration with existing app architectures: not confirmed in the source
Quick glossary
- Declarative UI: An approach where developers describe what the UI should do or show rather than prescribing step-by-step DOM updates.
- Reactive state: State that, when changed, triggers updates or side effects so the UI and logic stay in sync with data changes.
- Proxy (JavaScript): A native object that wraps another object to intercept and customize fundamental operations like property access, assignment, and deletion.
- Polling: A repeated asynchronous pattern where a client regularly requests a remote endpoint until a condition is satisfied or an error occurs.
- Orchestrator: A coordinating layer that composes utilities and business logic to implement higher-level behavior or flows.
Reader FAQ
Does this approach require a framework?
No — the experiment uses only native Web APIs and small utilities, explicitly avoiding frameworks.
Is the pattern production-ready as presented?
not confirmed in the source
Can nested state changes be observed?
Yes. The DeepStateProxy is designed to wrap nested objects so mutations at arbitrary depth trigger the configured callbacks.
How does the polling stop?
Polling stops when the consumer-supplied shouldContinue predicate indicates the desired condition is met, at which point the orchestrator toggles state.polling to false.
Declarative Reactive Interfaces Without Frameworks January, 12th 2026 5 min read Table of Contents The Target Behavior Declarative Usage Example Declarative Takeaways Core Building Block: DOM Utility Layer Reactive State…
Sources
- How to Build Reactive Declarative UI in Vanilla JavaScript
- How I Turned My Vanilla JavaScript Into a Fully Reactive UI …
- /vanilla-javascript-reactive-ui-without-framework
- Reactivity Without a Framework: What Native JS Can Do …
Related posts
- Fossil vs Git: comparing features, architecture, hosting and workflows
- Ai, Japanese chimpanzee famed for counting and painting, dies aged 49
- 7 ways to get your YouTube recommendations back on track and accurate