4 ms·

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

raidicy 7y ago
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.
hencoappel 7y ago
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.
makkesk8 7y ago
Yes, Svelte does not utilize a virtual DOM.
SysINT 7y ago
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/ https://www.w3.org/WAI/standards-guidelines/aria/
- danShumway 7y ago
  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.
- zelly 7y ago
  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?
  - danShumway 7y ago
    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.

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.

hencoappel 7y ago

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.

makkesk8 7y ago

Yes, Svelte does not utilize a virtual DOM.

SysINT 7y ago

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/ https://www.w3.org/WAI/standards-guidelines/aria/

danShumway 7y ago
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.
zelly 7y ago
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?
- danShumway 7y ago
  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.