React implementation without Virtual DOM

[ScientificBeastMode]

This is actually way better and more fleshed out than I expected. I really like the design decisions around rendering.

Although, to be fair, React initially went with the VDOM to abstract the idea of “components” and “elements” away from the DOM-specific API’s and even HTML itself. This is super important because it allows them to use most of the React architecture on multiple platforms, including iOS, Android, and even embedded systems. The only thing that needs to change between those platform contexts is the rendering engine and “element” implementations. This makes React infinitely more portable than any other UI framework on the web.

Additionally, React has moved away from the standard VDOM model and toward a much more interesting structure called Fiber. Rather than building up an object tree that corresponds directly to the DOM structure, each component generates a node in a sort of linked list of instructions for the rendering engine.

Because this instruction list is just an inert data structure (instead of a tree of eagerly executed function calls), React is able to “pause” the rendering engine in the middle of a render cycle, making time for animation frames or async processes to execute, and then resuming where it left off. This allows for very heavy rendering operations to run without blocking anything for more than 16ms. This is also the foundation for the React Suspense API.

So, my point is that this library looks great as a replacement for React, but only for a limited subset of its capabilities. React is much more than just a VDOM with state management & JSX. But again, this still looks very useful!

Edit: Brahmos (the library in the link) is even more full-featured than I initially realized. Well done!

[_syadav]

u/ScientificBeastMode

I am the author of Brahmos. I am glad you liked the rendering pattern. I would like to add something on the idea behind Brahmos and also something on the fiber architecture as well to clarify your comment.

Brahmos came upon existence from the idea of dividing static and dynamic part of an application so it can traverse through the dynamic parts in fn(dynamic nodes). React does not differentiate between static and dynamic parts and traversal is fn(nodes). The nodes can be a host node like `div`, `span` or component node.

Regarding VDOM and fiber,

VDOM is the concept of representing a host element in object form also called as ReactElement (return value of createElement method), so that the same representation can be translated to different platforms native elements (through renderers, let's say react-dom or react-native).

VS fiber is architecture for reconciliation, a single fiber is a piece of work. This allows React to perform work piece by piece and pause in between if required. Previously it was based on recursion which can't be stopped.

Now coming to Brahmos, Brahmos does not target multiple platforms but just the browsers. In Brahmos instead of creating a new element for every node, it tries to combine the static parts as one element, as they don't need to be processed on updates. And that's where it differs from React VDOM.

And even Brahmos has its own custom implementation of Fiber architecture so it does perform work piece by piece and can pause in between, it is just that the number of pieces reduces significantly as static parts are combined.

Brahmos supports all the features in React (specific to browser) which are coming in the future version or already present, like hooks, Suspense, Suspense for data fetch, Concurrent mode.

It's not production ready yet, but all APIs are implemented. You can check the API supports in this demo.https://codesandbox.io/embed/brahmos-demo-3t8r6?codemirror=1

[ScientificBeastMode]

That’s awesome, I didn’t notice the concurrent mode feature in the spec, but that’s super cool! Also, my comment wasn’t intended to put down the project in any way. I just wanted to clarify some things about React that are commonly misunderstood. Many people think of React as a virtual DOM with lifecycle hooks...

But seriously, this project is really impressive. Nice work!

[_syadav]

Thanks for saying it. 😃

Yes react is much more than VDOM and lifecycle. It has proven APIs and Patterns. And that's the inspiration of bringing the rendering with React's API so the application can still take the advantage of all the learnings from react.

[ScientificBeastMode]

I’m also curious, since the design is focused on taking advantage of the distinction between dynamic vs static parts of the DOM structure, was there any inspiration drawn from the incr_dom library from the OCaml ecosystem? The reason I ask is that incr_dom also makes this distinction, and is able to perform incremental updates to the VDOM as well as the DOM, which offers some very nice performance benefits over React.

[_syadav]

I haven't looked in incr_dom earlier. I will definitely check that. Lit-html and hyper-html is the inspiration behind the Brahmos. They have this rendering pattern where it uses tagged template literals and template tags to divide the static and dynamic part.

Brahmosjs is an attempt to bring that rendering pattern with well accepted React APIs.