Hacker News Reader

Comment by dtx1 | Hacker News Reader

Can someone ELI5(+) what an isomorphic virtual dom is?

Isomorphic - runs the same on both web browser and server nodejs.

Virtual dom - not the real dom tree but a representation of the dom using nested objects. You can diff two versions of trees (current and updated) and apply the changes to the real browser dom. This makes building pretty UIs super easy since a view is essentially a function of state. Diffing the virtual dom and patching the real dom is much faster than iterating over the the real dom for every update.

On the server side, you use the virtual dom to render to html string.

So true isomorphism is basically when the same code is used in both browser and server. Server renders the initial page load to html string, once loaded by the browser the browser again uses the same view code to make further UI changes without causing a page reload (single page app). Good for search engines and crawlers, good for blazing fast performance and instaneous interactivity.

Sorry for the confusion I tried to write a title that would fit and guess I missed the mark!

What I really mean is a virtual dom implementation that

- On the frontend can diff/patch a real DOM node - On the backend can render into an HTML string that you can serve

So my intended takeaway with that title was:

-> A virtual dom implementation that allows you to write frontend web applications that support server side rendering.

Apologies for the buzz-wordification I didn't even realize ha!

> Sorry for the confusion I tried to write a title that would fit and guess I missed the mark!

You did not miss the mark, you did a good job in the limited space you had.

Some definitions from my understanding: "isomorphic" - can render on server and client side with same code, "virtual dom" - non-browser DOM, i.e. often just a HTML data model useful for mutating and then diffing to minimize changes to the page DOM, "dom" - the data model of the page.

An isomorphic virtual DOM is much like an inverted-index homomorphic shadow DOM, but instead of using a shadowed mapping they virtualize the original elements themselves.

> An isomorphic virtual DOM is much like an inverted-index homomorphic shadow DOM, but instead of using a shadowed mapping they virtualize the original elements themselves.

Not sure if this is ironic, but a 5 year old definitely wouldn't understand this!

Given software/computers are part of curriculum now, i would not be surprised if we have some five year old already understanding this.

I'm not sure if you are you are fucking with me or if i'm just ery stupid.... :(

AFAIK he's fucking with you ^^

Yup. Otherwise he's basically talking about a structure-preserving index that maps DOM elements - that are rendered outside the main document DOM tree - to a file.

And that's not really what's going on here.

Can someone ELI5 what an inverted-index homomorphic shadow DOM is? TIA

In a regular DOM there's just a tree of elements, this makes many operations tedious, e.g. finding elements with a given set of classes and so on. So with an inverted-index shadow DOM you get another DOM with element shadows and an index of element properties back to the shadow elements (making it an inverted index). Then simple boolean retrieval can be used instead of DOM traversal. Much more efficient. The actual reason why you want to use shadowing instead of direct-mapped nodes/elements is shadowing enabling E2C (element change coalescing) meaning instead of shadow element changes directly transferring over to a change of the actual DOM element you can batch changes on shadow elements together and change a bunch of DOM elements in one go, which avoids unpartitioned (and therefore wasteful) re-renders by the browser engine.

damn, this sounds awesome, specially the part about batching renders, much like 'vsync' but for DOM.

thank you for the info!

(Ok, before anyone goes running off telling their colleagues about this great new tech: I literally made all of this up on the fly except the batching stuff. That's actually one of two reasons why this whole shadow-DOM-stuff exists. The other is encapsulation. I think this whole thread is a most beautiful demonstration of Poe's law in its original form.)

I thought Shadow DOM only provides encapsulation??

I think "shadow-DOM-stuff" refers to the concept of virtual DOMs. The shadow DOM isn't really a virtual DOM though, sure. It's just encapsulated parts of the regular old DOM.

This is brilliant. Your first comment had me laughing; your second had me second-guessing myself.

I think I have some new tech to tell my coworkers about. >;)

This is not ELI5

Trolling 5 year olds is a long established tradition.

http://www.s-anand.net/blog/calvin-and-hobbes-dad-explains-s...

I think they asked for an ELI5 not an ELIPhD. :P

I don't think many would understand what an inverted-index homomorphic shadow DOM is, though I think I can cobble together a very very vague understanding.

Reply on news.ycombinator.com