Get best of the week

Is it time to forget about React and upgrade to Svelte?

Each year, a State of JavaScript study is published that summarizes the results of a survey examining the current state of the JavaScript ecosystem. This study covers front-end frameworks, server and mobile development, testing, popular resources for developers, and much more.

Everything in it, of course, revolves around JavaScript. Therefore, if you use JS for web development, I highly recommend taking a look at State of JavaScript if you have not already done so.

For me, one of the most interesting results of State of JavaScript was the unexpected attention of those who participated in the survey to the Svelte front-end framework .

In the overall ranking of leading front-end tools (based on indicators of awareness of the framework, interest in and satisfaction with it), Svelte appeared in second place. He goes there right after React , ahead of well-known tools like Vue.js , Preact , Angular, and Ember .
This shocked me a bit, as Svelte is a relatively new tool, both in terms of age and in terms of the software development paradigm.


Ranking frontend frameworks based on State of JavaScript research

I know that many of you can be outraged here and say that React and Svelte are, nevertheless, not frameworks, but libraries. I know this, but the research report was not written by me, so let's close the question of terminology on this.

I figured out an example of a Svelte template project and created a small Hello World application.


On the left is the simplest React project. On the right is a similar project based on Svelte.

Although this simple project was not difficult to bring to a working state, someone who previously wrote on React will need some time to master Svelte.

Is it worth the time to learn Svelte? Maybe we are only faced with another fashionable thing that will disappear as quickly as it appeared? I propose to find out.

Purpose of the study


I would like to answer the following question: “Should I stop wasting time learning React and start dealing with Svelte?”

We will look for the answer to this question by exploring the fundamental differences between React and Svelte. This will allow us to come to understand what unique qualities each of these tools has. As a result, we will find out which one is worth investing in.

We start with a review of each of the libraries, then talk about their pros and cons, and then draw conclusions.

React


In the last couple of years, literally everyone has been talking about React. This library, created by Facebook, quickly captured the world of web development. Now it is a web development tool that ranks first in the world (the truth, the answer to the question of “number one” or not depends on who is asked this question).

The React library, thanks in large part to the community around it, is growing faster these days than ever before. And while there are no signs of a slowdown in this growth.

Here are three React features that make this library particularly attractive:

  1. Declarative nature.
  2. Component-based application structure.
  3. Ease of use in terms of integration into an existing technology stack.

The declarative nature of React is what allows you to create interactive user interfaces. It is enough for the programmer to simply design the visual elements of the application for each state, after which React will do the rest. This simplifies the reading and understanding of the code, facilitates debugging.

How does React do the rest? Through the use of virtual DOM technology. The determination of which parts of the DOM needs to be updated is carried out in the bowels of the library, at an intermediate level between the code written by the programmer and the real DOM. Thanks to this technology, high page rendering speeds can be guaranteed.

The React library is designed so that exactly which technologies are used in the stack of developer tools does not matter. React-frontend can be "screwed" to anything. For example, backends based on Node.js , Ruby on Rails , Spring Boot , PHP, and so on. This library is completely neutral in relation to what it will have to interact with.

Why do some call React a "library" and some call a "framework"? In order to create a certain application, together with React, you need to use additional libraries used to control the state of the application, for routing, and for interacting with various APIs. If you create a React project template usingcreate-react-app - it will not have a certain set of tools that could be expected from the framework.

Svelte


Svelte is a tool that was created in order to change the situation in the field of frontend development. Here is a good video on Svelte 3, in which Rich Harris, creator of Svelte, very interestingly and emotionally talks about this library. If you have not watched this video yet, I recommend taking a look at it.

In this presentation, the history of reactive programming is well presented, the flaws inherent in the traditional implementation of reactive mechanisms are highlighted, and the solution to the corresponding problems is presented.

Much of what can be attributed to React's strengths is the foundation of Svelte. Rich Harris is very knowledgeable about the pros and cons of the React internals.

React maintains the interface up to date and performs other actions right in the browser. Svelte does its job during the build of the project. This is the main difference between React and Svelte. Here's what the Svelte documentation says about it: "Svelte converts your application into perfect JavaScript code during the build of the project, and does not interpret the application code while it is running."

Svelte does not use a technique like comparing the real and virtual DOM.

The Svelte compiler takes a declarative component and turns it into an efficient, imperative, low-level code that interacts directly with the DOM.

Since Svelte uses the compiler, not the virtual DOM, this allows to reduce the load on the browser, increase the speed of pages, and facilitate the browser JS engine garbage collection. The browser does not have to solve some tasks while executing the page code, which improves the productivity of projects.

True, like React, Svelte uses components written in a declarative style. The bulk of the difference between React and Svelte begins after they build the Svelte project.

Strengths and weaknesses of React and Svelte


Let's talk about the strengths and weaknesses of the studied libraries.

▍ Strengths of React


  • Strong community support.
  • A lot of libraries for testing code written based on React.
  • TypeScript support.
  • Quality developer tools.
  • , .
  • React-.

▍ Svelte


  • , , Svelte.
  • - (HTML, CSS, JS).

    • JSX .
  • .

    • Svelte- 40% , React-.
  • ( ).
  • .

▍ React


  • DOM — .
  • .
  • .
  • - React.
  • JSX- .

▍ Svelte


  • ( React) .
  • TypeScript.
  • , , , .
  • , Svelte ( , ).


Back to our question: “Should I stop wasting time learning React and start dealing with Svelte?”

Honestly, I started work on this article, expecting to come to the conclusion that Svelte is too young a technology, and that it is not worth investing particularly much time in its study. But after I figured out what was happening, after I got into the basics, I was very intrigued and impressed with what was revealed to me, with what kind of dynamics of Svelte I felt.

It is indisputable that Svelte projects have very good performance.

The ideas behind Svelte look bold and progressive. The size of the Svelte community is growing. I am sure that the success of front-end tools (as well as the breadth of their distribution) is highly dependent on the community and how developers adopt these tools.

As a result, we can say that if Svelte and everything related to this library continues to develop at the same pace, we can expect the widespread dissemination of this technology.

Of course, Svelte is just beginning its journey, so we do not yet know about those problems, and there may be many of them that will inevitably appear during the implementation of Svelte in real projects. We don’t know how programmers will circumvent these problems, how library developers will improve it.

When the React library first appeared, it looked like a state-of-the-art tool that has no drawbacks at all. But, with the development and spread of React, it turned out that web developers have to cope with various difficult situations, they have to look for workarounds, compromises. And the developers of the library itself also have to work hard to improve it.

I'm sure Svelte is waiting for the same. After all, the world of web development is extremely volatile.

If you are not ready to leave React yet, I would advise you, at a minimum, to closely monitor Svelte. This library can become a strong competitor to React much faster than you might imagine.

Dear readers! What do you think of Svelte?

More articles:


All Articles