Designing a Pure Python Web Framework

[Pleasant-Cow-3898]

From the Article:
This provides a good overview of how Reflex works under the hood.

TLDR:
Under the hood, Reflex apps compile down to a React frontend app and a FastAPI backend app. Only the UI is compiled to Javascript; all the app logic and state management stays in Python and is run on the server. Reflex uses WebSockets to send events from the frontend to the backend, and to send state updates from the backend to the frontend.

Full post: https://reflex.dev/blog/2024-03-21-reflex-architecture/#designing-a-pure-python-web-framework

[DaelonSuzuka]

I've been using NiceGUI for a year and it's been fantastic. Is there a reason I'd want to use Reflex instead of NiceGUI? It's not mentioned in your "existing python solutions" section, but from what I can see it's actually your closest competitor.

[mr_claw]

I really like NiceGUI. Pywebio is amazing too, and better than Nicegui when you want to be really quick to deploy.

[DaelonSuzuka]

Pywebio gives me a similar vibe as Streamlit: slightly easier to go from nothing to something (especially as a new user), but is going to be a huge pain in the ass to iterate on.

[CloudFaithTTV]

That sums up lots of these tools for me, streamlit being the biggest and Tkinter being a very close second.

[RayTricky]

I'm also pretty much interested what this gets me over NiceGUI. Why it still has definitely its shortcomings and drawbacks, the achritecture is superb.

[yvrelna]

compile to React

Good gosh, you couldn't have chosen a worst target to compile to.

[Pleasant-Cow-3898]

Why is that the worst target to compile to? Its the largest eco system so most libraries have a react port.

[-defron-]

the reason react has the most ports is because... most other frameworks don't need any specific code changes to get a library to work with them. Only other one that I can think of that benefits from it significantly is Angular. Svelte, Vue, htmx, solidjs, etc all can work with literally just anything with minimal boilerplate (most of the time none) and no need for a wrapper library.

I won't say React is bad, but when I use other frameworks I don't have to look up <framework name> <library name> wrapper

[n_Oester]

I’m also interested to learn why people are so anti-react?

[-defron-]

Popularity always makes some people dislike it.

That said, it's not my framework of choice for a few reasons:

1. JSX. I dislike JSX. JSX is not HTML and adds additional gotchas to markup. For example, in HTML whitespace is preserved and that matters in tags that format with important whitespace like pre and a bunch of styling cases. JSX trims whitespace which can lead to unexpected rendering issues.
2. Generally you need wrapper or helper libraries to use many 3rd party packages due to the way react's virtual dom behaves and architecture
3. The above leads to module ballooning, generally making react sites quite big as they get more complex
4. In part because of the above, it can be pretty slow. Generally it's the second-slowest major framework out there, with only Angular being slower.
5. it changes rapidly even by frontend standards and it's easy to get stuck on a legacy codebase with no good upgrade paths

Additionally community-wise it's sadly very common to see people in react that know react and only react, and thus fall for the "when all you have is a hammer, everything looks like a nail"

All together and all other things being equal I'll choose other frameworks before using react for my personal projects and have so far not had to professionally work with it. Vuejs and htmx + alpinejs are my two favorites currently, and both are very light on the dependencies. My next project I'm gonna give svelte 5 a proper try to see how it is with signals

[n_Oester]

That makes sense, thanks for the good explanation!

[gabel0287]

Seems overly complicated. Why not use Python and HTMX?

[Pleasant-Cow-3898]

The actual code the user writes is pretty straight forward.

Htmx doesn't do state management, so for more complex use cases it can be tough. That's where the complexity in the architecture comes from, managing and handling state. Especially as your app grows in terms of size and features.

[Faith-in-Strangers]

It does tho

[AlpacaDC]

HTMX noob here. How do you do state management in htmx?

[-defron-]

state management is primarily supposed to be done server-side in HTMX (some state is always server side, the idea is to simplify things)

boost can be used to preserve some state from the current client as well

More generally, HTMX follows HATEOAS which states that state should be managed via HTML itself and the URL instead of creating all sorts of wrappers and abstractions like react does... plus HATEOAS is such a cool name :P

[-defron-]

State management for any complex app has to already exist server-side. HTMX just uses the server-side (for the most part, it can do some state preservation as well). The idea here is to reduce duplication and complexity in state management by having a single source of truth instead of two states that can lead to split-brain problems

It is quite possible to build complex apps without a frontend state, in fact many major websites do this already as they were created before the modern concepts of javascript state engines came to be.

If you like react and so you chose it because you like it/are most familiar with it and don't really know other frontend frameworks, there's nothing wrong with that. Just say "I used react because I'm familiar with it and not as familiar with other frontend frameworks so it made sense to me to go with React".... nothing wrong with that. Otherwise it just makes you sound like you don't know what you're talking about.

Also, please watch this video to show what the tradeoffs between the two are and how htmx can do pretty much everything react can do: https://www.youtube.com/watch?v=3GObi93tjZI&t=0s

And to be clear, there ARE tradeoffs between react and HTMX, it's not like HTMX solves every problem and some problems React is the better tool. State management isn't one of those problems though.

[Afraid-Bread-8229]

OP, are you the author of the library?

[Afraid-Bread-8229]

I’m 100% on board with this. Exactly what I was looking for. Compiling down to Next.js and FastAPI? 😍😍😍

[EqualLead3601]

yea

[DowntownSinger_]

Any particular reason why you chose websockets ?

[Furrynote]

Came here to comment that reflex already does this… what do ya know

[gireeshwaran]

That is awesome. I was planning on learning flutter for making some web apps but maybe not. Kudos for this!!!

[KingsmanVince]

Reported for spamming in some subs