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 downThe problem
- virtual dom
- props / state
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
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