In today's ever-evolving front-end landscape, React has been the crown jewel for many developers, including me. Its component-based structure, the efficiency of the Virtual DOM, and the vast community support made it a clear favorite.
Another thing called Svelte reached my ears. So I jumped into messing around with it and here is what I found:
1. Why Svelte?
Before diving into the transition, it's important to understand why one might consider moving. Svelte brings:
Simplicity: No Virtual DOM, less boilerplate, and straightforward syntax.
Performance: Svelte compiles components to vanilla JavaScript at build time, making it incredibly fast.
Reactivity: Reactive statements make data binding a breeze.
2. Initial Steps
The first thing I did was set up a Svelte project using Svelte's official template. Then, I spent some quality time with the official Svelte tutorial, which provides hands-on experience with the framework's core concepts.
3. Translating Components
Moving components from React to Svelte involved understanding the subtle differences:
JSX vs Svelte's Template Language: Instead of JSX, Svelte uses its HTML-like syntax, which made templates much more readable.
State Management: In Svelte, mutable state is handled with simple variables, and reactivity is achieved with a mere $: before a statement.
4. Event Handling
While React uses synthetic events, Svelte employs native event listeners. Transitioning meant:
Replacing onClick with on:click.
Eliminating event.persist() since Svelte uses native events.
5. Lifecycle Methods
React's lifecycle methods such as componentDidMount or componentWillUnmount got translated to Svelte's onMount and beforeDestroy.
6. Styling
Moving from CSS-in-JS (or any other React styling paradigm) to Svelte's scoped styles was refreshing. Each Svelte component gets its own encapsulated style, reducing the fear of global styles interfering with component-specific designs.
7. State Management on Steroids
While React has Context or Redux or Zustand for global state management, Svelte offers stores. These writable and readable stores made state management straightforward and less verbose.
8. Integrations & Plugins
Transitioning also meant looking for equivalent Svelte plugins and integrations or creating custom solutions when needed. Luckily, the Svelte community is robust and growing, offering ample resources.
9. Community and Support
I won't lie; the React community is vast. But the Svelte community, although smaller, is enthusiastic and rapidly expanding. Platforms like Discord, Reddit, and Stack Overflow provided ample support during my transition.
10. Conclusion
The journey from React to Svelte was awesome. While both have their strengths and use cases, Svelte's simplicity, speed, and clean syntax it's all I wanted.
All my new projects this year were built with Svelte. Here is my last one (a solo adventure):
https://shipdotnet.com - .NET 9 and Svelte 5 Starter Kit š
On another project (full blown e-commerce) I encouraged my team of experienced React developers to try it out and they loved it and yes we have almost finished it using Svelte.
That said I doubt I will go back to React. ā°ļø
In another words Svelte ruined React for me just as The Expanse ruined every other space science fiction.
š„
š„
Have you tried Svelte yet?
Share your experiences and thoughts below and thank you for reading!
If you enjoyed this post and want to stay updated, follow me on Twitter for the latest updates and check out my projects on GitHub.
May the code be with you!
Latest comments (56)
My journey is little bit different, I stick with Next.js but using Svelte store for state management and that's perfect combination.
As long as it solves your problem and makes your productive. š
That's a great article, I moved to svelte but wrote a project from scratch to allow employees to build an open resume (free json and pdf downloads) boostrapped by exporting their LinkedIn and helped by AI.
Svelte is very powerful, compared to the old next.js, apollo and react architecture i had before.
My project is at cvlink.in, maybe it makes sense to connect Salarioo with CvLink
Oh that is beautiful. Let me sign up and let's talk!
Cool, let's plan that
Any chance we could talk via Twitter?
I have some questions about the platform.
By the way great work!
@zhamdi forgot to mentioned my twitter account: twitter.com/KedziorArtur
I just saw your comment, I'm following you but didn't manage to write you a message. I'm @zhamdi on twitter too
I only need CSR(client side rendering) and was unhappy with Svelte's SSR-first approach, now React is becoming SSR-first as well, I might need go back to Vue.js which remains to be the only framework that separates its SSR work from its core that remains to be CSR only.
So no svelte for me for sure, I wasted a few months with it unfortunately. I do not need to set flags here and there and read your SSR content from Sveltekit to get a CSR out, it makes things unnecessarily complicated for my needs.
It seems that you believe SvelteKit is the only way to go in Svelte. It is not. SvelteKit is made to be SSR first. Just do regular Vite + Svelte projects with
npm create vite@latest.Too bad you had bad experience with it but it seems that your problem is a matter of quick configuration change to static adapter and that's it:
kit.svelte.dev/docs/adapter-static
dev.to/mandrasch/rich-harris-expla...
Yeah Vue is great and I have used for years injecting "reactivity" into ASP.Net Core Razor pages.
As an alternative good friend of mine uses this for his startup: lit.dev . He has been praising it for simplicity.
tried that and dislike sveltekit since I need zero SSR get involved.
so I went back to svelte, used svelte-spa-router to do client side routing(by the way, can svelte add a client side router by default), then I was looking for a state management solution(is context api my only option for CSR state management?), then for more options on UI libs(sveltestrap)...
my hope is that, svelte adds a client side routing built-in to keep its svelte CSR friendly, has some nice state management lib for the CSR, and keep SSR to sveltekit instead of svelte core, just do not sell sveltekit as CSR solution, it is not.
For state management, use Svelte stores:
Then import anywhere you need the counter.
As for routing, there won't be an official CSR router. Only SvelteKit has routing. If you need routing, you'll find 2 or 3 options to choose from if you surf the WWW.
This 100%. I now have to take stimulants to cope with using React in my day job. (OK, itās just caffeine, but I canāt cope without it anymore.) Itās all Svelteās fault.
SvelteKit is a game changer. I've used it, love it, and set it aside. I'll use it (or Qwik, or Solid) once component space further develops and stabilizes (a lot of abandoned SvelteKit libs). Time will solve this problem. Aauth.js is still experimental and an aria compliant, complete, proven component UI library is needed. Also, the choice of sfc/templated style like Svelte v. JSX is very much personal pref -- one is not better than the other, and I for one much prefer JSX style. So, yes, if you hate JSX then you're going to love Svelte. I think a lot of people confuse the ease of development that comes with Svelte for overall ease of use and productivity when considering ecosystem (but I agree it IS easier than React considering only framework). Despite what a lot of ppl like to parrot, React eco is much more than just a bunch of vanilla JS libs wrapped for React. For now, I'm still more productive (and therefore have more fun) developing on React. I use Remix, so maybe that's why (agree w/ other comments re: Nextjs and Vercel, which also oversees SvelteKit).
But isn't the ease of use of development improving the productivity?
Easier development translates into faster delivery and bug reduced code.
What I also have seen with a lot of developers is that Svelte brings them joy and joy adds up to productivity.
Of course it is. It is years ahead + backed by a big company and it will take time to grow.
However, for myself and I think for some of us the sacrifice of React's ecosystem for the ease of development is the sacrifice we are willing to make.
If you're more productive in Svelte then definitely use it -- I would too, but that hasn't been the case for me, despite very much wanting to get off of React. I'll revisit again in a couple years.
Yes it feels to me like going back to the roots of pure java script with the same powerful features.
When you use React your bundle is also vanilla js... Also a little confused by the mention of componentDidMount along with the other life cycle methods, that's the class way it's been recommended for years to use hooks.
For styling in react you can scope them the same way using css in js or better yet css modules.
Svelte is definitely a side grade vs an upgrade glad you're getting along well with it.
Same here. Thanks for pointing this out.
Will share once in production with the big project we are about to go live with. I'm sure it will have its own "gremlins".
React is still there at runtime. Svelte isnāt. However, I donāt think the difference is nearly as significant as all the other ways Svelte is a big step up from React. Solid, for example, keeps its framework at runtime just as React does, but it also results in small bundles and slightly edges out Svelte in terms of performance, at least in some cases.
In most cases performance wise it probably won't matter. In one of my SAAS I found myself in situations where I actually did have performance issues and had guys having years of experience look into it and we had hard time figuring what caused re-rendering. I also got tired of making everything into a component. I know some like it but .....me coming from the backend development I always think of component as shareable piece of code. But hey I understand why it is done like that in React and I followed.
Yes this is something I looked into next and loved the idea. I tried to use it with Astro.js and Next.js because I thought oh nice I can migrate one of my SAAS (excel like project requiring good perf) done with React + Next.js + mui.com (which is probably one of the best collection of React UI tools out there) without too much effort until I hit the problem with FOAT, so I abandoned it and forgot it completely. I should probably look into it again.
For context, I work on smart TV apps. Their browser runtimes can be quite slow, so performance is always front of mind.
Yeah those are the cases where performance does matter.
TV app would be developed as a native app rather than web app right?
I'm curious, what do you use to build these?
Considering the wide variety ui libraries and modules of react, I will not migrate to svelte
That's understandable, it is not a step to make for everyone. Each case is different.
You will have 2 libraries for svelte gantt chart but you will have a gazillion for react.
Take cradova for a spin and find out where simplicity meets speed
Link here
Oh nice! Will check this out!
Do you think you might make a follow-up article where you actually take some React styled and/or stateful components and convert them into Svelte? Iām interested in starting a project using it and Iām looking to try and get up to speed
Yeah, will try to post an example this weekend.
I'm mostly a backend person, when I tried react for the first time, it totally broke me, until I found svelte, along with TailwindCSS, I just feel like a frontend king šš!
Same as me I've done dotnet and python most of my life and I do like FE a lot, learnt VanillaJs, jQuery, Angular, Vue and finally jumped into React and actually created a SAAS with React that makes money but found it (without offending anyone out there) over-complicating things. Svelte is a near perfection of FE: simplicity + powerful features.