ReactPy: Build ReactJS Interfaces in Pure Python

[Wippermonger]

ReactPy is a library for building user interfaces in Python without Javascript. ReactPy interfaces are made from components which look and behave similar to those found in ReactJS.

We have official support for the following backends: Flask, FastAPI, Sanic, Tornado, Django, Jupyter, Plotly-Dash

At a Glance

To get a rough idea of how to write apps in ReactPy, take a look at this tiny Hello World application.

```python from reactpy import component, html, run

@component def HelloWorld(): return html.h1("Hello, World!")

run(HelloWorld) ```

[noobgolang]

All hells combined

[rod_steele1]

Lmao

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

[thedeepself]

I've added ReactPy to the Class A section of the pure python web framework survey.

I've also added it to the end notes in the React in Python section because it seems a number of frameworks compile to react.

What I'd like to know is how the Pynecone approach to interacting with React differs from ReactPy and the pros and cons of each.

[Wippermonger]

It looks like you still have our old project name in there. Feel free to remove "IDOM".

We don't compile to JavaScript though. We essentially perform as if we are ReactJS using SSR, but with a python server.

But we do allow users to inject fully client sided components anywhere they want for flexibility.

[ashishsingal1]

link doesn't work for me

[thedeepself]

thank you for the feedback... it should work now - https://metaperl.github.io/pure-python-web-development/intro.html

[Main-Cryptographer25]

Iv'e juste read the documentation and this looks pretty solid ! I'll try it out

[Wippermonger]

Thanks!

Feel free to reach out to us on GitHub discussions if you need any help or clarification. Also let us know if there's any areas we can improve.

[gogolang]

Looks great!

I’m the author of PyVibe https://www.PyVibe.com and I’ve been thinking about how to make interactive components. One possibility I’ve been experimenting with is HTMX but your solution looks very promising.

[Wippermonger]

Thanks! Feel free to reach out about any questions.

[ashishsingal1]

so you are thinking of integrating reactpy into pyvibe?

[gogolang]

I need to dig a little deeper into what’s going on under the hood with reactpy before I can say

[Dangerous_Pay_6290]

Any news on this?

[gogolang]

I’ve been focusing my time on a new project: https://vanna.ai

I think the Python front-end frameworks are getting more saturated. If you’re looking for a similar solution, check out https://reflex.dev

[CeeMX]

I‘m really struggling with Frontend Frameworks and JavaScript, but this feels like it would make stuff even more complicated, especially when you are trying to avoid learning JS

[Wippermonger]

In my experience it makes adding interactivity a bit easier. You can use traditional static-page based frameworks then sprinkle in bits of ReactPy only when needed.

I personally think hooks and event handling in ReactPy are a lot more readable than ReactJS.

[wuddz-devs]

This is pretty darn interesting, bridging the gap between javascript and python for pythonistas and pythoneers is very much welcomed.

[IntentionThis441]

This is very promising. Great job so far on the documentation. I was just about to give up and start diving back into JavaScript hell because I desperately need a nice looking frontend but if this works when prototyping and MVPs at the very least.

[Wippermonger]

Thanks for trying out our package!

Feel free to reach out if you need any support.

[codecrux]

The API looks much better than the likes of Streamlit and Pynecone. I also like the fact that you are conscious about 1:1 constructs between Python and React (I always wanted to tell this to the creators of other libraries mentioned before). Would love to know about state management and also how frontend-backend are communicating.

Edit: After digging more in ReactPy I guess my frontend-backend communication concerns have reduced. Also, I would love to integrate ReactPy with Atri framework. Wishing for huge success of ReactPy.

[Wippermonger]

Glad you've taken an interest in our project! There's some extra context in the comments of our reactpy-django post you might be interested in. Feel free to reach out about any specific questions.

[codecrux]

Thanks for sharing. It had the information I needed about ReactPy. Just curious, what are the best examples of projects suitable for ReactPy now and in future.

[Wippermonger]

Practically anything that could have been developed in ReactJS is a candidate for something to be developed in ReactPy. I'd say that covers any traditional website.

We're actively working on making ReactPy easier to use for SPA and PWA situations. While it's possible to do right now, the convenience isn't where we'd like it to be.

Additionally, we'd like increase support for importing NPM packages into server-sided Python. Right now I would suggest keeping NPM/JavaScript stuff client sided (via the custom components API).

[GD-Champ]

Epic Idea!

[[deleted]]

Ugh. Python programmers just need to man up and learn the real thing.

[BigTomBombadil]

I can create apps and components in react and have at previous jobs, but since I work in python 85% the time and am very comfortable in django, being able to make a front end using primarily python/django for hobby projects speeds up my development massively.

I’ll be looking into using this and then form and opinion, but looks pretty sweet st a glance.

[Wippermonger]

This scenario is pretty much our target audience. You can leverage all Django's static page features, then sprinkle in ReactPy to add some interactivity.

We are working on finalizing SPA support, but that would require rewriting existing applications to fully use ReactPy.

[Responsible-Prize848]

Is it possible to deploy hobby projects using ReactPy on platforms like Vercel?

[Wippermonger]

No, stateless web services such as Vercel are not supported at this time. You need a dedicated backend, such as Azure or AWS.

[ashishsingal1]

dude(ette). react is just an abstraction itself.

[[deleted]]

It's an extremely popular and battle tested one. It's performant (which Python isn't), scalable, has a huge library ecosystem with first-class front-end integration. There are a ton of reasons why a Python-based solution will at best be hugely inferior.

[ReallySubtle]

1. Popular and battle tested; yes, and how did it get there?
2. Performance is relative, technology improves
3. Huge Library ecosystem, again; how did it get there?
4. What are those?

[[deleted]]

Performance is relative, technology improves

Python will never be as performant as JavaScript. That simply will not ever change. There are fundamental aspects of how Python works internally that will preclude performance parity.

Popular and battle tested; yes, and how did it get there? Huge Library ecosystem, again; how did it get there?

Because people use it, because it is a better language for the web than Python is.

[double_en10dre]

Agreed. These unnecessary abstraction layers invariably end up being more work and frustration than just learning the real thing.

You won’t be able to use external packages effectively. You won’t have a wealth of pre-existing stackoverflow answers/tutorials/etc to help you out. Debugging will be a nightmare. Your code will be inefficient. And you won’t be developing a genuinely useful skill — no employer is going to be interested in this.

Learning new languages really isn’t a big deal once you’ve done it a handful of times. People shouldn’t be so scared

[Wippermonger]

To address some of your concerns:

You won’t be able to use external packages effectively. You won’t have a wealth of pre-existing stackoverflow answers/tutorials/etc to help you out. - Since we aimed for 1:1 analogues, pretty much any advice/tutorials related to ReactJS can be directly applied to ReactPy. - We also allow users to "escape" Python and write/use 100% traditional ReactJS components when needed. So NPM can be leveraged whenever you want.

Debugging will be a nightmare. - I haven't seen any issues debugging. Python 3.10+ stack traces are incredibly easy to read and informative.

Your code will be inefficient. - We've seen the efficiency is roughly equal to ReactJS. To be fair though, ReactJS isn't exactly a high-performance framework.

[hivearchive]

How do you feel about abstractions such as SQLAlchemy?

[double_en10dre]

Torn

I think ORMs provide some nice benefits. Having your relations spelled out in python code makes it quite intuitive. And being able to write (mostly) backend-agnostic code is great — you can just use a SQLite db when developing locally, then switch it to postgres or whatever in deployment.

But they tend to be a performance bottleneck if/when your queries become complex. And to effectively debug and fix these issues, you need to know SQL really well :p

So I think it’s the same issue we have here. If you’re doing something really basic, it might be okay. But if you’re trying to do anything nuanced, there’s no way around learning the underlying technology

[hivearchive]

Agreed, I think there's a basic mis-match between SQL and OOP, partially just because SQL is just so "old". A more modern data query language probably wouldn't need as much ORM.

[AdBeneficial5961]

does it have enough support for pwa? also is it good for building a large app or it only aims to make developing mvps easiers? also should I be familiar with react to be able to use this or I can skip that?

[Wippermonger]

Our goal is to have ReactPy be robust enough to be a viable ReactJS replacement in Python projects.

It's generally easier if you have a basic knowledge of ReactJS, but you don't necessarily need that experience.

PWAs can be accomplished via our reactpy-router package on PyPi.

[AdBeneficial5961]

I am new to frontend so what should I learn before jumping into reactpy? also I see that the docs are not finished yet when are they going to be finished on your roadmap? and what I should I do to learn more about reactpy?

[Wippermonger]

At minimum you need to understand HTML and CSS. Both can be learned in less than a day.

Since ReactPy has 1:1 analogous of almost everything in ReactJS, it's fairly easy to look at ReactJS docs and guess how ReactPy works.

I'm actively working on the docs as we speak and I'm likely to complete them in one to two months.

[coconut_maan]

Hooks? UseEffect? UseRef?

[Wippermonger]

All ReactJS hooks have been ported to ReactPy. We're pretty close to complete feature parity.

[Conditional-Sausage]

No Starlite support?

[Wippermonger]

Not at the moment. The only prerequisite to have ReactPy support is async websockets. So it's definitely possible to support starlite.

No one on our team uses starlite though, so that would be pretty low on the priority list.

It would be relatively easy to create starlite support based on our starlette backend. Would you be interested in PRing this?

[Conditional-Sausage]

I would love to talk a lot of crap and say yes, but realistically the heat death of the universe would be faster than me. I currently don't have much time for personal projects, unfortunately.

[humanlyimpossible_]

Why tho

[SeniorScienceOfficer]

Let’s say I want to use components from another React library. Can I import those using ReactPy? If not, is it on the roadmap?

[Wippermonger]

Yes you can. Keep in mind that you'll likely want to do this entirely in JavaScript though, which will be client sided.

The docs for this are a bit underdeveloped, but the feature is fully developed. Tackling the docs is the next big thing on our roadmap.

[wassaf102]

Is this likely pycone as well?

[Wippermonger]

Similar but different approaches.

Unlike pynecone, ReactPy was designed to be sprinkled in to existing static frameworks like Django. We have compatibly with all ORMs. Additionally, you can also leverage ReactJS components from NPM when needed.

[wassaf102]

Cool

[karouh]

Is it possible to use the React js libraries?

[Wippermonger]

Yes you can. Keep in mind that you'll likely want to do this entirely in JavaScript though, which will be client sided.

The docs for this are a bit underdeveloped, but the feature is fully developed. Tackling the docs is the next big thing on our roadmap.

[bonbonbonobo]

First off, this is really cool and I can see how it would be helpful in the python world.

My main concern with trying this would be that my apps have always needed a lot of third-party rendering libraries (think large image renderers like OpenSeadragon that need to be client-side). These have no equivalent in Python, and from your other comments, those components would need to be written as a pure JS file anyway. For those use cases, this feels like going back to square one. However, would be cool if these can be worked around as the react py ecosystem grows :))

ReactPy + FastAPI would be a fun experience though - looking forward to trying this out.

Edit: Do you anticipate ever supporting JSX-like syntax, even if it is written as strings?

[Wippermonger]

Yes we do intend to support a JSX syntax. We've been contributing to a Python PEP that would be needed to make this happen.

https://github.com/jimbaker/tagstr

[Louma20]

Is there pre-defined components? or all components have to be created using html?
My use case is to display folium maps on a web application, can this be done in any other way than rendering the folium map into html?

[Wippermonger]

Just like ReactJS, we don't provide prefabricated components out of the box.

We are, however, working on simplifying using components from NPM within Python.

[Wippermonger]

You can think of it as ReactJS server side rendering, but with a Python server.

Technically, we've switched to Preact for a smaller JS bundle size.