Virtual DOM is the new IR

What is IR first:

An intermediate representation is a representation of a program part way between the source and target languages. A good IR is one that is fairly independent of the source and target languages, so that it maximizes its ability to be used in a retargetable compiler.

http://cs.lmu.edu/~ray/notes/ir/

By saying “‘virtual DOM is an IR” I mean it helps in compiling our code different platforms, even though it’s interpreted. In React native, the virtual DOM is essential technology to bring React into various platform including Android, iOS and TVs. Already old story. It’s what LLVM does being an IR.

But for some reason I still got a question:

In React, it’s a JavaScript Object create with a function:

React.createElement(
  type,
  [props],
  [...children]
)

Then where are the DOM APIs? Since it’s a tree, then we can manipulate the virtual DOM tree just like we manipulate the DOM tree. Yes, there is a way to change the virtual DOM since it’s basically JSON Objects and it’s trivial to manipulate JSON in JavaScript. No need for DOM APIs.

However, to port virtual DOM to various platforms we do need something that maps to the View components existing in Android and iOS, which is like reimplement a subset of a real DOM based on mobile technology other than WebViews. And I did see it in Weex:

Now we can call JavaScript APIs to update Native Views. I guess such APIs somehow exists in React Native or other platforms. I just didn’t read enough about them. With such APIs, virtual DOM is more sufficient as a intermediate layer between JavaScript and the UIs.