GoonSvelte 5: The Rise of Runes
What's the Big Deal About Runes?
About a year ago, I made a tweet that said the dollar sign in Svelte is the most powerful abstraction in modern front-end web development. But, just weeks later, Svelte announced a brand new feature called "Runes" that significantly changed the developer experience by eliminating the dollar sign syntax for reactive data.
From Denial to Acceptance
At first, I was terrified of this feature, then I got angry, bargained about the tradeoffs, and finally, I came to accept and really enjoy Runes. So, why would the most loved JavaScript framework make a risky departure from the features people love about it?
The Old Way: Reactive State with Let
Before Runes, Svelte used a compiler to make reactive state updates work automatically. But, this magic only worked in a Svelte file, and it was difficult to share reactive logic throughout the application.
The New Way: Runes
Runes fix both of these limitations by making your code more explicit and creating a universal reactivity system that can be used not only in Svelte components but also in plain JavaScript or TypeScript files. This dramatically simplifies the overall framework.
The Four Major Runes
There are four major Runes in Svelte 5:
- State: Creates a reactive variable that automatically updates the UI when it changes.
- Derived: Computes a new value based on a reactive value and only runs when its dependencies change.
- Effect: Runs some code when its dependencies change, similar to React's useffect.
- Props: Eliminates the weird export let syntax in Svelte and allows you to define inputs to a component.
The Verdict: Do Runes Ruin Svelte?
In conclusion, no, Runes do not ruin Svelte. In fact, they make the framework more explicit and easier to use. The big question though is, do these Runes make Svelte feel too much like React?
The Future of JavaScript Frameworks
What's kind of funny about Svelte 5 is that it now looks and feels more like React. Meanwhile, React is starting to look more like Svelte. Angular is also making big moves in this direction with reactive signals inspired by SolidJs.
Conclusion
You can't go wrong choosing a JavaScript framework in 2024 because they're all the same thing, and that's a good thing. Thanks for watching, and I'll see you in the next one!
