React vs. Svelte: The War Between Virtual and Real DOM

React Virtual DOM

React uses a concept known as Virtual DOM (VDOM), where a virtual representation of the UI is kept in memory and synced with the real DOM through a process called reconciliation. The reconciliation process will find the difference (diffing) between the Virtual DOM (An object in memory, where we push the latest updates to the UI) and the real DOM (DOM holding the previously rendered UI). Using specific heuristic algorithms, it decides how to update the UI. This process, for the most part, is fast, reliable, and immensely reactive. Pun intended 😄.

To achieve this, React bundles a certain amount of overhead code, which will run in the browser’s JS engine to monitor and update the DOM based on various user interactions.

Svelte Compiler

Svelte is purely a compiler, that converts your application into ideal JavaScript code when you build the application for production. Meaning it won’t inject any overhead code to run in the browser when your application is running to update the DOM.

This approach is relatively new when compared to React, which generally takes advantage of the virtual DOM.

Let’s find out what are key benefits we can gain by using Svelte.

  1. The building time is blazing fast when compared to React or even other frameworks. Usage of rollup plugin as the bundler might be the secret here.
  2. Bundle size is smaller and tiny when gzipped when compared to React, and this is a huge plus point. Even with the shopping cart application I built, the initial load time and the duration to render the UI is extremely low, only the chunky images I have added takes some time :).
  3. Binding classes and variables are relatively easy, and custom logic is not needed when binding classes.
  4. Scoping CSS <style> within the component itself allows flexible styling.
  5. Easier to understand and get started when compared to other frameworks as the significant portion of Svelte is plain JavaScript, HTML, and CSS.
  6. More straightforward store implementation when compared to React’s context API, granted context API provides more features, and Svelte might be simple enough for common scenarios.

Let’s find out where Svelte has its downsides.

  1. Svelte won’t listen for reference updates and array mutations, which is a bummer, and developers need to actively look out for this and make sure arrays are reassigned so the UI will be updated.
  2. Usage style for DOM events can also be annoying, as we need to follow Svelte’s specific syntax instead of using the predefined JS syntax. Cannot directly use onClick like in React, but instead, have to use special syntax such as on:click.
  3. Svelte is a new and young framework with minimal community support, thereby doesn’t have support for a wide range of plugins and integrations that might be required by a heavy production application. React is a powerful contender here.
  4. No additional improvements. Ex- React suspense actively controls your code and how it runs and tries to optimize when the DOM is updated and sometimes even provide automatic loading spinners when waiting for data. These extra features and continued improvements are relatively low in Svelte.
  5. Some developers might not prefer using special syntaxes such as #if and #each within their templates and instead would want to use plain JavaScript, which React allows. This might come down to personal preferences.

Svelte’s blazing fast build time and tiny bundle sizes are quite appealing when compared to React, especially for small everyday applications. Yet the enhanced features (context API, suspense, etc.), community support, a wide range of plugins and integrations along with certain syntax simplifications does render React attractive as well.

Is Svelte better than react or vice versa?

Well, Svelte does provide noticeable improvements in certain features when compared to React. But it may not still be significant or large enough to replace React completely. React is still robust and broadly adopted. Svelte has quite some catching up to do. But concept-wise, the compiling approach taken by Svelte has proven that virtual DOM diffing isn’t the only approach to build fast reactive applications, and a good enough compiler can get the same job done as good as it gets.

So which framework should you use for your next application?

When weighing the Pros and Cons, In my opinion, if you are building a small application, like a simple e-commerce application for your startup, I would recommend Svelte. If you have a good knowledge of JS, HTML, and CSS, its easier to master Svelte. You can also build some powerful fast and lightweight applications with Svelte.

For huge production applications that require several integrations and specific plugins, then maybe React still might be the way to go. Then again, much like React provides Next.js, Svelte also provides its production-ready Single Page Application framework called Sapper, which might be worth looking into.

Both contenders are practical and efficient tools to build brilliant user interfaces. Choosing between the two as of now is mostly based on your scenario and preferences. As I have mentioned above, it’s challenging to announce one winner since they both perform beautifully to achieve their primary goals.

I hope this article gave you a quick comparison of React and Svelte. And it would be helpful to decide which library to choose for your next application. Cheers!

Author: admin

Leave a Reply

Your email address will not be published.