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://salarioo.com - a job board with salaries only. 🚀
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!
Top comments (54)
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
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
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:
🤣🤣🤣🤣
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.
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.
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.
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.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".
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.
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.
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.
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.
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.
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
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 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.
Take cradova for a spin and find out where simplicity meets speed
Link here
Oh nice! Will check this out!
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.
Most React dev's dream