react-fiber-architecture

Can someone remind me why virtual DOM was/is desirable in the first place and why updating the DOM directly is desirable now? If I understand correctly react elements are created in memory, and only upon "render" it is turned into the actual DOM. During render in react, it does the tree diffing and state management. Supposedly manipulating the actual DOM directly is "heavy" hence delay/pruning the virtual DOM tree first then rendering would be beneficial? Then why is it working with DOM directly is desirable? And am I right to assume that "without virtual DOM" means work with DOM directly? Someone in the comment mention that Svelte is without vDOM already. Is there some design document that I can refer to, like the reconciliation engine used in react https://github.com/acdlite/react-fiber-architecture

Seems someone has written some of it up here: https://github.com/acdlite/react-fiber-architecture

Study the React source code and implement your own mini-version. It's a great way to deepen framework specific knowledge (if that's what you are after) and also learning more about the language used to create the framework. Start with these articles: https://medium.com/react-in-depth/inside-fiber-in-depth-over... https://medium.com/dailyjs/the-how-and-why-on-reacts-usage-o... https://github.com/acdlite/react-fiber-architecture https://www.youtube.com/watch?v=ZCuYPiUIONs https://github.com/facebook/react/issues/7942#issue-18237349...

Yep - if you are interested in learning more technical details, check out https://github.com/acdlite/react-fiber-architecture .

With the right abstractions and (adhered-to) guidelines, a library in a non-preemptive language can allow your code to effectively yield to the scheduler so often that you get many of the benefits of preemptiveness. React is moving in this direction with their ongoing Fiber project [0] - since components are encouraged to be granular, and must be loosely coupled, the new React scheduler can take well-structured React code and plan the rendering of various subtrees with high levels of control. In fact, there's a TON of similarities between React's component model and the BEAM actor model: a component's "mailbox" consists of inbound props, outbound async callbacks to the component that requested its instantiation, and outbound assertions that the component desires to communicate props to new instances of other components. One could imagine

Fiber is simply a fully-backwards-compatible performance enhancement, though that does it a huge disservice. It's actually figuring out how to run different parts of a render() function in different clock ticks, essentially making renders asynchronous so that animations don't jitter or drop frames, and different parts of the render tree can be prioritized out of order. Unless you were doing weird stuff with low-level animations or React internals, user code won't need to change, but it will instantly become buttery smooth. See https://github.com/acdlite/react-fiber-architecture for how. Now, the preference for stateless functional components that has been popularized for user code by Redux is certainly a trend, and a focus of performance attention. But that's nothing new.

Here's more info about it https://github.com/acdlite/react-fiber-architecture

Fiber is React's new core algorithm. https://github.com/acdlite/react-fiber-architecture

The latter – and it is likely that we will change this API in the future and update the devtools to match. No guarantee that your monkeypatch will continue to be possible, especially as we rewrite large parts of the internals (https://github.com/acdlite/react-fiber-architecture).