In a sense, the Svelte framework runs at compile-time -- it takes your application source code, and uses its framework to produce a minimal JavaScript bundle that you ship to your end users.
In contrast, the React framework runs at run-time -- you ship React along with your application to the end user, and they boot it all up and run it there.
So, in terms of benefits, Svelte will be smaller and will likely run faster. As a bonus, it's much easier to learn.
For downsides, Svelte can be harder to debug, and the community is smaller. But that said, React is a hot mess with so many ways to do all the things because all the existing ways are terrible and so then people make even more new ways again...
But just like jQuery had its time, and Angular, so too will React fade. And we will look back and think, "whoa that was crazy".
Svelte's surface area is small enough and sane enough that I wouldn't feel bad investing there. You can just spend time getting stuff done instead of obsessing in React land about useEffect vs useCallback and nesting components 20 levels deep etc.
If you want to keep the sanity of Svelte but go for a larger job market and community, Vue is also a pretty good option.
* Styles are included so you don't need a whole other library for doing styling. Automatic component-scoped CSS is great. You can also include whatever your favorite compile-to-css language is.
* It's faster than React because there's no virtual dom. I've run into performance issues a lot with React and not much with Svelte. Never used Solid though.
* Less boilerplate. According to this talk, React components translated into Svelte components have around 40% fewer characters: https://www.youtube.com/watch?v=BzX4aTRPzno I've definitely noticed writing less code.
* Less JS bloat!* The actual Svelte library gets compiled away so you don't need to include e.g. the entire React runtime. *(There _is_ a crossover point when you have many many Svelte components where the bundle size will be more because each components has self-contained duplicated code, but my understanding is that it's pretty high).
* Use the HTML/CSS/JS/TS I already know. There's a little "magic" in the compiled reactivity system, but I've found it to be very minimal and easily understandable. I don't have to learn much to be very productive in Svelte.
* The interactive documentation. It's stellar. VERY clear and I can change all the examples they give and play around with things to test my understanding. The REPL is also super useful when asking questions to other devs about Svelte: https://svelte.dev/repl/
* Batteries included — Styles, animations, transitions, stores... all of these work really well together and I rarely have to go outside of Svelte itself.
And SvelteKit is taking all this to the next level with making Svelte available throughout the full stack. Heck, I'm making a SaaS boilerplate built on top of SvelteKit because I love it so much: https://sveltesaas.com/
Some drawbacks to Svelte:
* It's not as popular as React so you're not as well supported when developing. Think Stack Overflow or other developers in your organization.
* The reactivity system can be a little magic (for example you can't do array.push() to trigger a reactive update).
* You have to learn the templating system instead of just using the JS you already know. A little unfortunate, but I honestly kind of like using templates better — I don't enjoy JSX at all. I found it only takes like a half hour to learn Svelte's templating anyway.
I had a look at your blog, the article about your career transition into therapy was a very nice and insightful read!
