What I lost actually is some code, while translating an app from React to Svelte. Reducing the code size significantly, at the same time it made it simpler to read and reason about the code.
This is not going to be a comprehensive guide, explaining whether Svelte is better or React, there are many of them on the web already.
Two key aspects in which Svelte is different than React (or any other popular library)
- Its a compiler, which turns your
Sveltecode into JavaScript/Html/CSS. So, unlike React, Svelte library is not actually shipped to the browser - Instead of dealing with virtual DOM, it directly deals with an actual DOM
Here is a sample app to compare
Few things you will notice here…
- Svelte is directly dealing with HTML, so, unlike JSX there is no need to have a single root
- No need to have a wrapper function
- The explicit import isn’t required
- State management is cleaner without hooks
This for a simpler component might not seem much. But the more complex the component gets, these benefits start making an impact on readability, size of the bundle and overall speed of the application.
So far, based on converting my hobby projects from React into Svelte(SvelteKit) it has been a great experience.
Hope this sparks your curiosity and inspires you to peek into the world of Svelte, now go write some code!
TechSpark 