Svelte Vs React 2021

Posted on  by admin

Simplicity is a feature. Svelte is way easier to use than React (I said “use” and not “learn”, because there’s a huge difference). It does not mean it’s less sophisticated. On the contrary, it abstracts complexity away from developers and provides simple tools to go beyond the reconciliation.

Which Framework to Choose? Svelte or React?

As you may already know, Svelte does not create any virtual DOM like React. You may also know that Svelte has no runtime, so it does not do the head part of its work in the browser, like React. Svelte runs all its optimizations during the compilation phase.

Using Svelte Native

React has a diffing algorithm that allows modifying only DOM nodes that need to update instead of re-rendering the whole application. The reconciliation algorithm has been a game-changer, but it’s limited by nature, and it does not fully work out of the box.

Related Articles

Don’t get me wrong, it works great, but as developers using React, we get extra work comparing to Svelte. Some developers call that “abstraction leaks”. Of course, Svelte is younger than React, so it’s fortunate it’s better, but it claims a true reactive framework should handle more points. That’s why it goes further with additional tools.

Prerequisites

This repository is a pretty cool visual that compares React hooks and Svelte:. In Svelte, all reactive statements are memoized. Notice that with Svelte, you don’t need to declare the dependencies. The compiler infers them for you. Smaller size means fewer bytes to parse for the browser, and Svelte is on the top of the world in this category.

React vs Svelte – A Technical Comparison

Build any hello world with any other framework, and you’ll probably get heavier bundles than for a complete application built with Svelte. It’s possible because Svelte has no dependency by default, only dev dependencies for the compilation. There is no need for external libraries such as CSS in Js as Svelte provides easy ways to modify classes and styles programmatically.

Build the App component

Write less, do more. Svelte follows that pattern, so ten lines of React code for a very basic component, including state management with hooks, often become two lines with Svelte.

Build the Heading component

It’s possible thanks to an efficient has been published many months ago. When it comes to JavaScript frameworks, Svelte is the new kid on the block.

  • I’ve been hearing a lot of buzz about it, so I decided to give it a try and see how it feels compared to React. This article is going to talk a little bit about the differences between Svelte and React, and then show you how to build a basic app with both frameworks.
  • The goal is to demonstrate a few core concepts that cover:. Structuring components. Initializing state. Event listeners. Dynamic styling. There’s a lot more to discuss, including conditional rendering, lifecycle methods, and other cool concepts, but for this article I’ll focus on the basics and give my gut check feeling along the way.
  • To get started with this tutorial, you should have the following tools and technologies ready to go:. Node.js installed on your machine. If you’re using VS Code, you might want to snag this Svelte extension. Both Svelte and React.js are component-based JavaScript frameworks for web application development.
  • Their main difference is that Svelte doesn’t use a virtual DOM. It will compile your code down to vanilla JavaScript at build time, whereas React interprets your code at run time. According to the Svelte documentation: .

Build the Button component

But the behind the scenes details weren’t as important to me during this investigation. I wanted to look at this from a developer experience perspective.

  • What is it like to write Svelte versus React? Does it feel nice? Is it intuitive? In this tutorial comparison, you’re going to be building a small app with the following requirements:. Three components: App, Heading, and Button. Every time the button is clicked, the heading will update with the current click count.
  • Every time the button is clicked, the color of the button will change. Create a new directory on your computer called svelte-react using the following commands:. Your next step is to scaffold boilerplate Svelte and React apps and run them locally.
  • Svelte’s setup process has one more step than React’s does. Your Svelte app will also run on PORT=5000 as opposed to React’s PORT=3000. In your terminal or command prompt window, run the following commands:. Open a second terminal, and navigate back to your new svelte-react parent directory.
  • From there, run the following commands:. You’ll notice that the Svelte commands ran a lot faster - that’s because with Svelte, you’re not really running a utility, you’re cloning a template. After running the commands above, you’ll see that both your Svelte and React starter apps have a lot of files and code already.

Test the apps

Feel free to explore these files. Component files for both Svelte and React projects should be placed inside the /src folder. If you look inside the provided /src folders, you’ll see that Svelte files end in the .svelte extension, whereas React component files end in .js.

So is Svelte better than React?

Each starter app came with an App component, located at svelte-react/svelte-test/src/App.svelte and svelte-react/react-test/src/App.js. Open each of these files in your preferred code editor and delete the code inside both of them. You’ll start fresh with new code.

What is Svelte?

Unlike React components, Svelte components allow you to write code in a way that feels a lot more like writing the HTML, CSS, and JavaScript of yore. All the JavaScript for your component goes inside tags at the top of the file.

React

Below the tags, you can write the HTML for your component. Yep - it’s just there, like in a regular HTML document. Then, below your HTML, you can add styles inside tags. Fun fact, the styles in each component are scoped only to that component.

Further readings

That means, for example, you can style

tags differently in every single component, and the styles won’t override each other on import. To get started with App.svelte, delete everything inside the file, and add some empty