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!
Oldest comments (56)
I'm currently on the same journey. I'm really put off by the decisions React/Next have made so I've been exploring Svelte and Sveltekit.
As soon as I figure out authentication I'm switching completely
Curious which decisions by React/Next you disagree with? Assuming RSCs but wondering if there’s other aspects too
Well, yes... RSC is one of my issues.
I bet you can get things like Firebase, Supabase working in no time but again I'm the guy that hooks SvelteKit with dotnet API. I would never dare to write server code in JavaScript.
Hahaha.... I hear you.
Yeah, that's what I saw. I've been figuring a setup with Supabase. I've had a not so good experience with Firebase
I'm running Firebase on a big project and it has been ok until we tried to merge accounts aka keep single Firebase record with multiple emails and phone numbers.
and yes JavaScript on the server is a big no no for me.
When you try to do something more is when all our struggles begin. 😅😅
That's my best answer to this:
🤣🤣🤣🤣
Love this! Welcome to the Svelte team friend!
Thank you!
It's the first FE stack that I'm actually enjoying after months of usage and tossing on Tailwind CSS makes it a perfect combo.
I'm in the investigative part of my transition. I need micro-frontends with
single-spaand I want Vite.Svelte is so simple in comparison, it's just not fair. I think people will soon realize that Svelte is the uncrowned king. Is not a matter of IF, it's a matter of WHEN.
What I disagree with and I'm vocal about it, is statements like this:
I keep daring people to tell me which use cases can React handle that Svelte cannot. I feel that authors are just being political about it.
Yes!
One of my big use cases doesn't actually relate to what one technically can do and can't but to the fact that React has a component for nearly everything you would ever need while in Svelte you need to do it yourself. For some projects it is a deal breaker. Another big advantage of React is that teams can do both React Native and React Js. That's one of the reasons we haven't switched yet on one of my projects. SvelteNative needs to be a thing for Svelte to be adopted by a lot of companies.
Ah, I see. Well, with Svelte cutting down so much in terms of code, I bet it frees up time to play around and make components. 😄
So the phrase is actually a euphemism for "not a big community". Time will most likely take care of that one. I must say, though, that I have seen some VERY impressive things made with Svelte. There's a Doom game out, and the REPL on steroids that can be used to create SvelteKit projects and who knows what else. There are some very capable people out there interested in creating and sharing.
Hahah nice one. If that's a simple component that hey, why not and it's fun. When we are talking about something more complex components we are talking about weeks of work.
Of course the community will grow and I'm all for that and I hope my posts will contribute to it. Yes there are impressive things donde in Svelte but at the end of the day the decision takers in the companies will look at tech that has all perks.
It should be added here: reddit.com/r/itrunsdoom/
:-)
Wish me luck, I'll present Svelte to Intel the 2nd week of September. I will be showcasing a simple timer and how it was more complex to make it in React vs Svelte. I animated the Svelte one to add flare to it.
Hahah nice and good luck!
To make them go for it 100% just tell them that the guys at AMD use it for Ryzen related stuff :-)
There's not much code you can share between react js and react native anyway I'd say. So it makes sense to write the web in svelte and the mobile in Flutter, add once you're free from react on the web, you can afford complete liberty
In my case it's not much of a code share but team's skills. In one of my projects the guys doing React Native are also doing FE for an internal Dashboard and they swing React in both worlds like champs.
Good point, optimizations and tricky stuff is the same on react native and web
Most React dev's dream
As long as your intention to build small and personal projects . Sevelte is fine. But, at scale it is better to choose React. Helps in the long run
I manage 3 different teams and I have very interesting observation with regards to that.
So I would say it depends.
On one project I have a team of React developers working on huge Svelte project and the results are great, the team enjoys it and is capable of translating their skills into Svelte. The code base has an amazing simplicity that any newcomer is able to pick it up in no time. There is no component for a specific thing it's so easy to write one.
On another project I have very experienced React team working on React Js and React Native and although it is also going great, but we lived through some serious performance problems and very silly bugs and I think the main issue was the fact that the code is not easy to understand and you can easily loose the track what happens when. Also any bigger package upgrades caused problems while with Svelte we have nearly finished a full blown e-commerce with only 2 dependencies (Tailwind UI and Headless-UI).
My small project is getting a great traction: salarioo.com which I'm hoping it's going to get bigger and feature rich. I will share my experience then!
I encourage you to try if you haven't yet.
As I told @kedzior_io, I made the same thing in Svelte and React: A simple timer (countdown). I started with Svelte. Used a readable store to keep track of the time and then calculated the hours, minutes and seconds to present the time formatted. Done.
Let's do React. While it basically needed the same, I of course had to use
useState()for everything or the UI doesn't update. Svelte used regular variables for hours, minutes and seconds. Not React. No, sir.useState()everywhere. Anyway, I did 3useEffect()calls to calculate the whole thing. Done.Svelte's version: Flawless. I even animated the timer values with
fly. React's? Nope. Needs more work. Needs local variables to hold the hours, minutes and seconds calculation, or you need moreuseEffect()calls because everything is behind one cycle. The result is that 59 seconds is never shown as s59. It shows -1, then 58. There's also an odd behavior: When the React tab is not visible for some minutes, the seconds count is negative! It comes up normal in the next iteration of the number.Conclusion: Svelte just works. React needs to be made to work. The latter requires more learning effort or more talent than the former.
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.
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.
Take cradova for a spin and find out where simplicity meets speed
Link here
Oh nice! Will check this out!
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.
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.
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?
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".