Hacker News Reader

Comment by helltone | Hacker News Reader

What is a virtual DOM, and can we have SPA without it?

Yes, however it is important to know one will loose accessibility for people using assistive technologies. For background try W3C's Web Accessibility Initiative (WAI) Accessible Rich Internet Applications (WAI-ARIA) https://www.w3.org/WAI/standards-guidelines/aria/

This is a bit misleading; you're losing accessibility only if you're never rendering to the actual DOM. A virtual DOM is just a way to avoid interacting with the real DOM until the last second, it doesn't really have anything to do with your final render target.

Svette avoids a virtual DOM while still rendering to the real DOM. It keeps itself fast by compiling your code to optimize unnecessary operations beforehand. Svette can still be used for accessible web apps.

JQuery and pure Javascript just manipulate the real DOM. This can come with performance consequences, but for many apps, the performance consequences don't matter. JQuery/Javascript can still be accessible.

React/Preact/etc... all use a virtual DOM. They can be accessible as well.

The virtual DOM is not the thing that gives you accessibility. You could have a virtual DOM that rendered to canvas and it would not meet accessibility standards. Accessibility is determined by your final render target, not by how you get there.

I understand WAI for articles and "document" web pages, but does anyone who uses these technologies use them on web apps? Is this even remotely the audience for most of these SaaS SPAs?

Ideally we'd like SaaS SPAs to be as accessible (if not more accessible) than articles/documents.

The WAI looks mostly aimed at applications anyway, I suspect in part because there aren't a ton of compelling reasons to use WASM for a static page.

As already stated, the idea is that you have an object that represents your DOM. When your code makes changes to the DOM, it actually affects the virtual DOM, this allows for lots of quick changes to the vDOM without much overhead, then at some point the vDom is synchronised with the actual DOM. This reduces the overhead between wasm->JS as you don't have to do it as often, it also can improve the performance as DOM changes can be slow.

A virtual DOM is a copy of the DOM that is usually diffed and updated based on the differences.

> can we have SPA without it? Yes. You can set divs to be visiable/hidden based on routing with vanilla js. And there's a framework called Svelte that is a SPA framework without a vDOM.

Yes, Svelte does not utilize a virtual DOM.

Reply on news.ycombinator.com