React’s programming model, compiled.
The successor to Inferno, built around the same focus on performance. It brings React’s hooks, Suspense, and actions to a compiler-first architecture.
No virtual DOM, rules of hooks, or dependency arrays you have to maintain yourself. The compiler tracks what your code uses automatically.
It is real but still experimental. Gotta test it in small apps first. I will move grep.codemod.com (currently vanilla js) this week to Vidact to try it out in production.
Please don't use LLMs for landing pages. Regardless of how long you've been developing the project, many people base their first impressions on whether a real person curated the documentation and website. And if you didn't, then they'll never get to evaluating your code at all.
something that i realisr with LLM-generated content is that I just get more confused every sentence. HOW does it work? WHAT does it do?
When I see technology I want to figure out what it CAN'T do. For example, Rust can do web, but I wouldn't use Rust if I get to choose a simpler language.
The core selling point with Svelte (as I understood it anyway) was that it was a framework that compiles itself away, leaving you with a very small final JS bundle. The changes in 5 make some things more explicit/verbose but I think that core intent is still the same.
I was about to comment this. The selling for svelte has always been that the compiler will output just the needed instructions for the expressed transformation. No virtual DOM.
Not sure what this project is for... the only way to statically compile JSX into direct DOM mutations is to either castrate React's dynamic runtime flexibility and closure model, or break its semantics like SolidJS does (in this case worse because the lack of templating/syntax constraints just shifts the burden from the compiler to the developer).
Maybe a decade ago there was chatter in the Purescript land about FRP in an applicative context.
There's ways you can write your code such that you _know_ that certain blocks of code are going to be unaffected by input changes, and you can then use that information to reduce the scope of changes that need to be done, with only minimal costs to expressivity.
I think with a decently smart compiler (and of course the compiler simply treating a lot of stuff in a black box way) you can totally shrink down the amount of work a client needs to do to render React components, all without changing the semantics.
Of course any performance trick might change the actual sequence of events that happen, and in particular for libs doing fancy DOM manipulation, it's easy for those to rely on React's incidental behavior in a non-spec-confirming way.
But the main point her is that you can totally get to useful improvements on a subset of your React, while still leaving the rest of your components intact
Sure, but trying to strip React of its virtual DOM is just a fundamental architectural mismatch; you can't have your cake and eat it (coarse-grained vs. fine-grained reactivity, fully dynamic arbitrary JSX vs. a templating language etc.). The point I'm trying to make with SolidJS is that it manages to keep JSX by intentionally swapping to signals and introducing primitives and control flow components to scope the compiler, whereas this forces the developer to hold all of this complexity in their heads and write in a specific convoluted way. It's like shipping TypeScript without type declarations and pitching knowing your types in your head as a feature lol.
In the first place, I imagine the subset of React code that’s static enough to compile into direct DOM mutations is so trivial that it’s not a useful optimization target.
React code looks so ugly to my taste. Try reading it: "use state zero". What does it even mean? And why "const" is used for a value that changes?
const [count, setCount] = useState(0)
I didn't understand how the compiler works completely, but I assume it tries to figure out the dependencies during compilation time ("The text of node Y depends on variable x"). This approach is closer to Vue's approach which uses proxies to find these dependencies in runtime, than React's approach which renders the new tree, diffs it against the DOM and applies changes. So it is unclear why React was used for input instead of Vue here. Furthermore, as I remember, Vue has templates implemented as HTML (including attributes for branches and loops) so it would be easier to parse than raw JS code used by React.
Another problem is that those dependencies are often unknown at compilation stage. For example, imagine a form which is generated dynamically based on list of fields received from the server and should show error boxes when invalid values are entered. The compiler won't be able to pre-compute the dependencies here because it doesn't know what DOM nodes will exist at runtime. I assume the compiler would figure out a dependency between a variable with list of fields and "form" DOM node, but not dependencies between entered data and error boxes visibility.
Sadly the website doesn't provide examples of generated code so I cannot confirm my guess.
Anyway, interesting idea. Sometimes I draft reactive frameworks on paper so I understand the challenges a little bit.
Also what I do not like in reactive frameworks as that they are invasive and require you to adapt the code for them. For example, I might have my object model (let's say a TextDocument class with lot of nodes inside), and all I need is a "View" that would display it. But React requires you to move the data into props and state, and sometimes use a giant immutable object that gets rebuilt on every user action, and Vue wraps everything with proxies which causes lots of small issues and confusion (like putting a proxy into the Set instead of original object). And also React requires installing Node and compilation which is too much for a one-page quick project. So what I want is that I pass my Document Object Model and framework just displays it without making me adapt to its architecture. For example, I pass a model of a text document and it just displays it. Without immutability, without proxies, and without writing a giant switch with all possible user commands (I think they call the approach with a large switch and immutable objects "redux"). I do not need redux, I just want to use classic MVC from 80s and not modern dubious ideas. I have M and C and only need a V.
Compiling React to direct DOM operations is exactly the direction the ecosystem needs to reduce overhead. It reminds me a bit of Svelte's philosophy. Will definitely keep an eye on this project!
that's an intersting choice of name. on first glance, i thought it is related to Vue. i think you should change the name to be more associated with react like Ceact etc.
or atleast something does not immidately screams Vue, like the logo does.
30 comments
[ 0.26 ms ] story [ 4.2 ms ] threadWhen I see technology I want to figure out what it CAN'T do. For example, Rust can do web, but I wouldn't use Rust if I get to choose a simpler language.
There's ways you can write your code such that you _know_ that certain blocks of code are going to be unaffected by input changes, and you can then use that information to reduce the scope of changes that need to be done, with only minimal costs to expressivity.
I think with a decently smart compiler (and of course the compiler simply treating a lot of stuff in a black box way) you can totally shrink down the amount of work a client needs to do to render React components, all without changing the semantics.
Of course any performance trick might change the actual sequence of events that happen, and in particular for libs doing fancy DOM manipulation, it's easy for those to rely on React's incidental behavior in a non-spec-confirming way.
But the main point her is that you can totally get to useful improvements on a subset of your React, while still leaving the rest of your components intact
In the first place, I imagine the subset of React code that’s static enough to compile into direct DOM mutations is so trivial that it’s not a useful optimization target.
Another problem is that those dependencies are often unknown at compilation stage. For example, imagine a form which is generated dynamically based on list of fields received from the server and should show error boxes when invalid values are entered. The compiler won't be able to pre-compute the dependencies here because it doesn't know what DOM nodes will exist at runtime. I assume the compiler would figure out a dependency between a variable with list of fields and "form" DOM node, but not dependencies between entered data and error boxes visibility.
Sadly the website doesn't provide examples of generated code so I cannot confirm my guess.
Anyway, interesting idea. Sometimes I draft reactive frameworks on paper so I understand the challenges a little bit.
Also what I do not like in reactive frameworks as that they are invasive and require you to adapt the code for them. For example, I might have my object model (let's say a TextDocument class with lot of nodes inside), and all I need is a "View" that would display it. But React requires you to move the data into props and state, and sometimes use a giant immutable object that gets rebuilt on every user action, and Vue wraps everything with proxies which causes lots of small issues and confusion (like putting a proxy into the Set instead of original object). And also React requires installing Node and compilation which is too much for a one-page quick project. So what I want is that I pass my Document Object Model and framework just displays it without making me adapt to its architecture. For example, I pass a model of a text document and it just displays it. Without immutability, without proxies, and without writing a giant switch with all possible user commands (I think they call the approach with a large switch and immutable objects "redux"). I do not need redux, I just want to use classic MVC from 80s and not modern dubious ideas. I have M and C and only need a V.
are u being serious rn?
Sample application: https://github.com/wisercoder/eureka/tree/master/webapp/Clie...
or atleast something does not immidately screams Vue, like the logo does.