My FeedDiscussionsHeadless CMS
New
Sign in
Log inSign up
Learn more about Hashnode Headless CMSHashnode Headless CMS
Collaborate seamlessly with Hashnode Headless CMS for Enterprise.
Upgrade ✨Learn more
Initial visions from Respo project

Initial visions from Respo project

Jon's photo
Jon
·Mar 14, 2016

Logo of Respo

Weeks back I got an idea on making React faster by improving component catching which React did not build in. It is a nice try to us memoization but not easy to do. React is very complicated and I didn't even look into its source code. So I started to think about creating one as an prototype by my own. And here's the prototype:

https://youtu.be/picuXVV5YPQ (a silent video)

This video simply demonstrated how DOM diffs are sent to browsers. The rendering part and updating are running on server side. I found that once I can get real DOM diffs and throw it from a server to clients over the wire, soon I see the chance to make the client as thin as a DOM manager.

It's cool but far from usable. But I got some visions during making this prototype:

Component level caching

In React, creating virtual DOM can be slow, diffing virtual DOM trees can be slow, patching real DOM tree can be slow. By introducing immutable data, diffing is much faster. By introducing component level caching, I believe we can make it faster in creating since catching is mostly faster than computing.

DOM diff/patch over the wire

The diffing results I got are just some EDN in Clojure, you can think it like a piece of JSON. It can be turned into a string and recovered into a EDN again. That means we don't need diffing and patching happening in a same machine, we can diff on a server and patch on a browser. In the future we may rent powerful servers to find the DOM changes and use very thin device to display user interface.

Diffing sorted map of DOM tree

Facebook team talked about the diff algorithm of React and I got a lot of inspirations. What I did in Respo is regarding data in the virtual DOM as a sorted-map provided in Clojure. Diffing data is hard but diffing sorted map is easy. I mean childElements are usually vectors but vectors can be turned into sorted-maps very easily. The bad part is the order of a list is not based on the IDs it uses. I will look into that later.

There are also some interesting things in Respo I don't want to talk now. I will keep writing posts on the idea I get.

At this moment(14th Mar) Respo is far from stable and docs are not even prepared, I only got the repos created. Its code is in Cirru and compiled to ClojureScript:

https://github.com/mvc-works/respo https://github.com/mvc-works/respo-client