Seeking some suggestions : React vs Svelte

Developers: Plugin & API
1

Seeking some knowledge and suggestions:

One of the biggest feature I am trying to integrate in my Task Board plugin is the Drag and Drop, just like how Kanban plugin has done it. But in my plugin it will be a little complex, where some decision-making will be involved.

But before moving with the further development, I want to make some optimizations to reduce re-rendering. I realized, in the context of plugin development for Obsidian. I have two options now :

  • Stick to react and use memo. Later on, maybe switch to preact for more optimization.

  • Convert my whole code into Svelte.

I want to know the following things :

  • Will you recommend me to convert my current React codebase into svelte before moving forward (I am comfortable with both). Because you feel Svelte has some better feature than react, in this case for my plugin.

  • Specifically for DragNDrop support. Which one you think will outperform : Svelte or React.

2

Actually the reason for bringing this up, is, right now, I am struggling with :

  • First optimization in terms of avoiding re-rendering of the TaskItemCard component in my code. I have tried using the memo functionality of React, also in a process of learning it, but its becoming too complicated to use and not giving me the expected results yet. I am doing the memo integration in this branch.
  • Secondly, there are various other reasons, one of which is using the AppContext.

After working on the first thing for a while now, I decided to keep this branch on hold and start converting the whole codebase to Svelte framework. The reason, I think, Svelte might be a better framework for my current project is :

  • Using the svelte.store feature, I dont have to worry about AppContext anymore. And not only that, I can simply get rid of the session storage I am using currently. (Or may stick to it, in future). And also avoid using LocalStorage I am using at various places.
  • Dont have to worry about Virtual DOM anymore, as svelte reactive functionality will help to detect instant updates.
  • Not sure yet, but I think I might not have to make use of any optimization for re-rendering issue, as it will be easier to do with Svelte. So, only the TaskItemCard whose parameters have been changed, will re-renders.
  • Since, my plugin is mostly UI features. Hence, it might be a good decision to go with svelte.

So, for now, I am keeping the memo implementation on hold. And will be moving with conversion of my project into svelte framework.

If, you think, its not a good idea to go with svelte for my specific plugin, or I might struggle with certain feature integration such as DragAndDrop, which I mentioned earlier. Or it may not solve the re-rendering issue that efficiently, I would love to hear more on the same.

Thanks!

3

For those following this topic, here’s an update:

I’ve decided to continue the development of my plugin using React for now.

Initially, I considered porting the plugin to Svelte because of its in-built features that make it highly optimized. For example, Svelte inherently avoids re-rendering components whose props haven’t changed. Alongside this, Svelte offers:

  • Lightweight and faster runtime due to its compiled nature.
  • Cleaner and more intuitive syntax for writing reactive and dynamic code.
  • Advanced features like Svelte 5 Runes, enabling universal reactivity.

These advantages could have significantly optimized the plugin’s performance. However, I soon realized that transitioning from React to an entirely new framework like Svelte was more challenging than I had anticipated, especially for a beginner like me. The limited resources available for Svelte 5 at this time added to the learning curve.

While navigating these challenges, I came up with an alternative solution within React codebase itself. By changing my previous stupid approach and using the new solution, I was able to resolve the re-rendering issues to a quite extent and achieve the desired performance improvements. Though there’s always room for further optimization, the primary problem has been resolved, and the plugin performs efficiently now.

The Future idea

This decision doesn’t mean I’m abandoning Svelte altogether. In my free time, I plan to continue experimenting with Svelte, which will help me gradually learn the framework and eventually port the plugin into it. If, in the future, benchmarks reveal that the Svelte version offers significantly better performance, I will consider releasing the plugin in Svelte as well.

Lets talk about AI

Another interesting thought I had while exploring this topic is how advancements in AI might reshape development in the future. As AI tools grow more powerful and comprehensive, we could potentially see AI models capable of automatically converting a complete React project into an optimized Svelte version—or even into a better framework yet to be developed.

That said, frameworks like React and Svelte will continue evolving. It’s possible that React may gain new optimizations that may surpass Svelte’s advantages. Ultimately, the performance of a project doesn’t solely depend on the framework but rather on how it’s used and the quality of the code written. My experience with React reinforces this belief—it’s about using the tools effectively rather than switching frameworks prematurely.