Imagine Svelte with Virtual DOM: A Vision for the Future of Web Frameworks

Hey there! Welcome to the exciting world of web development! Today, we're going to explore a fascinating concept that is revolutionizing the way we build web applications. So buckle up, and let's dive in!

Svelte is one of the most popular frontend frameworks, loved by developers and created by journalist Rich Harris. However, its approach to reactivity and stance on Virtual DOM (VDOM) has always been a topic of discussion when compared to rivals React and Vue.

While Svelte's approach makes sense, there are situations where the absence of VDOM can be limiting. This is where a new thought experiment comes in: a hybrid of Svelte and VDOM.

But before we delve into the thought experiment, let's take a closer look at what VDOM is and Svelte's no VDOM approach.

What is VDOM?

A virtual DOM is a copy of the real DOM that exists in memory, not on the screen. When making changes to the real DOM, it can be slow and inefficient. On the other hand, changing the virtual DOM is much faster and easier. By using a virtual DOM, you can make changes to the virtual copy first, and then compare it to the real DOM to find the differences. These differences are called patches, which can then be applied to the real DOM to avoid unnecessary repaints and reflows.

Frameworks like React and Vue use virtual DOMs to make websites more responsive and performant. They handle the creation and updating of the virtual DOM for you. However, Svelte takes a different approach and doesn't use a virtual DOM. Instead, Svelte compiles your code into highly optimized vanilla JavaScript, updating the DOM directly without the overhead of a virtual DOM.

Svelte's no VDOM Architecture

Svelte, one of the most loved frontend frameworks, is different from its rivals React and Vue in that it doesn't use a virtual DOM. While virtual DOM allows faster and smoother updates, it requires two copies of the DOM and complex comparisons. Svelte takes a unique approach by compiling code into small JavaScript modules that directly update the real DOM. It analyzes the code at compile time to know exactly what needs to change, making your website faster and smaller. Svelte's special syntax makes code reactive, automatically responding to changes in data or state.

Advantages of No VDOM

One of the major advantages of Svelte's no virtual DOM architecture is speed. By eliminating the need to create and update two copies of the DOM and compare the differences, Svelte can be faster and simpler than using a virtual DOM. It also results in a smaller bundle size, as fewer or no frameworks or libraries need to be loaded, which in turn improves the loading time and bandwidth consumption of web applications.

Svelte's no virtual DOM architecture also gives developers more control and flexibility over how they update the real DOM. They can use direct manipulation, data binding, templating, or any technique that suits their needs.

Disadvantages of No VDOM

However, the lack of virtual DOM architecture means more responsibility and complexity for developers. This includes managing and optimizing real DOM updates, addressing performance issues, memory management, event handling, and cross-browser compatibility. This can lead to less abstraction and convenience for developers, who may need to write more code or use more tools to achieve the same results without the benefits of a framework or library.

Another disadvantage is that when updating the real DOM directly, developers must manually synchronize the data and the UI to avoid inconsistencies. Although this applies to any approach that updates the real DOM directly, not just Svelte.

Why do we need VDOM in Svelte?

There are both advantages and disadvantages to using VDOM in Svelte, as we discussed earlier. However, having an option to enable VDOM in Svelte can provide some benefits to developers and professionals who require more advanced features or better performance in certain scenarios.

For example, enabling VDOM in Svelte can allow developers to use VDOM-based libraries like React Framer Motion for advanced animations or other VDOM-based libraries for other features that Svelte may not support natively. This can provide more flexibility and options for developers to build more complex applications with Svelte.

Additionally, enabling VDOM in Svelte can improve performance in certain scenarios, such as when dealing with large feeds or SPAs with multiple DOM operations. This can help Svelte remain competitive with other VDOM-based frameworks in terms of performance and scalability.

However, enabling VDOM in Svelte also comes with its own set of trade-offs, such as increased complexity and potential inconsistencies between the virtual and actual DOM. Developers would need to weigh the benefits and drawbacks of enabling VDOM in Svelte and decide if it's worth the added complexity and potential issues.

Hypothetical VDOM in Svelte

These issues have been faced by many Svelte developers at some point during their development journey. While Svelte's performance is exceptional, there are some shortcomings that become more apparent with long-term use.

What if Svelte had a virtual DOM that could be optionally enabled by developers at the component level?
For example:

<svelte:option vdom /><script lang="ts">export let count: number = 0;</script><button>{#if count > 0}Clicked {count} times{:else}Click me!{/if}</button>

In the example above, the svelte:option tag includes a vdom attribute that takes a boolean value and enables VDOM specifically for that component.

The Example we seen so far is relatively straight-forward to implement in the svelte repo as well. To use VDOM libraries such as Million.js or Hyper DOM with Svelte, the helper functions used by Svelte for DOM manipulations would need to be updated. With VDOM enabled, a virtual DOM would be created instead of a regular DOM. Whenever a component changes, the virtual DOM could be updated using the VDOM libraries, and then mounted. This approach would allow developers to avoid touching the actual DOM, which could lead to significant performance gains, particularly in cases where multiple DOM operations are required.

Example Implementation

Most of the DOM manipulating is done from a single file - svelte/src/runtime/internal/dom.ts we can just port this 757 loc (as of writing) to use some VDOM libraries or custom VDOM implementation. For example,
below is the code from the svelte dom.ts file

export function append(target: Node, node: Node) {    target.appendChild(node);}

we can change this to something like this

export function append(target: Node, vnode:(props) => VNode) {    const block = block(vnode)    mount(block, target)}

in the above example we have just changed the direct DOM manipulation with Million.js virtual DOM implementation APIs.

Similarly, we can port all the functions for VDOM and conditionally enable it. That's it we implemented new feature in svelte.

is that it?

Svelte is a powerful and efficient framework that has gained popularity in recent years. Recently, the Svelte team announced their plans for the upcoming versions 4 and 5. While there won't be any major breaking changes, the framework will continue to evolve and improve.

Optional VDOM is just an imaginary feature that will make the svelte even more awesome and cool. Even we can make use of dynamic imports (lazy imports) of VDOM so we can reduce initial javascript bundle size.

What will happen if this lands in Svelte?

Svelte's success does not mean that other frameworks will fall by the wayside. In fact, the frontend framework landscape is constantly changing, with new frameworks emerging all the time. Each framework has its own strengths and weaknesses, and developers must choose the right tool for their specific needs.

React, for example, is a highly popular framework that has a large community and a vast ecosystem of libraries and tools. Vue, on the other hand, is known for its ease of use and has gained popularity all over the world. Angular is a robust and comprehensive framework that is ideal for building large-scale applications. Ember, Solid, Astro, Qwik, Marko, Lit, and many others all have their own unique selling points and strengths.

Ultimately, the choice of framework depends on various factors, including the project requirements, the team's expertise, and personal preferences. While Svelte may not be the ultimate frontend framework, its unique approach and innovative features have certainly made it a popular choice among developers.

Conclusion

Finally, We are waking up from the thought experiment, Svelte may or may not be good but it is a good framework to start web development journey. Hybrid of svelte and vdom may be nothing as of now, but it may be a thing in the future. May be another framework could arise based on svelte with vdom.

If you found this post informative and useful, be sure to follow for more content like this to enhance your web development skills and stay up-to-date with the latest trends and technologies in the field.