React VS Svelte - Which one should you choose in 2024? ft Rich Harris

Summary

In this insightful discussion, Rich Harris, the creator of Svelte, compares Svelte's compiled approach with React's runtime methodology. Harris argues that Svelte's design offers advantages in UI development due to JavaScript's unsuitability for describing user interfaces. He acknowledges React's robust ecosystem and advanced data handling but asserts Svelte's simplicity and performance as key benefits. The conversation also touches on the philosophical differences between the frameworks and the potential of Svelte 5 to address advanced programming needs while maintaining ease of use.

Takeaways

• 🤔 Rich Harris, creator of Svelte, has written enough React to be familiar with it but hasn't built substantial applications with it.
• 🔍 Svelte is a compiled language, whereas React is a runtime language, giving Svelte a design advantage in UI development.
• 👎 Harris argues that JavaScript is not a good language for describing user interfaces, unlike HTML which is, once interactivity is added.
• 🛠️ Svelte has to develop its own tooling, like a type checker, which is an overhead compared to other frameworks.
• 🌐 React's recent updates, like React 19's experimental compiler, show a trend towards pre-runtime compilation in web development.
• 📈 The adoption of compiled languages in web development is not inevitable, as seen with Elm or Mint, due to the familiarity gap and learning curve.
• 👌 Svelte avoids the learning curve by being similar to HTML, allowing developers to use their existing skills.
• 📱 Harris suggests that Svelte might allow for an application with no JavaScript, emphasizing its templating capabilities.
• 🔄 React's ability to write code that runs directly in the browser without build steps is a niche advantage, but not commonly used.
• 🌟 React has a strong ecosystem and job market, which are significant advantages for developers choosing to learn and use it.
• 💡 Svelte's focus on simplicity and performance for common UI tasks makes it an attractive choice for developers looking for a streamlined framework.

Q & A

What is the main difference between Svelte and React as described by Rich Harris?

Svelte is a compiled language, while React is a runtime language. Svelte has the advantage of a larger space to search for solutions to problems as it doesn't have to fit everything into JavaScript, which Rich Harris argues is not fundamentally well-designed for UI development.

Why does Rich Harris believe JavaScript is not ideal for describing user interfaces?

Rich Harris thinks JavaScript is not a good language for UI development because it is event-driven, and UIs are better described in a state-driven manner. HTML is great for static UIs, and the gap to make it interactive is smaller compared to adapting JavaScript for the same purpose.

What does Rich Harris think about the adoption of compiled languages in web development?

Rich Harris doesn't see it as inevitable that compiled languages will overtake runtime languages. He mentions that despite the advantages, there's a familiarity gap as people are reluctant to learn new languages, which has limited the adoption of languages like Elm or Mint.

How does Rich Harris view the role of compilers in web development frameworks?

Rich Harris sees compilers as a positive development in web frameworks, noting that doing more work before the application runs improves the user experience. He mentions that React 19 now has a compiler, indicating a trend towards compilers in the industry.

What are some of the advantages of using React over Svelte according to Rich Harris?

Rich Harris acknowledges that React has a large ecosystem, a wide range of available jobs for developers, and advanced capabilities for data handling and large applications. React's approach to colocating data with components is also seen as an advantage for managing asynchronous operations.

What does Rich Harris think about the learning curve for Svelte and React?

Rich Harris believes that Svelte might lead to a more idiomatic understanding of JavaScript because it doesn't introduce as many abstractions as React does with its hooks and component lifecycle. He suggests that React developers might be learning React-specific patterns rather than general JavaScript.

How does Rich Harris view the community and collaboration between different web development frameworks?

Rich Harris views the web development community as collaborative and respectful, with different frameworks occupying different niches and offering meaningful choices to developers based on their preferences and project needs.

What does Rich Harris think about the verbosity of React code compared to Svelte?

Rich Harris acknowledges that Svelte is focused on making common use cases simple and concise, while React code can be more verbose. He suggests that React's verbosity is due to its focus on composability and integration with the rest of the JavaScript ecosystem.

What are Rich Harris's thoughts on the future of Svelte, particularly with the introduction of Svelte 5?

Rich Harris is excited about Svelte 5, which aims to preserve the simplicity of Svelte while adding more power, flexibility, and composability. The new features are designed to address the limitations encountered when building larger applications with Svelte.

What would it take for Rich Harris to consider using React over Svelte?

Rich Harris would need to see React adopt features that are currently unique to Svelte, such as built-in support for transitions, animations, and styles as part of the component definition, and a shift in philosophy to be more encapsulated and focused on day-to-day UI problems.