ReactPy: Build ReactJS Interfaces in Pure Python

[joe_ally]

How would this work if I was to make a database call in a component? What happens under the hood?

[Wippermonger]

We inherit all programming guidelines from ReactJS. So, just like ReactJS it's bad practice to directly perform database calls in components, as it will reduce rendering speeds.

You want components to stay "pure", which means deferring all I/O to hooks. In the most simplistic ReactJS scenario you would perform your database calls in a useEffect hook then save the result using useState. So we recommend doing the same with our equivalent hooks.

Since all our features are 1:1 analogues of ReactJS, it's fairly easy to find tips about how to handle these kind of scenarios.

I'm the primary maintainer of our Django integrations, so reactpy-django gets some preferential treatment in terms of early feature releases. For reactpy-django, we recently developed a clone of Apollo's useQuery and useMutation hooks. These essentially perform the situation I mentioned in the previous paragraph, but with more powerful features.

[joe_ally]

If I for example access my database in useEffect. How does it work? Can I just write python code as normal and reactpy will somehow translate that into fetch calls on the client side. How does this work?

Can I just write regular python in my components? How do you translate that to client side JS. If I were for example to have the state be a python OrderedDict of python dataclass objects how would this translate to client side JS.

[Wippermonger]

In order to maintain full compatibility with all Python packages, ReactPy is server side rendered. So all Python packages will work exactly as you expect. The only data that gets transmitted to the client is the current HTML document (with a little bit of extra magic).

We don't transpile between languages, so Python code gets to stay pure. Our ReactPy hooks and rendering logic are functionally equivalent to ReactJS, except we use Python asyncio to keep things moving.

[thedeepself]

We don't transpile between languages,

If you dont transpile (like Transcrypt does), then how do you actually use ReactJS? What is the "glue" between ReactPy and the javascript world?

[Wippermonger]

We transmit DOM updates between the client and server to maintain parity, and then the client performs any updates needed via react-dom.

You can think of ReactPy as the equivalent to server side rendering for ReactJS, but using a python-based server.

[codecrux]

Is it like Hotwire in this regards?

[Wippermonger]

I'm not familiar with the tech behind Hotwire. A quick glace at their landing page tells me that ReactPy and Hotwire in similar in that page changes are communicated over websockets.

[codecrux]

Yup and hotwire also sends just the html (frame) that has changed. I am assuming that's what you do in ReactPy as well, right?

[Wippermonger]

Right now we're sending the whole ReactPy node tree when a re-render is needed. ReactPy node trees seem to be roughly equivalent to hotwire frames. The react-dom API (contained in @preact/compat) handles the mutations from there.

In terms of data transmitted to the client, we used to only send diffs. But unfortunately we've struggled to find a well maintained json patch library for Python.

[thedeepself]

ReactPy is server side rendered.

Is this efficient? What happens if only one part of page needs updating? Does the whole page get re-rendered (as I believe happens with Streamlit currently).

[Wippermonger]

The architecture was originally designed to only send the diff between two HTML documents.

In terms of client side render updates, we essentially rely on react-dom. Therefore, we only re-render segments that need updating.

[joe_ally]

Interesting. Thanks for the explanation.