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.
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.
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
- 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.
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?
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.
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