Comment by crummy

5 years 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?

9 comments

crummy

Reply
swyx  5 years ago

i did try that - 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  5 years 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  5 years 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

      1 reply →

travisd  5 years 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  5 years 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.

dbbk  5 years 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.