React vs Svelte: How to Build Messaging Components

Consider both strengths and weaknesses of the revolutionary JS framework and decide

Without a doubt, IT is the fastest-growing and ever-changing industry today. A lot has been written about various technologies. Everyone shares their individual opinions and so do I. I dare say I’m well-versed, having quite a lot of experience, and glad to be of service to you. So, today I’m going to share the strengths and weaknesses of Svelte vs React performance, discover what sets them apart, and outline the key benefits of both in the use. 

---

Svelte as a Radical New JS Framework for daredevils

I first came across Svelte only when the third version was presented. A lot of people wrote articles about technology, and it suddenly became much-hyped in the developer community. For myself, I watched many videos by Rich Harris, and his insights and explanations convinced me the new framework is promising and quite useful. For this reason, I decided to start learning the Svelte framework and to give it a go.

Why did I state the Svelte is a revolutionary framework?

The reason is it offers an entirely new approach towards how user interfaces are built. Partially, it sets it apart from other frameworks. Since Svelte is itself a compiler, it doesn’t need to do most of its work in the browser. It performs the work during the compilation stage. So, the framework is lightning-fast. What’s more, there is no such tool as virtual DOM. Svelte makes automated updates of the data. As a result, it brings many benefits for the users as they don’t need to waste their time waiting. It’s updated automatically according to ready-made instructions.

I have no doubts you can access all information on this and similar topics on the Internet. So, I’m not going to retell the theory you can find yourself. Instead, I’d like to share my practical experience and impressions of developing the same project with React and Svelte.

My idea was to create a tool helping conveniently transfer the information about notifications. It had to incorporate a minimal set of functions for its quick application in larger projects. So, I decided to start the project not from scratch but from the use of a package development repository. It didn’t mean it streamlined the work. Still, once I started learning something new, each solution made me feel more confident.

For me, using Rollup as a module bundler was beneficial. It’s well-written with many examples helping me fully understand the work of particular functions. All I needed for the development, I could find in its documentation. For the first steps, the documentation is more than enough. Yet, when you want to start developing more complex features, you may need additional materials or tested solutions.

Who wins? Svelte or React?

My intention is not to tell directly which technology has more benefits. I want to provide coherent thoughts to let you decide for yourself.

Feature 1. Both frameworks are flexible in terms of creating skeleton projects.

Yet, the Svelte framework doesn’t give you as much freedom with the runtime as React does. In particular, if your code requires some dynamic changes, you’ll have to use special constructions notifying the compiler.

<script>

  let count = 0;

  $: doubled = count * 2; // it is executed once the value is changed 

</script>

// dynamic component

<svelte:component this={selectedСomponent}/>

Feature 2. The context of React and Svelte works the same way, but the approach to React seems to be simpler. Components give more visual feedback than functions. However, once hooks were designed, this advantage disappeared. 

// React

const Context = React.createContext([{}, () => {}]);

<Context.Provider value={{}} />

const [context, setContext] = useContext(Context);

// Svelte

setContext(key, { context: () => map });

const { context } = getContext(contextKey);

When there were still no hooks in React, I was learning context and trying to understand the simple things that this API allowed us to do. In React, context uses two basic components. It transfers information from the Provider component to its children components – Consumer. Having prepared the object with methods and data, I sent it to the provider, which made it available for all the components of lower levels.

From the start, since I didn’t want to be dependent on the store manager, in React, I used component methods stored in the context. In this way, I could manage the state of this component. In Svelte, there is a built-in store, which is quite simple to use, and it doesn’t insert a lot of code into the final build.

const {

  subscribe,

  set,

  update,

} = writable([]);

const store = {

  subscribe,

  addNotification: notification => addNotification(notification, update),

  removeNotification: notificationId => removeNotification(notificationId, update),

  clearNotifications: () => clearNotifications(set),

};

Feature 3. Unlike React, with Svelte components, you can write code in a way that is similar to the code of web development models like HTML, CSS, and JS. In Svelte, you write concise code because it’s a reactive framework.

<script>

  let phrase = ‘Sample phrase’;

</script>

<input bind:value={phrase} /> // auto-binding value

Feature 4. Nowadays, the integration of Svelte with TypeScript is still in progress. Until then, one should implement all the advantages of typification on their own. In turn, React has PropTypes and Flow, and even though it does not cover all the 100 percent of cases, it covers at least all the input data.

My Verdict

When talking about the benefits of Svelte vs React, there’s no distinct answer “yes” or “not”. It really depends on different scenarios. Sometimes, you may choose Svelte over React, in other cases, you may opt for React vs Svelte. At some point, they may seem similar, but they work differently. 

Rich Harris has made his own version with a clear difference. While Svelte is a compiler converting app code at a build time, React uses virtual DOM to provide the code during runtime. React is more robust and widely used among developers. Being much older vs Svelte and having a larger community, you get better and constant support for your project. Using Svelte, while you enjoy better performance, lower file size, and fewer boilerplate, you have to follow its syntax. 

Today, developers have many options to choose from among technologies. The question is which one is stronger, and what benefits it brings for developers in their purposes.

Talking about my general impression of Svelte, it’s rather positive. It was the first time I worked with a framework that had a completely different approach to solving the problems of modern web development. I hope Svelte will take its niche. Its development unfolds in several directions, which cover both the projects for which optimization is important and the projects which prioritize server rendering.

Both contenders prove they are good tools to create fast and powerful user interfaces. Your choice depends on your preferences and scenarios at the moment. As I’ve mentioned before, I am not going to mention only one winner since the answer would be very subjective. Both perform beautifully in terms of their goals.

If you still can’t opt between these or other frameworks, the Keenethics team can always consider your viewpoint and provide you with the best decision.