31 ms·

I have a stupid question: The cool thing about Svelte is that it compiles your code in a way so that when variables change, bindings in HTML change, but only t

by crummy 5y ago

I have a stupid question: The cool thing about Svelte is that it compiles your code in a way so that when variables change, bindings in HTML change, but only that HTML and not an entire DOM re-render. (Right?) So, if this is the case, how come React couldn't do the same thing? They'd lose the ability to just include react in a script file, but why can't a smart compiler look at your JSX and throw out the virtual DOM component, so your variables are directly bound to where they're used in the HTML?

dbbk 5y ago
I actually think Ember/Glimmer happens to have the best implementation of this, where their diff can be incredibly optimised because they know the semantics of the template and can just skip all work on static elements and attributes that never change.
swyx 5y ago
i did try that - https://twitter.com/swyx/status/1294310598419689472 https://twitter.com/swyx/status/1294310598419689472 but when the core team is not interested in it there's only so much i want to push it on my own - rather just move to Svelte where the community already gets it
- travisd 5y ago
  Looks great! Seems to me that there’s just not enough pain around this. Ironically, React being “good enough” at performance (in most cases) probably means that there’s not appetite for squeezing out the last few millimeters (again for the vast majority of use cases — clearly there is some need otherwise svelte wouldn’t exist).
  - alserio 5y ago
    I often ear this "vast majority" claim but is it true? Every slow website I encounter is react or angular based. Maybe I just don't notice the fast ones, but react and fast enough are not really my experience
    - rk06 5y ago
      The ones based on next.js are pretty fast. but yeah vanilla react apps tend to be on slower end
samc98 5y ago
The React team had explorations of a compiler for React, I believe - https://github.com/facebook/react/issues/9223 https://github.com/facebook/react/issues/9223 https://github.com/facebook/react/issues/7323 https://github.com/facebook/react/issues/7323 https://github.com/facebook/react/issues/7324 https://github.com/facebook/react/issues/7324 I also think this is why facebook had been investing in `prepack` - https://github.com/facebook/prepack https://github.com/facebook/prepack
travisd 5y ago
This might be possible in simple cases, but there are two reasons I think. 1. React has an ethos of being “just JavaScript” (despite the JSX syntax which is purely sugar around calls to React.createElement). This means the core team doesn’t seem to be interested in adding an extra compiler step. 2. Related to the above, because React is just JS, you can do all the normal and horrible things with it you can do in JS. Wanna pass React elements around in context or even using global variables? That’s allowed. A compiler could probably handle a lot of simple cases but there’s a whole lot of things it wouldn’t be able to deal with.
fuzzy2 5y ago
Hm, I think this isn't possible with React. You'd have to impose lots of constraints on how a component renders. Currently it's basically anything goes. IMHO, the result just wouldn't be React anymore. In fact, Angular works exactly like this. Only the DOM nodes that have bindings/directives attached are updated, the rest is static during a component's lifetime. Though all this still involves tons of runtime framework code.
cphoover 5y ago
[deleted]

by crummy 5y ago

dbbk 5y ago

I actually think Ember/Glimmer happens to have the best implementation of this, where their diff can be incredibly optimised because they know the semantics of the template and can just skip all work on static elements and attributes that never change.

swyx 5y ago

i did try that - https://twitter.com/swyx/status/1294310598419689472 https://twitter.com/swyx/status/1294310598419689472 but when the core team is not interested in it there's only so much i want to push it on my own - rather just move to Svelte where the community already gets it

travisd 5y ago
Looks great! Seems to me that there’s just not enough pain around this. Ironically, React being “good enough” at performance (in most cases) probably means that there’s not appetite for squeezing out the last few millimeters (again for the vast majority of use cases — clearly there is some need otherwise svelte wouldn’t exist).
- alserio 5y ago
  I often ear this "vast majority" claim but is it true? Every slow website I encounter is react or angular based. Maybe I just don't notice the fast ones, but react and fast enough are not really my experience
  - rk06 5y ago
    The ones based on next.js are pretty fast. but yeah vanilla react apps tend to be on slower end

samc98 5y ago

The React team had explorations of a compiler for React, I believe - https://github.com/facebook/react/issues/9223 https://github.com/facebook/react/issues/9223 https://github.com/facebook/react/issues/7323 https://github.com/facebook/react/issues/7323 https://github.com/facebook/react/issues/7324 https://github.com/facebook/react/issues/7324 I also think this is why facebook had been investing in `prepack` - https://github.com/facebook/prepack https://github.com/facebook/prepack

travisd 5y ago

This might be possible in simple cases, but there are two reasons I think. 1. React has an ethos of being “just JavaScript” (despite the JSX syntax which is purely sugar around calls to React.createElement). This means the core team doesn’t seem to be interested in adding an extra compiler step. 2. Related to the above, because React is just JS, you can do all the normal and horrible things with it you can do in JS. Wanna pass React elements around in context or even using global variables? That’s allowed. A compiler could probably handle a lot of simple cases but there’s a whole lot of things it wouldn’t be able to deal with.

fuzzy2 5y ago

Hm, I think this isn't possible with React. You'd have to impose lots of constraints on how a component renders. Currently it's basically anything goes. IMHO, the result just wouldn't be React anymore. In fact, Angular works exactly like this. Only the DOM nodes that have bindings/directives attached are updated, the rest is static during a component's lifetime. Though all this still involves tons of runtime framework code.

cphoover 5y ago

[deleted]