JavaScript framework reinvents itself… Did "runes" just ruin Svelte?

Summary

In this video, the creator dives into the recent changes introduced in Svelte 5, specifically the new 'runes' feature, which eliminates the dollar sign syntax for reactive data. The video explores the implications of this shift, describing how the runes simplify the reactivity system, making it more explicit and usable across JavaScript, TypeScript, and Svelte components. The creator shares their initial concerns and eventual acceptance of the new system, highlighting how Svelte 5 now resembles React, while React itself is adopting features from Svelte. Ultimately, the video provides insights into the evolution of front-end frameworks and their increasing similarities.

Takeaways

• 😀 The host initially tweeted that the dollar sign (`$`) in Svelte was the most powerful abstraction in modern front-end development, but later, Svelte introduced 'runes' which changed the reactive data syntax.
• 😀 Svelte 5 made 'runes' official, eliminating the dollar sign syntax for reactive data, causing a shift in the developer experience.
• 😀 The host initially struggled with the idea of changing to runes, referencing past transitions between frameworks like AngularJS to Angular 2 and React Hooks.
• 😀 The host humorously considers switching back to WordPress but ultimately decides to stick with Svelte, embracing the new features.
• 😀 Runes simplify Svelte’s reactivity system, making code more explicit and universal across JavaScript, TypeScript, and Svelte components.
• 😀 The four major runes in Svelte 5 are: State, Derived, Effect, and Props, each designed to handle specific reactivity tasks.
• 😀 The State Rune replaces the `let` syntax and creates a reactive variable that updates the UI when its value changes.
• 😀 The Derived Rune is similar to `useMemo` in React and `computed` in Vue, and it computes a new value based on reactive values while only updating when dependencies change.
• 😀 The Effect Rune is akin to React’s `useEffect` and runs code when dependencies change, replacing the `$:` syntax in Svelte.
• 😀 The Props Rune replaces the `export let` syntax, making it easier to define inputs to a component in Svelte.
• 😀 The host admits to being initially skeptical about runes but now firmly supports them, noting that their code now feels more stable and simpler than the previous version.
• 😀 React, Svelte, and Angular are all becoming more similar in terms of reactivity systems, with Svelte now resembling React and React adopting some features inspired by Svelte.
• 😀 The evolution of JavaScript frameworks is blurring the lines between them, and the host suggests that choosing a framework in 2024 is less about features and more about personal preference.

Q & A

What is the main topic of the video?

The video explores the new feature in Svelte 5 called 'runes,' which significantly alters the developer experience by replacing the dollar sign syntax for reactive data.

What is the significance of the dollar sign syntax in Svelte?

The dollar sign syntax in Svelte was used for reactive data and side effects. It allowed automatic updates to the UI when data changes, making the code more concise but also somewhat too clever or tricky to understand.

What change does the 'runes' feature bring to Svelte?

Runes eliminate the dollar sign syntax and introduce a more explicit and universal reactivity system. This system can be used not only in Svelte components but also in plain JavaScript or TypeScript files, simplifying the overall framework.

What are the four major runes introduced in Svelte 5?

The four major runes in Svelte 5 are: 'state' for creating reactive variables, 'derived' for computing new values based on reactive dependencies, 'effect' for running code when dependencies change, and 'props' for defining inputs to a component.

How does the 'state' rune work in Svelte?

'state' creates a reactive variable that automatically updates the UI when its value changes, making it similar to the reactive variables that were previously created using the dollar sign syntax.

What is the purpose of the 'derived' rune in Svelte?

The 'derived' rune is used to compute a new value based on a reactive variable. It's similar to the 'useMemo' hook in React or 'computed' in Vue, and it only updates when its dependencies change.

What does the 'effect' rune do in Svelte?

'Effect' is used to run a callback function whenever any of its referenced states change. It's similar to React's effect hooks and allows you to perform side effects when state changes.

What is the 'props' rune and why is it important?

The 'props' rune eliminates the need for the 'export let' syntax in Svelte and allows developers to define inputs to a component more explicitly and cleanly.

What was the initial reaction to the introduction of runes in Svelte?

Initially, many developers, including the speaker, were skeptical and even terrified of the change. There was a mix of denial, anger, bargaining, and depression before ultimately coming to appreciate the new system.

How has Svelte 5 changed in comparison to React?

Svelte 5 now looks and feels more like React in terms of its reactivity system, while React is starting to adopt features from Svelte, such as eliminating hooks like 'useMemo' with its new React 19 compiler.