Could someone give a one or two sentence explanation of why I would want to use Svelte over something like React? I have heard it is "better", but have never understood why.
We all like our coffee different, just as we all have favourite features and designs of frameworks. There is no correct, or best, framework, only personal preference and what's good enough for the job in hand.
Svelte is a Flat White with locally roasted coffee beans from an independent coffee shop.
React is a Starbucks Vanilla Late.
Vue is a Starbucks Caramel Machiato.
Angular is the Vanilla Late from your staff canteen, it used to be a bit rough, but seems to be better in recent years.
Not using a framework, is carefully weighing out the "correct amount" of beans, grinding them by hand, tampering it with the "correct force", and then making the "perfect" espresso.
- Vue is like a latte. It's smooth, easy to drink, and has a nice balance of sweetness and bitterness. It's also very popular and widely available. Vue is a progressive, incrementally-adoptable JavaScript framework for building UI on the web. It has a good and intuitive documentation, a large community, and a simple syntax. Vue is also performant and fast, and supports component-based development.
- React is like an espresso. It's strong, concentrated, and gives you a lot of energy. It's also the most searched and used framework among the four. React is a JavaScript library for building user interfaces. It has a large community, a lot of resources, and a high performance. React also uses JSX, which is a syntax extension that allows you to write HTML in JavaScript.
- Angular is like a cappuccino. It's rich, creamy, and has a lot of foam on top. It's also very complex and requires a lot of skills to make and enjoy. Angular is a development platform for building mobile and desktop web applications using TypeScript/JavaScript and other languages. It has a fast server performance, an MVC architecture implementation, and a good documentation. Angular also has a steep learning curve and is very complex.
- Svelte is like a cold brew. It's refreshing, smooth, and has no bitterness. It's also relatively new and innovative in the coffee world. Svelte is a new way to build web applications. It's a compiler that takes your declarative components and converts them into efficient JavaScript that surgically updates the DOM. It has no virtual DOM, no frameworks on top of frameworks, and no framework at runtime. Svelte is also truly reactive, easy to learn and use, and supports component-based development.
But I can't come up with any coffee analogy for that, there's just no mapping between those spaces that makes any sense.
You can technically do anything a framework does in your own JS, since they're all just opinionated JS libraries. You can make your own SPA or implement your own VDOM or SSG but it might take a long time and not be as battle tested. On the other hand you're also free to make your own optimizations that might work well for your needs without worrying about a huge framework.
Disclaimer: I <3 alpine.js
- I find it so much easier to understand. I don't have to useState/useEffect/whatever, I just assign variables and the component re-renders the relevant parts whenever I assign a new value.
- Styling is "just" CSS. No messing around with CSS-in-JS libraries and their various ways of being invoked. The CSS is automatically scoped to your component without you having to think about it (though IMO there’s work to do there with CSS variables and the like)
- The end-user bundle is so much smaller. This doesn't matter so much if you're creating a giant web app (e.g. Gmail) but I often work on smaller sites and it's very gratifying for users to only have to download ~20KB of JS rather than the hundreds (if not megabytes) you'd get with React. Has a positive impact on page performance scores, SEO etc too.
What's frustrating for me is that I'm so used to thinking in hooks that when I first gave Svelte a try, it didn't click. And I knew that was wrong, lol. The release of Svelte 4 is good timing, I might have a use-case at work for a small project to try it out, so I'm going to give it another shot.
I also don't understand the styling complaint. React devs used "just CSS" for years before some of them started pushing for CSS-in-JS. In fact, SCSS/CSS is the default for the still nearly ubiquitous create react app system.
End-user bundle argument is a red herring. What is true for "hello world" isn't true for large applications. The overhead of React is a one-time payment while each new Svelte component drags along all the code needed to support it (copying similar code over and over).
React's F + N * C (where F is framework size, N is component count, and C is average component size) is smaller for large values of N than Svelte's N * (F + C) approach.
> copying similar code over and over
This isn’t true. Svelte is more than capable of reusing code internally.
Just look at their "Hello World" application on the Svelte website. 5 lines of code transform into 45 lines of code.
Caveat: since I went react -> svelte it's possible I was just warmed up to JS by that point
React on the other hand feels like a pot warming up and we're the frogs being boiled alive at this point. You can write some perfectly valid, but naive React code and it's going to have some footguns. We're so used to write idiomatic React code we don't even notice that anymore. You learn to use stable references in callback functions, to be careful using Context, and so on. But the list is not short, and it only grows.
Wanna write some naive code in svelte two days in? There's a good chance it's the same code you'd write a year later. Maybe that's what people mean by "just JS".
you'll be happy to know that those are no longer the default in Svelte 4!
It doesn't though. React adds new features that are optional and everyone goes "Pfft, I'm moving to Vue because they added [blank]" I've got old React projects that still work fine.
There are languages/frameworks that move fast and break things and then there are languages that just move fast. And Javascript itself is also very backwards compatible. You could still just be using class components and Redux and be fine. I have no interest in these server components right now.
State in Svelte goes in stores. State in react seems to go in one of eighteen different mechanisms, which all begin with a 45 minute video of the author’s opinions about the true nature of reactive programming, when all I want to do is store a string.
So... useState? :)
Of course then I got to thinking about how I'd answer the question "How can I put make that useState value accessible at different points in the component tree?" and the answer was "Make a new context with createContext and wrap the context provider in a component which provides the state and write a hook to easily consume the context within a child component" and, yeah, that's not exactly a frictionless dev experience.
FWIW for simple state management in React I've heard lots of good things about zustand: https://github.com/pmndrs/zustand
It's really quite simple and elegant. Svelte's model would likely be more complex tbh.
At least the React ecosystem as a whole seems to have broken free from the delusion that Redux is the be-all-end-all of state management. Those were dark days.
Prop drilling in Svelte is exactly the same complexity.
useState() wouldn’t exist because Svelte doesn’t need a virtual DOM and the compiler takes care of reactivity (per the famous React vs Svelte meme).
Stores are way, way simpler than redux reflux whatever else.
I haven't dug too deeply into Svelte because last I checked it didn't play particularly nicely with TypeScript but this release may prompt me to give it another look.
I'm not sure how long ago you tried or what issues you ran into, but hopefully this will help with getting started with Svelte and TypeScript much more easily.
Yeah that toggle has been on there for months now actually
Svelte state management, for example, is just the `subscribe(callback: () => void) => Unsubscriber` interface. A couple of utility store functions are provided like `writable` and `derived` but state management libraries don't need to know anything about Svelte, just provide that single life cycle method. The context API looks almost exactly like React's.
There's also stuff like generally fewer LoC, more incentive to use native APIs and rebuild times measured in hundreds of milliseconds, but that first thing is what got me sold on Svelte.