Live data from Hacker News

Vidact – a compiler that turns React into direct DOM operations

vidact.dev

11–20 of 34 posts

Re: Vidact – a compiler that turns React into direct DOM operations

#11

I started Vidact as an experiment 6 years ago, an experimental compiler that takes React-style function components and hooks and compiles them into direct DOM operations. The basic idea is: keep React's programming model, but replace its runtime model. It was a very ambitious project back then, but recently, another project I was working on (grep.codemod.com) inspired me to rebuild this and I thought of using React c…

This comment is 10x more useful than your website. I'd suggest moving most of this copy onto the site just in a better format.

Re: Vidact – a compiler that turns React into direct DOM operations

#14

I started Vidact as an experiment 6 years ago, an experimental compiler that takes React-style function components and hooks and compiles them into direct DOM operations. The basic idea is: keep React's programming model, but replace its runtime model. It was a very ambitious project back then, but recently, another project I was working on (grep.codemod.com) inspired me to rebuild this and I thought of using React c…

It seems close to https://octanejs.dev/

  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.
Also do you have any benchmark like https://krausest.github.io/js-framework-benchmark/current.ht...

Re: Vidact – a compiler that turns React into direct DOM operations

#15

If I’m understanding this right, you’re aiming at something like Svelte, but with React syntax?

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.

Re: Vidact – a compiler that turns React into direct DOM operations

#16
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.

Re: Vidact – a compiler that turns React into direct DOM operations

#17

I started Vidact as an experiment 6 years ago, an experimental compiler that takes React-style function components and hooks and compiles them into direct DOM operations. The basic idea is: keep React's programming model, but replace its runtime model. It was a very ambitious project back then, but recently, another project I was working on (grep.codemod.com) inspired me to rebuild this and I thought of using React c…

This comment is 10x more useful than your website. I'd suggest moving most of this copy onto the site just in a better format.

I would suggest adding a readable and formatted example of compiled code.

Re: Vidact – a compiler that turns React into direct DOM operations

#19
post #13

If I’m understanding this right, you’re aiming at something like Svelte, but with React syntax?

What Svelte used to be pre version 5 I think? They now also have a runtime with hooks, etc

Svelte did always have a runtime, they're still doing this from what I understand the major part of Svelte 5 was moving to signals.

Re: Vidact – a compiler that turns React into direct DOM operations

#20
post #13

If I’m understanding this right, you’re aiming at something like Svelte, but with React syntax?

What Svelte used to be pre version 5 I think? They now also have a runtime with hooks, etc

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.
Post reply on HN