Virtual DOM is the new IR

Jan 16, 2017 · 2 min read

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.

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:


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.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store