Svelte vs React
As I finish up mod 4 of flatiron school I’m starting to realize that perhaps I don’t like React the way most people do. I still have an issue of it being kind of confusing because everything is abstracted way too much and the boilerplates are annoying. To me, state can just work like any other variable but we have to use ‘state’ because that is the syntax required.
Svelte is a compiler not a framework. Svelte compiles code from production in a single vanilla js bundle. We don’t deploy the svelte library like we would in React. No extra scripts or libraries are shipped to production.It combines tiny vanilla js code that can update the DOM at the run time whereas react re-renders the code for every single little change. Svelte can also have multiple top level elements where as React can only have a single parent.
Let’s look at the same component being built by svelte and react. The React code will come straight from their documents and can be found here!
S I M P L E C O M P O N E N T
React: 14 Lines
Svelte: 10 Lines
It looks so much simpler and I love it. In the script tag you’ll find all the logic for this component. CSS is no longer a file that lives as a .css, instead, your styling is scoped by the component. The h1 will have blue text but only this h1 tag. Not the other ones that live outside this component. Lastly, you’ll see the HTML at the bottom which has the same syntax as you’d expect. You won’t need to call a ‘class’ attribute by ‘className’. Here’s a list of all attribute difference that may throw you off.
S T A T E F U L C O M P O N E N T
React: 33 Lines
Svelte: 6 lines
A N A P P L I C A T I O N
One consistent thing that I see with most example of svelte vs react code is that it takes less line of code, sometimes but a significant amount. As a developer, that should matter to you. Less code = fewer bugs= better performance = better user experience = happiness for everyone.
In all honestly, this blog might have been a reason to complain about react as I haven’t actually used Svelte at all. It is something I want to dive into because it just seems much more readable and I genuinely think that when new programmers come into the field not knowing which language to learn first, this will be the top most recommended language in a couple of years.
Check out this blog that shows you some of the metrics about svelte such as performance, size which is what you’d send to your client, lines of code which is about half the size as react, and popularity.
