mohebifar
Joined 11 years ago
Joined 11 years ago
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 compiler's analysis this time as it has already done most of the heavy lifting.
With Vidact, a component runs once when it mounts. The compiler analyzes which expressions depend on which values and generates static update functions for them. When state changes, it directly updates the affected text node, attribute, conditional range, or list item.
So instead of:
state change -> rerender component -> create element tree -> reconcile -> mutate DOM
it's closer to:
state change -> run compiler-selected updater -> mutate DOM
There is no Virtual DOM, no reconciler, no runtime dependency tracking, and React itself isn't shipped to the browser.
The compiler is written in Rust and uses React Compiler's analysis infrastructure for AST/scope/HIR/CFG/SSA and dependency information, but Vidact has its own IR, DOM code generator, and runtime.
I've also been experimenting with the same model for SSR/hydration and built Vidact Start around it, with file-based routes, loaders, SSR, hydration, and client navigation.
One design decision I'm particularly interested in feedback on: Vidact fails compilation when it encounters React behavior it can't preserve rather than silently falling back to React or a slower runtime path. It's therefore intentionally a subset of React today.
It's beta and there are definitely compatibility edges left to explore. I'm especially interested in cases where React semantics make static compilation fundamentally difficult, rather than just features I haven't implemented yet.
Site: https://www.vidact.dev/
Also, video files are never fully decoded. We use the browser's native WebCodecs on demand. Only a small buffered window gets decoded and sent to the compositor. So it can even handle long 4K videos.
That said, I would be very interested in hearing your thoughts if you are open to contributing or discussing what a practical plugin system should look like in this environment. Please file a GitHub issue if you can
Modern browser and GPU capabilities are already sufficient for a large category of practical video editing tasks. We are not targeting blockbuster scale 8K movies at least for now, but we are targeting real jobs people do every day across social, commercial, and non-commercial video production.
I have used Remotion for years because the DX is great, but the performance and overhead is significant. Even something like attaching subtitles to a video can take around 10x more time and resources than bare FFmpeg because of the chromium layer.
A headless version of this wgpu renderer with a clean API and eventually a nicer DX layer such as a react renderer could be a strong replacement for that kind of workflow.