The Web APIs React and Angular Apps Need From a Browser
Nemo · · 3 min read
A framework like React or Angular doesn’t need the whole web platform. It needs a solid core: the DOM, events, a correct event loop with timers and microtasks, networking, routing through the History API, storage, and a handful of observers and layout queries. Every major engine (Blink, WebKit, Gecko) has all of it, which is why Monok v1, built on the Mac’s WebKit, runs these apps the way Safari does. For a new engine, the same list is the bar to clear before any real app works, and it is the bar Monok’s paused own engine would have to meet.
What does a React app call?
React’s DOM renderer creates and updates elements directly, so the first requirement is a fast, correct DOM:
- Tree changes:
document.createElement,createTextNode,appendChild,insertBefore,removeChild,textContent. - Attributes and properties:
setAttribute,removeAttribute, element properties likevalue,checkedandclassName, andstylefor inline styles. - Events:
addEventListeneron the root container. React attaches listeners at the root and dispatches its own synthetic events from there, so event bubbling, capture andstopPropagationmust follow the spec exactly. - Scheduling: React’s scheduler uses
MessageChannelwhen it exists and falls back tosetTimeout. Promises andqueueMicrotaskmust run in the right order relative to timers.
What about Angular?
Angular uses the same DOM and events, plus two things worth calling out:
- Change detection triggers. Traditionally Angular relies on zone.js, which patches async APIs such as
setTimeout,Promise,addEventListenerandXMLHttpRequestto know when to check for changes. Newer Angular versions can also run without zone.js, using signals. An engine should support both, which mostly means its async APIs must be ordinary, patchable JavaScript functions. - Forms and templates. Template-driven and reactive forms lean on input events,
focusandblur, and form element properties.
Which Web APIs do most apps use?
| API | Why apps need it | Without it |
|---|---|---|
| DOM Core and HTML elements | Rendering everything | Nothing renders |
DOM events, addEventListener |
Clicks, input, keyboard | Nothing responds |
Promises, queueMicrotask, setTimeout, setInterval |
The event loop | Updates run out of order |
requestAnimationFrame |
Smooth updates, animations | Janky or frozen UI |
MessageChannel |
React’s scheduler | React falls back to slower timers |
fetch, XMLHttpRequest, URL, URLSearchParams |
Talking to APIs | No data |
history.pushState, popstate, location |
Client-side routing | Links reload the page or break |
localStorage, sessionStorage, cookies |
Sessions and settings | Sign-in doesn’t stick |
getComputedStyle, getBoundingClientRect |
Measuring, popovers, tooltips | Popovers land in the wrong place |
MutationObserver, ResizeObserver, IntersectionObserver |
Component libraries, lazy loading | Images and lists never load |
TextEncoder, TextDecoder, crypto.getRandomValues, structuredClone |
Libraries and ids | Libraries throw at startup |
Intl (dates, numbers) |
Formatting | Dates and prices print wrong |
Why did Monok v1 choose WebKit instead?
Because this list is only the start. Real apps also lean on media, canvas, workers, IndexedDB and dozens of smaller APIs, and each one an independent engine adds takes months. Building on WebKit means a React or Angular app you open in Monok gets the same engine as in Safari, while the browser’s own work goes into the interface. The trade-offs are in why v1 runs on WebKit, and the paused engine’s plan is in the architecture post.
FAQ
Does React need a JIT-compiled JavaScript engine?
No. React runs on any engine that implements modern JavaScript correctly. A JIT makes heavy computation faster, but typical UI updates are dominated by DOM work.
Will my React or Angular app work in Monok?
It runs on WebKit, the engine behind Safari, so an app that works in Safari should behave the same way. Monok has no developer tools or extensions of its own in v1.
Can I keep my dev server next to the app?
Yes. A terminal pane can sit under the page in the same tab. Get the download and try it with your own app.