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:

virtual dom
components
props / state
jsx

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:

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

Now

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

given my node structure, how do I index among multiple children
given my node structure, how do I to return multiple different child patches
how do I delete children from the original DOM if they don't exist in the new DOM

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