React, but in Python

Controversial, but I think that rather than trying to make Web stuff (e.g. React) work in Python, a more fruitful direction would be to make ML stuff (e.g. PyTorch, OpenCV) work in Typescript.<p>Javascript&#x2F;Typescript is way faster than Python, is ubiquitous and can run pretty much everywhere, has many engine implementations, has an incredibly wide ecosystem, has a type system (Typescript) that blows any Python type system out of the water, runs in browsers, has non-stupid package management systems (PIP is a joke), is easy to get started, etc.<p>&lt;The world if data scientists&#x2F;ML&#x2F;CV people used Typescript.JPEG&gt;

I&#x27;m lost.<p>React builds interactive UIs (web, mobile). After each interaction, the virtual DOM is programmatically recreated and reconciled to the actual DOM.<p>But reactpy is running on a backend sever??? Is each interaction resulting in a server call?<p>Can someone explain what is going on?<p>EDIT: Ah, okay, thanks. Every re-render is a network call. If people complained about web UI performance before..... :)

If you&#x27;re interested in using React-style frontend programming in Python but want an experience &#x2F; API closer to that of React, I recommend checkout out Reacton [1].<p>Similarly to this library, it gives you a `@component` decorator that allows you to create components out of functions. But it also: 1. Includes all existing React hooks (use_state, use_memo, etc) -- so you don&#x27;t have to learn new patterns. I believe this results in a bit less magic (and so easier debugging) than just using raw variables. 2. Works with ipywidgets, so many existing data apps can be ported over very easily -- Jupyter users celebrate.<p>I&#x27;m not associated with the project, but I know the maintainers (creators of Volia [2]) and they are honestly excellent. I haven&#x27;t use the project in production, but the getting starting guide is pretty compelling.<p>[1] <a href="https:&#x2F;&#x2F;github.com&#x2F;widgetti&#x2F;reacton">https:&#x2F;&#x2F;github.com&#x2F;widgetti&#x2F;reacton</a> [2] <a href="https:&#x2F;&#x2F;github.com&#x2F;voila-dashboards&#x2F;voila">https:&#x2F;&#x2F;github.com&#x2F;voila-dashboards&#x2F;voila</a>

I created something like this inside a tech giant once. It never saw the light of day with regard to usership. It&#x27;s good to see someone doing the same in the open source world.<p>A brief summary of what I did:<p>* Python-powered apps, like this<p>* React was used to handle lifecycle. Basically, I avoided writing any kind of lifecycle management because I just wanted to do exactly what React would do. This was achieved via events firing when React lifecycle events fired. If props changed on the server, I&#x27;d send the new props to React to see if it would trigger a lifecycle event. If a lifecycle event was triggered, I&#x27;d replicate it onto the server which could again render new props.<p>* The result was a nice seamless support for both native React components and the newfangled Python components (which could be made up of either more React components or Python components).<p>* The purpose of all of this was to cater to ML engineers who didn&#x27;t particularly like JavaScript and just wanted to build their analyses with Python and share them with coworkers. We had an automatic deployment system for them to share these.<p>* Only caveats were around session management. Much of the state was handled on the server via a websocket, so if your connection dropped, you lost all ability to update the layout. Load balancing was going to be tricky, since the sessions would have to be shared somehow. I was thinking about serializing and deserializing using Pickle but never really got around to deployment.<p>See also: [Dash](<a href="https:&#x2F;&#x2F;github.com&#x2F;plotly&#x2F;dash">https:&#x2F;&#x2F;github.com&#x2F;plotly&#x2F;dash</a>)

Shameless plug for a similar project called Collagraph (<a href="https:&#x2F;&#x2F;github.com&#x2F;fork-tongue&#x2F;collagraph">https:&#x2F;&#x2F;github.com&#x2F;fork-tongue&#x2F;collagraph</a>).<p>From the README: Write your Python interfaces in a declarative manner with plain render functions, component classes or even single-file components using Vue-like syntax, but with Python!<p><pre><code> - Reactivity (made possible by leveraging observ) - Function components - Class components with local state and life-cycle methods&#x2F;hooks - Single-file components with Vue-like syntax (.cgx files) - Custom renderers </code></pre> Currently there are two renderers:<p>PysideRenderer: for rendering PySide6 applications PygfxRenderer: for rendering 3D graphic scenes with Pygfx<p>It is possible to create a custom Renderer using the Renderer interface, to render to other UI frameworks, for instance wxPython, or even the browser DOM.

If you&#x27;re interested in this sort of thing, but want to code in Java, try Flavour: <a href="https:&#x2F;&#x2F;flavour.sourceforge.io&#x2F;" rel="nofollow">https:&#x2F;&#x2F;flavour.sourceforge.io&#x2F;</a><p>Flavour is a fast, batteries-included, type-safe framework for making modern SPA web apps in Java (and other JVM languages).<p>* Great Lighthouse scores? Check!<p>* Real SPAs without sluggish network round trips? Check!<p>* Modern path-based routing? Check!<p>* Components (built-in and user-defined)? Check!<p>* Effortless service calls? Check!<p>* Refactor frontend and backend simultaneously using your current IDE? Check!<p>If this sounds interesting, check out these other resources:<p>* Article in Java Magazine: <a href="https:&#x2F;&#x2F;blogs.oracle.com&#x2F;javamagazine&#x2F;post&#x2F;java-in-the-browser-with-teavm" rel="nofollow">https:&#x2F;&#x2F;blogs.oracle.com&#x2F;javamagazine&#x2F;post&#x2F;java-in-the-brows...</a><p>* 100% Flavour 5-letter word game: <a href="https:&#x2F;&#x2F;frequal.com&#x2F;wordii" rel="nofollow">https:&#x2F;&#x2F;frequal.com&#x2F;wordii</a><p>* Flavour podcast (created with Castini, a Flavour app): <a href="https:&#x2F;&#x2F;castini.frequal.com&#x2F;cast&#x2F;show&#x2F;Flavourcast&#x2F;f7e171e8-22de-4f3b-adbb-5462991343c5" rel="nofollow">https:&#x2F;&#x2F;castini.frequal.com&#x2F;cast&#x2F;show&#x2F;Flavourcast&#x2F;f7e171e8-2...</a>

Does anyone have a list of full-stack Python frameworks for building interactive web apps? I feel like a new one comes out each week, and it would be nice to see them together to compare.

The slowest framework now available for the slowest language.<p>(this is a joke, it was my immediate thought when seeing this. More seriously, probably not for me but looks interesting technically, I&#x27;ll need to check out how it works)

Long ago, before jsx and react, before hack, Facebook had a fork of php called xhp, which allowed xml data within php. I&#x27;m not suggesting anybody should maintain a fork of python with xml support but a pre-processor could parse xython and generate standard python with trees of html.xx() calls.<p><a href="https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;XHP" rel="nofollow">https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;XHP</a>

Could be fun to see this replacing jinja in old frameworks like django. Although inheritance had a better feel with templates..

Nice! I believe this is a really good approach for making web apps. Best part is probably that you save time by not having to implement some sort of JSON API for your frontend to communicate with your backend.<p>I&#x27;ve been working on a similar thing in Ruby. <a href="https:&#x2F;&#x2F;github.com&#x2F;mayu-live&#x2F;framework">https:&#x2F;&#x2F;github.com&#x2F;mayu-live&#x2F;framework</a>

I love this project. Having used Streamlit and Plotly Dash a lot, I find this project imposes fewer constraints. That said, it didn&#x27;t support my target browser so I wrote my own and in the process (re)discovered fine grained reactive (e.g. solidjs) as an improvement over the VDOM. Anyway, the outcome was a similar approach but supporting the Kindle&#x27;s browser. <a href="https:&#x2F;&#x2F;github.com&#x2F;esensible&#x2F;silkflow">https:&#x2F;&#x2F;github.com&#x2F;esensible&#x2F;silkflow</a>

No one knows what it means, but it’s provocative

from all the react clones I&#x27;ve seen there, this is the one that I&#x27;m mostly impressed by: <a href="https:&#x2F;&#x2F;yew.rs&#x2F;" rel="nofollow">https:&#x2F;&#x2F;yew.rs&#x2F;</a> (React clone written in Rust, targeting webasm)

Hello world examples don&#x27;t inspire confidence that this is anything more than a toy

I&#x27;m a little confused here, React might have a SSR component, but the thing that makes it React is that it runs client-side. So... how are you putting Python in the browser?

Does this offer any advantage over gradio? One big issue I have with gradio is that « simple » computations happen in the backend and make the UX very slow on deployment

Please try brython, it runs in the browser.<p>I find it so ironic that js, a language that runs in the browser, is now used on a server, to rebuild code that is sent back to browser.

This is cute, but it would be more helpful to have react-style GUI programming in python, with Qt (Quick or widgets) as the backend (instead of DOM).

How is this different or better than Dash or Streamlit?

might just use pyxl4, by dropbox or Guido himself.<p><a href="https:&#x2F;&#x2F;github.com&#x2F;pyxl4&#x2F;pyxl4">https:&#x2F;&#x2F;github.com&#x2F;pyxl4&#x2F;pyxl4</a><p>example:<p># coding: pyxl<p>from some_module import x_user_badge<p>user = User.get(some_user_id)<p>content = &lt;div&gt;Any arbitrary content...&lt;&#x2F;div&gt;<p>print &lt;user_badge user=&quot;{user}&quot;&gt;{content}&lt;&#x2F;user_badge&gt;

Perhaps a Tkinter replacement, eh?

But... why?

Don&#x27;t let Dan Abramov see this

I thought generating html from function calls went out with the dinosaurs. We back doing it again?