• React vs. Svelte: The War Between Virtual and Real DOM
  • Keshav Kumaresan
  • The Nuggets translation Project
  • Permanent link to this article: github.com/xitu/gold-m…
  • Translator: niayyy
  • Proofreader: Alfxjx, X1NY

React vs. Svelte: Virtual vs. real DOM battle

I recently had the opportunity to use Svelte and learn how to create a simple shopping cart application. Also, I can’t help but notice a number of similarities with React. It’s amazing that it’s such a good competitor and one of the most popular JavaScript libraries for building user interfaces. In this article, I’ll compare Svelte and React to see how they fight behind the scenes.

Svelte is a compiler, while React uses the virtual DOM

React and Svelte both offer similar component-based architectures — meaning that both are capable of component-driven bottom-up development and share components across different applications.

The significant difference between them is that Svelte is a compiler that converts your application code into ideal snippet JavaScript code at compile time, while React uses the virtual DOM to interpret the application code at run time, the opposite. Yeah, there’s a lot of terminology, so let me explain.

The React virtual DOM

React uses a concept called the virtual DOM (VDOM), which is an in-memory virtual representation of the UI, and synchronizes with the real DOM through a process called reconciliation. During the reconciliation process, the difference between the virtual DOM (an object in memory that holds the latest UI update) and the real DOM (the DOM keeps the UI rendered before the update) is found (the diffing algorithm). Use specific heuristic algorithms to determine how to update the UI. This process, for the most part, is fast, reliable, and responsive. Pun intended 😄.

To do this, React packages some extra code that runs in the browser’s JS engine to monitor and update DOM nodes based on various user interactions.

Svelte compiler

Svelte is a pure compiler that converts your application code into ideal snippets of JavaScript code as you build online applications. This means that when your application runs the UPDATED DOM, it doesn’t inject any extra code that needs to be run in the browser.

This approach is relatively new compared to React, which typically uses the virtual DOM.

The advantage of Svelte

Let’s summarize the main benefits we can gain by using Svelte.

  1. Svelte takes less time to build than React and other frameworks. The secret may lie in using the Rollup plug-in as a packaging tool.
  2. The smaller package size when compressed with Gzipped is a huge advantage compared to React. Even the shopping cart application I built had minimal first load time and UI rendering time, with only larger images taking more time :).
  3. Classes and variables are relatively easy to bind, and no custom logic is required to bind classes.
  4. The component itself is CSS\<style>Setting ranges allows for flexible styles.
  5. Compared to other frameworks, Svelte is made up of pure JavaScript, HTML, and CSS, making it easier to understand and get started.
  6. The React context API has a more straightforward storage implementation, the fetch context API provides more features, and Svelte may be simpler for common scenarios.

The disadvantage of Svelte

Let’s look at the shortcomings of Svelte.

  1. Svelte doesn’t listen for reference updates and array changes, which is bad, and developers need to take an active interest in this and make sure arrays are allocated so that the UI can be updated.
  2. The way DOM events are used can also be annoying, and we need to follow svelte-specific syntax instead of using native JS syntax. React can be used directlyonClick, but special syntax is required in Svelteon:click.
  3. Svelte is a new, young framework with little community support and does not provide the rich plug-ins and integrations that larger applications might need. React is a strong contender here.
  4. There are no other improvements. React Suspense actively controls your code and how it runs, tries to optimize the timing of DOM updates, and sometimes even provides auto-load spitters while waiting for data. These additional features and continuous improvements are very rare in Svelte.
  5. Some developers may not like to use special syntax, like in templates#if 和 #eachThey prefer to use pure JavaScript, as in React. It may depend on personal preference.

conclusion

Compared to React, Svelte has a shorter build time and smaller package size, which is very attractive, especially for small, everyday applications. But advanced features (context apis, Suspense, etc.), community support, rich plug-ins and integrations, and some ad-hoc syntax simplifications make React more appealing.

Svelte versus React?

Svelte does offer some significant improvements over React. But it’s not enough to completely replace React. React is still powerful and widely used. Svelte has a lot of work to do. But conceptually, the compilation approach taken by Svelte proves that the virtual DOM Diffing algorithm is not the only way to build responsive applications, and that a good enough compiler can do the same job well.

Which framework will your next application use?

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. Svelte is easier to master if you have a good understanding of JS, HTML, and CSS. You can also use Svelte to build powerful applications that are fast and lightweight.

For large online applications that require some integration and specific plug-ins, React might be a better choice. Like React, which offers Next. Js, Svelte also offers its production-ready single-page application framework, called Sapper, which may be worth investigating.

Both competitors are practical and effective tools for building great user interfaces. So far, choosing between the two has largely depended on your usage scenarios and preferences. As I mentioned above, it was a challenge to announce a winner, as they all did so well to achieve their main goal.

I hope this article gives you a quick comparison between React and Svelte. This will help you decide which library to use for your next application. Cheers!

If you find any mistakes in your translation or other areas that need to be improved, you are welcome to the Nuggets Translation Program to revise and PR your translation, and you can also get the corresponding reward points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.