Recreating a Virtual DOM

For the second half of my batch at Recurse Center I decided to focus on building a simple version of React. The process of deciding what part of React I wanted to work on was an interesting challenge, and I'd like to share that thought process.

Breaking it down

The problem

React is JavaScript library for creating user interfaces, and it is made of many things:

The question

So what does it mean to rebuild a simple version of React – am I attempting to rebuild everything, or just specific parts? How thorough do I want to get in the reimplementation?

The conclusion

Ultimately, I ended up choosing to rebuild a simple version of the virtual dom. It seemed both interesting and challenging, and somewhat manageable.

The steps of a virtual DOM

These are the steps that my virtual DOM will perform:

  1. create virtual DOM (vDOM) (a node representation what original DOM should look like)
  2. convert that vDOM into an HTML string and append it to actual DOM
  3. listen for updates from components
  4. create new vDOM based on the changes
  5. diff vDOM with old DOM (creating patches)
  6. update old DOM with these patches
  7. return to step 3


This is the current state of my project and right now, these are some of the questions I have.

Today, I plan to implement the minimum working version of diffing with what I have, and/or abandon ship, and refactor and build out a version of this tutorial's implementation using TDD (I'm trying to use more TDD!).

And that's the state of things.

06 Oct 2016