[Flight] Make react-flight works between UI thread and webworkers

[csr632]

I am really exited about react flight that you are working on right now. But I notice you are focusing on UI cooperation between client and server. How about also make it works between UI thread and webworkers?

So, instead of:

• react-server
• react-client

We should probably rename them into:

• react-producer. Used by producer of UI data. For example, server, webworker.
• react-consumer. Used by consumer of UI data. For example, UI thread consume UI data and render it to DOM. In complex situations, a producer could also consume another UI data stream, so the UI data flow like this: producer1 -> producer2 -> main thread. Main thread don't notice the existence of producer1, which is a beautiful abstraction nature.

So we abstract the idea of "react-flight" into "UI transmission and cooperation between diffetent threads". This idea is basically "parallel rendering", which is a beautiful evolution from "concurrent rendering"!

We could run react inside a webworker to calculate the UI(which is just data), and send it back to UI thread to render the real DOM. This could really unlock the power of webworkers!

Since "UI is just data", it is not necessary to make a distinction between them! "UI transmission and cooperation between diffetent threads" should be as simple as "data transmission and cooperation between diffetent threads".

Use cases

• Move components with heavy calculation out of the main thread.
• Safely render third-party component, sandboxed in another thread. (I'm not sure. Let's discuss!)

How it works

Here is my guess about how react-flight works. Correct me if I am wrong!

• Consumer(react-client) request producer(react-server) for a UI stream.
• Producer render UI as virtual dom. Serialize it. Send it back to consumer. producer could throw an error(which will serialized into a special signal) to make consumer suspend.
• When dom event happens in client, the event is sent to producer. Producer locate the event target and trigger event capture/bubble. So event handler will be called inside producer.
• Event handler inside producer can call setState(), which will trigger re-render and send the new UI to consumer. consumer will render the new UI into DOM.

I guess this is how you guys are plainning to implement react-flight between client and server. This model should also work between UI thread and webworkers.

[csr632]

I found a related project: https://github.com/dai-shi/react-worker-components

[gaearon]

This is actually one of the first things we tried back in 2014 or so. It wasn't very good in practice. Turns out, the communication overhead is making it not worth it, at least in our experience for the general case.

[csr632]

Found another explanation from dan (with reference link):
reactjs/rfcs#188 (comment)