Since then, I've continued to develop it and it has become a fun tool for me to use. I ended up releasing my framework under the name Kobra and is available on NPM.
Below are the top 3 concepts that I learned from building the framework.
My first exposure to learning how a Virtual DOM works was a talk by Jason Miller (the creator of Preact). Jason does a great job of explaining how JSX tags get transpiled to function calls, a simple shape of a Virtual DOM node, and a simple DOM diffing algorithm. I used this as the initial basis for my Virtual DOM, but have since iterated on it.
I wanted to include a router in my framework, so I had to learn how the browser handles changes to the history state.
To do this, I used the
PopState event. Navigating through pages dispatches a
PopState event, and the Kobra router listens for these events via
State management turned out to be easy to put in place. Following the Redux model, actions are dispatch from the components, and a reducer updates the state accordingly. I was able to do this in about 13 lines of code.
You can't improve something if you don't use it. I learned this by building a few applications with the framework. I encountered bugs in the diffing algorithm, as well as more functionality that I needed.