If you have been using React, you have used one implementation of virtual DOM perhaps without thinking too much about it. It's one of those concepts that's worth understanding in greater detail, though.
There are specific virtual DOM implementations like Matt-Esch/virtual-dom or palpepind/snabbdom. Today I'm interviewing Simon Friis Vindum, the author of the latter. Read on to learn more about the technology.
The beauty of it all is that application code now never needs to manually make changes to the DOM. It only needs to produce a DOM representation of the application as a function of the application state and the virtual DOM library will then take care of making the correct changes.
I wanted to use a virtual DOM library for a project of mine. I looked at the existing libraries available, but none of them was exactly what I was looking for. I found React to be too huge and I could see that other virtual DOM libraries where much smaller.
When I decide on libraries simplicity is a big deal to me. The more complex a library is the more opaque it is the its users. In the case of React I found its size, and thus complexity, to out of proportions to the functionality that I needed from it. However, when looking into the alternatives I found that they lacked certain features that I needed. Furthermore, I realized that it should be possible to create an even simpler virtual DOM implementation.
The original project was a spare time project so I chose to delay it and spend the time to create a virtual DOM library exactly after my head. In the end, I managed to implement one that was very simple and performant. I made the library modular and extensible so that new features can be implemented separately from the core. This made it possible for me to get the features that I wanted and for others to add theirs as modules.
React is in many ways a great library and in some cases I would prefer it to Snabbdom. Especially in a professional setting since React is so ubiquitous. I would use Snabbdom because of its simplicity and flexibility. It is simple because it only concerns itself with the very essence of being a virtual DOM library. As a result it is many times smaller than React.
To me that makes the library more elegant and it suits my aesthetics with regards to libraries. I invite people to look at the implementation of Snabbdom and compare it is React. One has to ask why React is so huge when a virtual DOM library can be so small.
The other benefit of Snabbdom is its flexibility. Its modular nature makes it extensible and its simplicity makes it unopinionated. This should make it possible for people to use Snabbdom no matter what architecture they want to use in structuring their application.
Snabbdom does everything I want. I continue to maintain it, albeit at a slow pace. An upcoming release will have some performance improvements and TypeScript support thanks to Tylor Steinberger.
I am also curious about what relevance virtual DOM will have in the future. Currently it is everywhere and for some very good reasons. But when I look at recent libraries, like Cycle.js and MobX, I wonder if these approaches really benefit much from virtual DOM. I am currently exploring that myself right now.
Yassine Elouafi has been doing some very great work with redux-saga and some very innovative FRP libraries. I'd love to hear what he has to say.
An interview with Brian Cavalier author of the most impressive library Most.js (pun intended) and other libraries would also be very interesting.
Thanks for the interview Simon! It's definitely interesting to see where the web will head. I don't expect we've seen it all just yet and virtual DOM is likely just one step amongst many.
If you want to dig deeper, check out Snabbdom's GitHub repository!