3 ms·

I dont use Svelte or react, im sure its lovely and solves real problems. And maybe im just getting old, but over the last 20 years all evidence I have is that "

I dont use Svelte or react, im sure its lovely and solves real problems. And maybe im just getting old, but over the last 20 years all evidence I have is that "magic" is a trap. Its so strange to me to see such a high profile project leaning into it like this. Youre writing javascript, but the way you must reason about what your code is doing is so different than javascript.

BigJono 3y ago
React gets a bad rap because of all the rubbish built around it, but if you do ever want to try the declarative model over vanilla/jQuery, React is actually exactly what you want if you want to avoid compile time magic. The only thing happening at compile time with React is a line-for-line swap from JSX tags: <foo bar="baz">{boop}</foo> to a createElement function call: React.createElement("foo", { bar: "baz" }, ...boop); Other than that it's entirely Javascript. No templates, computed/derived values or any of that other bullshit. You could probably implement the compile step in like 5 lines of code. I've built big projects in Vue and find it almost impossible to find a reason to use it. Svelte looks cut from the same cloth. They just fundamentally have the wrong approach.
- akavi 3y ago
  And you can eschew the JSX syntax entirely with nothing but a small cost to dev ergonomics. A company I worked at had a O(1 MLoC) React frontend with no JSX at all for a long period of time due to the Typescript compatibility issue, just `export const El = React.createElement`
- netcraft 3y ago
  yes, good point, I shouldnt have evoked react itself, its everything else thats been built on top of it. But yes, Vue is exactly what I mean. Its so difficult to reason about how things work unless you live in it all day every day.
- onsclom 3y ago
  Fair points, though React has hugely complex runtime magic. SolidJS's compiler magic is just as simple while also having much a simpler runtime.
math_dandy 3y ago
Putting the runic terminology aside and looking into how the signal primitive is implemented should dispel the magic. I learned a lot from examining preact's implementation: https://github.com/preactjs/signals/blob/main/packages/core/src/index.ts https://github.com/preactjs/signals/blob/main/packages/core/...

BigJono 3y ago

React gets a bad rap because of all the rubbish built around it, but if you do ever want to try the declarative model over vanilla/jQuery, React is actually exactly what you want if you want to avoid compile time magic. The only thing happening at compile time with React is a line-for-line swap from JSX tags: <foo bar="baz">{boop}</foo> to a createElement function call: React.createElement("foo", { bar: "baz" }, ...boop); Other than that it's entirely Javascript. No templates, computed/derived values or any of that other bullshit. You could probably implement the compile step in like 5 lines of code. I've built big projects in Vue and find it almost impossible to find a reason to use it. Svelte looks cut from the same cloth. They just fundamentally have the wrong approach.

akavi 3y ago
And you can eschew the JSX syntax entirely with nothing but a small cost to dev ergonomics. A company I worked at had a O(1 MLoC) React frontend with no JSX at all for a long period of time due to the Typescript compatibility issue, just `export const El = React.createElement`
netcraft 3y ago
yes, good point, I shouldnt have evoked react itself, its everything else thats been built on top of it. But yes, Vue is exactly what I mean. Its so difficult to reason about how things work unless you live in it all day every day.
onsclom 3y ago
Fair points, though React has hugely complex runtime magic. SolidJS's compiler magic is just as simple while also having much a simpler runtime.

math_dandy 3y ago

Putting the runic terminology aside and looking into how the signal primitive is implemented should dispel the magic. I learned a lot from examining preact's implementation: https://github.com/preactjs/signals/blob/main/packages/core/src/index.ts https://github.com/preactjs/signals/blob/main/packages/core/...