37 ms·
React, but in Python
- ammar_x 3y agoHow is this different or better than Dash or Streamlit?
- uhtred 3y agoI thought generating html from function calls went out with the dinosaurs. We back doing it again?
- uhtred 3y agoI feel like I'm talking to kids who have never used anything that came before react in this thread.
- loloquwowndueo 3y agohttps://htmx.org/ https://htmx.org/ Says otherwise, so does https://blog.appsignal.com/2022/07/06/get-started-with-hotwire-in-your-ruby-on-rails-app.html https://blog.appsignal.com/2022/07/06/get-started-with-hotwi...
- uhtred 3y agoI haven't used htmx but it looks nothing like pyreact. htmx is about adding attributes to html, so again, you are still writing html.
- loloquwowndueo 3y agoHtmx is not only about adding attributes to HTML :) check how responses to requests are expected to contain full or partial HTML instead of, say, json.
- uhtred 3y agoyeah I get that, but the html that is returned from the server doesn't have to be generated with things like html.div(html.p('hello this is a p tag inside a div')) you could still have your html in a template file and parse and return the contents of that.
- cantSpellSober 3y agoWhy?
- nawgz 3y agoHe means API calls, obviously overloaded the term "function calls" a bit In this case, I think it's also clear that most things you'd call an "application" abhor this behavior, which is why heavy clients are so popular, and small shops without frontend engineering talent are making a big push away from heavy clients which raises all the hubbub about HTMX etc
- Izkata 3y agoNo, he meant function calls as opposed to JSX, clarified in another comment.
- resoluteteeth 3y ago> He means API calls, obviously overloaded the term "function calls" a bit No they literally meant generating html like h1() rather than <h1></h1> in something like jsx templates (I initially wasn't sure if they were talking about the model of server side rendering with client side events passed back to the server through a websocket either though)
- uhtred 3y ago> He means API calls, obviously overloaded the term "function calls" a bit lol, no he doesn't
- uhtred 3y agobecause ASP .NET webforms suck to work with
- recursive 3y agoI mean, react does it. It never left. JSX compiles to function calls.
- uhtred 3y agoyes but no one generates html from the function calls directly in react (even though you could if you wanted), they use jsx which is at least a bit like writing html.
- neurostimulant 3y agoFirefox's Devtools uses React and it doesn't use JSX. Example: https://github.com/mozilla/gecko-dev/blob/aec3a901e6f6b3041b5ec457c9111a042cef1fb1/devtools/client/netmonitor/src/components/MonitorPanel.js#LL203C10-L203C10 https://github.com/mozilla/gecko-dev/blob/aec3a901e6f6b3041b... Their reasoning: https://firefox-source-docs.mozilla.org/devtools/frontend/react-guidelines.html#why-no-jsx https://firefox-source-docs.mozilla.org/devtools/frontend/re...
- acemarke 3y agoThat page is very out of date. They did later adopt a build step and switch to using JSX in much of the FF DevTools codebase. As an example, here's the Editor main component (same "latest" commit you pointed to): https://github.com/mozilla/gecko-dev/blob/aec3a901e6f6b3041b5ec457c9111a042cef1fb1/devtools/client/debugger/src/components/Editor/index.js#L686-L722 https://github.com/mozilla/gecko-dev/blob/aec3a901e6f6b3041b... The codebase is a mish-mash of very old-style React+Redux code, with newer files and usages. (I know this because I work at Replay.io, which started as a fork of the FF DevTools source, and we spent all of last year modernizing our fork :) Migrated the entire codebase to TS, ripped out all remaining uses of the ancient `React.DOM` helper functions and converted those to JSX, modernized the 2015-era Redux logic, etc: https://github.com/replayio/devtools/pulls?q=is%3Apr+sort%3Aupdated-desc+is%3Amerged+merged%3A2022-03-05..2022-11-30+ https://github.com/replayio/devtools/pulls?q=is%3Apr+sort%3A... )
- 3y ago
- shrimpx 3y agoTo be clear, what this comment is talking about is using `p()` and `div()` calls instead of `<p>` and `<div>` tags like in JSX. On first read, I thought by "generating html from function calls" the author was referring the react-style way of building a UI by writing a reactive function that returns HTML.
- Stephen_0xFF 3y agoStill very much alive. This implementation with python, to me, doesn’t look promising, but Elixirs LiveView does.
- innocentoldguy 3y agoLiveView is awesome. We've completely replaced React with LiveView and the user and developer experience is significantly better.
- agumonkey 3y agoCould be fun to see this replacing jinja in old frameworks like django. Although inheritance had a better feel with templates..
- robertlagrant 3y agoDjango doesn't use Jinja, does it? I thought it did its own thing.
- rmorshea 3y agoReactPy dev here. We're actually contributing to a WIP PEP that would add JS-like tagged template literals to Python. We think this will open up a whole new world of templating and DSL possibilities: https://github.com/jimbaker/tagstr https://github.com/jimbaker/tagstr
- quechimba 3y agoNice! 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. I've been working on a similar thing in Ruby. https://github.com/mayu-live/framework https://github.com/mayu-live/framework
- revskill 3y agoNowdays, with automatic api generation for your API, there's no difference in backend/frontend communication in type-safe way.
- taeric 3y agoCurious what automatic generation you have in mind?
- deleted 3y ago[deleted]
- revskill 3y agoSay you have a function in the backend, for example in typescript: function handler(a: A, b: B) {} With a suitable tooling, you can generate the type for frontend to call handler(a, b) in a type-safe way, which could be validated on the backend and frontend. So you're just a "generation" step away from bluring BE/FE communication.
- taeric 3y agoApologies, I know what generation is. But the ABI that is the wire between the front and the back is notorious for not being stable. Such that I was asking if you have experience with a generation stack that is favorable. Most folks I know do not have favorable experience in this realm. Best I know of, are those that drop down to something like protobuff to describe the messages.
- ariym 3y agoDon't let Dan Abramov see this
- say_it_as_it_is 3y agoHello world examples don't inspire confidence that this is anything more than a toy
- paulddraper 3y agoI'm lost. React builds interactive UIs (web, mobile). After each interaction, the virtual DOM is programmatically recreated and reconciled to the actual DOM. But reactpy is running on a backend sever??? Is each interaction resulting in a server call? Can someone explain what is going on? EDIT: Ah, okay, thanks. Every re-render is a network call. If people complained about web UI performance before..... :)
- ledauphin 3y agoyes, from reading the docs, there's a websocket. Making a 'server call' on each interaction is also what web apps used to do before SPAs were a thing. And in many cases it's what SPAs do as well. Of course, it depends what counts as an 'interaction', but that's been the case since JavaScript existed.
- quechimba 3y agoYep. And nowadays you can deploy apps really close to users so latency is really low. If you have <100ms you don't really notice the latency.
- tomas789 3y agoA no-op API call to FastAPI takes more than that. Even when running on localhost. And FastAPI is one of the better contestants.
- LtWorf 3y agoIf fast api didn't use pydantic (the slowest library in that space), I'm sure it might be more deserving of the name :D Microbenchmark to compare with typedload (which I wrote) and apischema https://ltworf.github.io/typedload/performance.html https://ltworf.github.io/typedload/performance.html Note that pydantic and apischema use .so files, while typedload is just pure python code.
- paulddraper 3y ago
- ivoflipse 3y agoShameless plug for a similar project called Collagraph (https://github.com/fork-tongue/collagraph https://github.com/fork-tongue/collagraph). 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! - Reactivity (made possible by leveraging observ) - Function components - Class components with local state and life-cycle methods/hooks - Single-file components with Vue-like syntax (.cgx files) - Custom renderers Currently there are two renderers: PysideRenderer: for rendering PySide6 applications PygfxRenderer: for rendering 3D graphic scenes with Pygfx 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.
- jcadam 3y agoPerhaps a Tkinter replacement, eh?
- funkaster 3y agofrom all the react clones I've seen there, this is the one that I'm mostly impressed by: https://yew.rs/ https://yew.rs/ (React clone written in Rust, targeting webasm)
- jerpint 3y agoDoes 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
- ksherlock 3y agoLong ago, before jsx and react, before hack, Facebook had a fork of php called xhp, which allowed xml data within php. I'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. https://en.wikipedia.org/wiki/XHP https://en.wikipedia.org/wiki/XHP
- tedkalaw 3y agoxhp was honestly pretty nice - it was something watching the rapid codemods transform the language. There was also ComponentKit, which was used heavily in fbobjc: https://github.com/facebook/componentkit https://github.com/facebook/componentkit
- 4ndrewl 3y agoAnd long before transpiling became cool, FB had https://en.m.wikipedia.org/wiki/HipHop_for_PHP https://en.m.wikipedia.org/wiki/HipHop_for_PHP
- massover 3y agoCheck this project: https://github.com/gvanrossum/pyxl3 https://github.com/gvanrossum/pyxl3
- garymiklos 3y agoDoes 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.
- b33j0r 3y agoI love OP’s project. I probably won’t use it, and I say that sadly. I chased that dragon for years, but ECMA was a sleeping giant. I do not have the answer to your question, parent, but I feel the need to evangelize vanilla JS/ECMA. You can do everything you could do with jquery and react with very simple constructs now. Web components are slightly awkward, but damn! Possible, and easier than it ever was before js components. Introducing any additional technologies or node is no longer necessary. The frontend has evolved. Now. You still have to learn ECMA, but that’s what browsers definitively run as of my writing. I can pray to mdn for wasm to be a go-to every day tech, but that day is not today.
- shrimpx 3y agoThere are many, but here's a start: pyjs, streamlit, brython, pyodide, pywebio, gleam, dash, bokeh, gradio, pglet, idom, anvil, pynecone, onu The last two are YC-funded. Edit: add https://flet.dev https://flet.dev which has superseded pglet
- fermigier 3y agohttps://github.com/sfermigier/awesome-python-web-frameworks#front-end-frameworks https://github.com/sfermigier/awesome-python-web-frameworks#... (Not complete. Pull requests welcome.)
- nosnah 3y agoNot a list, but I've been trying out django-unicorn, which lets you build components in python and use things like unicorn:model and unicorn:click in your templates.
- TeaVMFan 3y agoIf you're interested in this sort of thing, but want to code in Java, try Flavour: https://flavour.sourceforge.io/ https://flavour.sourceforge.io/ Flavour is a fast, batteries-included, type-safe framework for making modern SPA web apps in Java (and other JVM languages). * Great Lighthouse scores? Check! * Real SPAs without sluggish network round trips? Check! * Modern path-based routing? Check! * Components (built-in and user-defined)? Check! * Effortless service calls? Check! * Refactor frontend and backend simultaneously using your current IDE? Check! If this sounds interesting, check out these other resources: * Article in Java Magazine: https://blogs.oracle.com/javamagazine/post/java-in-the-browser-with-teavm https://blogs.oracle.com/javamagazine/post/java-in-the-brows... * 100% Flavour 5-letter word game: https://frequal.com/wordii https://frequal.com/wordii * Flavour podcast (created with Castini, a Flavour app): https://castini.frequal.com/cast/show/Flavourcast/f7e171e8-22de-4f3b-adbb-5462991343c5 https://castini.frequal.com/cast/show/Flavourcast/f7e171e8-2...
- nightpool 3y agoNone of these links seem to work? This site can’t be reachedCheck if there is a typo in frequal.com. DNS_PROBE_FINISHED_NXDOMAIN
- narush 3y agoIf you're interested in using React-style frontend programming in Python but want an experience / API closer to that of React, I recommend checkout out Reacton [1]. 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'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. I'm not associated with the project, but I know the maintainers (creators of Volia [2]) and they are honestly excellent. I haven't use the project in production, but the getting starting guide is pretty compelling. [1] https://github.com/widgetti/reacton https://github.com/widgetti/reacton [2] https://github.com/voila-dashboards/voila https://github.com/voila-dashboards/voila
- maartenbreddels 3y agoThanks for the shout out. The follow up of that is Solara: "NextJS, but in Python" :) https://github.com/widgetti/solara/ https://github.com/widgetti/solara/
- bsimpson 3y agoI never expected to care about a UI library in Python, but my user research collaborators prefer Colab notebooks (as opposed to Observable, where my JS expertise would be relevant). Now you (and the OP) have me pondering about building UIs in notebooks… Not sure doing something in React is better than just learning the standard tools, but it's a good option to know exists.
- jake_overflow 3y agoBut... why?
- mixeden 3y agoNo one knows what it means, but it’s provocative
- crubier 3y agoControversial, 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. Javascript/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. <The world if data scientists/ML/CV people used Typescript.JPEG>
- miketery 3y agoIsn’t mojo the future on that front?
- crubier 3y agoMojo looks cool. But I'll wait for it to be open sourced AND as easy to use as Typescript + React for real complex web apps before considering it. I expect this to take 2-5 years if it ever happens. It's a possible future, not the present.
- skratlo 3y ago[flagged]
- winrid 3y agoTS is a joke tsc is the only compiler I've had to step through with a debugger multiple times. No DS/ML researcher wants to deal with VM args just to use more than 1GB of memory. That alone would cause so much frustration. Not to mention unpredictable generational GC. Or the crazy crap people do with the type system (what you call better other people call a mess). At least Python has some semblance of runtime type safety.
- crubier 3y ago> TS is a joke I'll discuss facts > tsc is the only compiler I've had to step through with a debugger multiple times. 99.9% of Typescript developers never ever had to do that. Sounds like a "you" problem > No DS/ML researcher wants to deal with VM args just to use more than 1GB of memory. That alone would cause so much frustration. You're talking about NodeJS, which is just one of the many JS engines. It's also 200% easier to start NodeJS with a flag to increase the (sane) default memory limit, as compared to the insanity of setting up a Python environment. > Not to mention unpredictable generational GC. Is Python GC better? Really? The good thing with Python is that the whole language is so slow that GC is just a drop in the bucket. On the other hand, Millions (Billions?) have been spent optimizing JS engines and it shows. Also: GIL. > Or the crazy crap people do with the type system (what you call better other people call a mess). I don't know what you're talking about, TypeScript go Brrr and I get magnificent Intellisense and subtle type checking, while MyPy and friends keeps crapping their pants > At least Python has some semblance of runtime type safety. No. And critically it has no semblance of comp time type safety either.
- jraph 3y agoThe slowest framework now available for the slowest language. (this is a joke, it was my immediate thought when seeing this. More seriously, probably not for me but looks interesting technically, I'll need to check out how it works)
- jokoon 3y agoPlease try brython, it runs in the browser. 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.
- robertlagrant 3y agoLanguages can run anywhere they have a runtime.
- skratlo 3y agoThis 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).
- TheRealPomax 3y agoI'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?
- koolba 3y agoReact doesn’t have to run client side. The DOM renderer is just one possible output, albeit the most popular. The output doesn’t even have to be human consumable.
- TheRealPomax 3y agoThat's like saying a ship doesn't have to sit in the water. You could put in in a dry dock too, and put wheels on it. But now it's not really a ship anymore. React, the UI framework, is a UI framework and is for user interfaces. The output _can_ be "not human consumable" but then it's not React, that's something else.
- deleted 3y ago[deleted]
- ironmagma 3y agoI created something like this inside a tech giant once. It never saw the light of day with regard to usership. It's good to see someone doing the same in the open source world. A brief summary of what I did: * Python-powered apps, like this * 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'd send the new props to React to see if it would trigger a lifecycle event. If a lifecycle event was triggered, I'd replicate it onto the server which could again render new props. * 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). * The purpose of all of this was to cater to ML engineers who didn'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. * 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. See also: [Dash](https://github.com/plotly/dash https://github.com/plotly/dash)
- abhayhegde 3y agoOh, I had a case where I had built an ML based recommendation app, and utilized Flask for serving the results on my localhost. Would have loved to use React but my lack of sufficient JavaScript knowledge prevented me from doing so. Your tool seemed to have perfectly catered to my needs!
- ironmagma 3y agoDash could probably get close enough as well. It's a bit limited compared to React but provides quite a lot of interactivity. (Plus, the server is stateless which is nice.)
- abhayhegde 3y ago
- est 3y agomight just use pyxl4, by dropbox or Guido himself. https://github.com/pyxl4/pyxl4 https://github.com/pyxl4/pyxl4 example: # coding: pyxl from some_module import x_user_badge user = User.get(some_user_id) content = <div>Any arbitrary content...</div> print <user_badge user="{user}">{content}</user_badge>
- palencharizard 3y agoThis is what's missing from the reactive-python project IMO. A huge draw for React is that it _extends_ the JavaScript Syntax. If you still had to compose your React components with a bunch of nested `React.createElement('Component')` calls (instead of `<Component />`) it wouldn't be nearly as useful.
- extremeracer 3y agoI love this project. Having used Streamlit and Plotly Dash a lot, I find this project imposes fewer constraints. That said, it didn'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's browser. https://github.com/esensible/silkflow https://github.com/esensible/silkflow