I believe Solid and Svelte work pretty much the same way, using reactive graphs for calculations.
The difference is that Solid does it in explicit way, using functions, and Svelte does the same thing, but with special syntax.
But do they conceptually and internally they are pretty much the same?
They borrow concepts and ideas from each other and from other frameworks but how they realize and execute these ideas are totally different.
They are both reactive, do not use VDOM, are compiled and have similar performance characteristics.
But Svelte exerts some limitations on modules and reactive elements:
You cannot
export default, since the default export is the component itself.Variables defined in module scripts are not reactive — reassigning them will not trigger a rerender even though the variable itself will update. For values shared between multiple components, consider using a store. https://svelte.dev/docs#component-format-script-context-module
Solid is more permissive, more flexible and closer to vanilla JavaScript. It is in fact vanilla JavaScript with only one exception, JSX, but that can be swapped with native DOM elements and is good for composition. Compilation is not an absolute must in Solid. The UI layer is pluggable.
Solid supports templating in 3 forms JSX, Tagged Template Literals and Solid's HyperScript variant, although JSX is the predominate form. Why? JSX is a great DSL made for compilation. It has clear syntax, supports TypeScript, works with Babel and supports other tooling like Code Syntax Highlighting and Prettier. It was only pragmatic to use a tool that basically gives you that all for free. As a compiled solution it provides great DX. Why struggle with custom Syntax DSLs when you can use one so widely supported? https://www.solidjs.com/guides/rendering#rendering
Svelte has a language of its own. It feels more like a templating library with its own quirky syntax.
Solid performs better when the app gets larger.
© 2022 - 2024 — McMap. All rights reserved.
