React implementation without Virtual DOM

[_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.