< Back to blog
PUBLISH DATE:
UPD:
Sergey GornostaevSergey Gornostaev Full-Stack Developer

React vs Svelte: How to Build Messaging Components

Pros and cons of the revolutionary JS framework

React vs Svelte

Svelte as a Radical New JS Framework

Svelte is a revolutionary framework, which offers an entirely new approach towards how user interfaces are built. Unlike traditional JS frameworks, which do most of their work in the browser, Svelte does that work during the compilation. Moreover, it does not use such techniques as virtual DOM diffing. Instead, the code written with Svelte can surgically update the DOM once the app state changes.

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

I am not going to retell the information you can easily find online. Instead, I would rather tell you about my experience and impression of developing one and the same project with React and with Svelte. The tool I wanted to create would help to conveniently transfer the information about notifications. It would have a minimal set of functions for the quick application of it in larger projects.

I have decided not to start the project from scratch but to use a package development repository. It does not make the job much easier, but once you start learning something new, each ready-made solution makes you feel more confident. As a module bundler, I used Rollup. If you have ever set up Webpack for your projects, you would not come across a lot of new stuff.

Most likely, you will find all the necessary for the development information in the documentation. It is properly written and includes a lot of examples, which will help you understand better how a particular function works. For the first steps, the documentation is more than enough. Yet, when you start developing more complex features, you may find yourself lacking some materials or tested solutions.

Svelte vs React

Svelte does not give you as much freedom with the runtime as React does. In particular, you will have to use special constructions notifying the compiler if your code requires some dynamic changes.

<script>
  let count = 0;
  $: doubled = count * 2; // it is executed once the value is changed 
</script>
// dynamic component
<svelte:component this={selectedСomponent}/>

Context works the same way in React and Svelte, 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 to do. In React, context uses two basic components which transfer 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.

Svelte

In React, I used component methods stored in the context in order to manage the state of this component – I did not want to have any additional dependance from the store manager. In Svelte, there is a built-in store, which is quite simple in terms of usage and does not 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),
};

In Svelte, you write a concise code because it is a reactive framework.

<script>
  let phrase = 'Sample phrase';
</script>
<input bind:value={phrase} /> // auto-binding value

Nowadays, the integration of Svelte with TypeScript is still in progress. Until then, one should implement all the advantages of typization 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

If to talk about my general impression of Svelte, it is 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 that 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.

Do you want to develop a software product with this revolutionary product?

Svelte is a framework that our developers are actively working with. We are ready and willing to take up new projects on Svelte and to reveal the advantages of this technology.