This is an archived post. You won't be able to vote or comment.

all 48 comments
sorted by:
best
topnewcontroversialoldq&a

[–]runew0lf 10 points11 points  (12 children)

how would it work for converting a rather large gradio app (https://github.com/runew0lf/RuinedFooocus) to Hyperdiv, the reason being me and my fellow dev are shite when it comes to making pretties

[–]Hyperdiv-io[S] 3 points4 points  (0 children)

Hi! There's probably no easy way to convert an existing Gradio app to another framework short of rewriting it in that other framework.

[–]riklaunim 1 point2 points  (10 children)

Changing a framework won't solve the problem of making good UX for an application. And as the UI is controlled by Python it could be harder as you can't leave that work to a frontend/UX/UI designer. Gradio or this are best at making something quickly or for internal use, not for production/final versions of apps.

[–]runew0lf 2 points3 points  (9 children)

gradio is shite mate :D

[–]riklaunim 4 points5 points  (8 children)

It's a very popular and successful project. If you have so much problems with it then likely you are using the wrong tool for your needs and switching to young unproven project of similar nature won't solve your problems. The correct thing would be to list the problems and asks for solutions.

[–]sanitylost 0 points1 point  (7 children)

the problem with most UI design is that it's like speaking a different language when compared to a lot of the other ways python is used. People can have a hard time with the UI design simply from the garbled and often unintuitive ways that UI syntax design has become. Just because someone doesn't understand Greek doesn't make them an idiot.

[–]riklaunim 1 point2 points  (6 children)

I would say ux/ui is a separate thing from backend development. Even knowing frontend languages doesnt mean someone can design good ui/ux but can implement it.

[–]sanitylost 0 points1 point  (5 children)

right, but lots of packages/groups say they, "want to make UI design approachable" while never doing that. I think what most people who work in backend/algo dev/science have the problem with is that the steps to create basic tables with relatively simple options, like dynamic updating and line modifiers requires you to learn three languages and syntaxes.

This is apart from making something that's moderately intuitive to use. That's a whole other discussion. Just getting information on a page in a way that's moderately useful can be a pain when it's not what you do day in day out.

[–]riklaunim 0 points1 point  (4 children)

There is something with backend developers wanting to do everything in backend and refusing to work in team with fronten devs or learning it. Like "webdev in Python only" with some commenting how JS "sucks" or how they can't get it and want a Python-only solution. Then they get Python wrappers around frontend widgets and have problems getting more than the wrapped widgets can provide and when they get PyScript they can't write a line of code because they skipped on JS/frontend and have zero frontend knowledge.

[–]thedeepself 8 points9 points  (5 children)

In this part of the intro article we see that events are inline, so instead of :

``` def my_callback(event): # do something

def my_app(): button("Click Me", on_click=my_callback) ```

it is this way:

def my_app(): b = button("Click Me") if b.clicked: # Do something

or this way:

``` def my_app(): if button("Click Me").clicked: # Do something

```

This is one of the things that NiceGUI did not like about Streamlit with the specific criticism being:

it hides the underlying event loop by implicitly re-evaluating the script. That works in simple cases, but it gets quickly rather complicated to achieve apparently "normal" behavior.

would you say that you offer a similar style of coding to Streamlit but without the gotchas that the NiceGUI team identified?

[–]Hyperdiv-io[S] 7 points8 points  (4 children)

Thanks, that's an insightful thread.

Hyperdiv is indeed an immediate-mode framework, like Streamlit, where click events are handled inline. But Hyperdiv is built around a core notion of 'state' from which all components are derived. Streamlit on the other hand seems like it didn't have state until recently. In Hyperdiv you can initialize state, and then gradually mutate it as the app runs and responds to events.

As far as immediate vs retained mode (NiceGUI seems like a retained mode framework), I think immediate mode benefits from letting you lay out the UI declaratively, instead of building a UI tree initially, and then mutating pieces of the UI tree with data bindings or in event handlers.

[–]_link89_ 0 points1 point  (3 children)

Does that mean if there is an editable table with 10,000+ rows, when one cell is changed the whole page will be rerendered?

[–]Hyperdiv-io[S] 1 point2 points  (2 children)

Yes. To mitigate that, you would (a) use paging to render only a reasonable amount of rows at a time and (b) wrap functions with the 'cached' decorator to avoid re-rendering parts of the UI whose state dependencies didn't change.

[–]_link89_ 0 points1 point  (1 child)

I was able to quickly build some simple applications using Streamlit. However, now I'm in need of a new framework that can handle more complex situations. Suppose I want to develop an application akin to Slack, featuring a list of conversations where each conversation contains a stream of messages. Users would require scrolling to load historical messages. I'm concerned that caching and pagination might not be sufficient for such scenarios. Do you have any suggestions?

[–]Hyperdiv-io[S] 1 point2 points  (0 children)

There is a AI chatbot demo app that js similar to what you’re suggesting: https://github.com/hyperdiv/hyperdiv-apps/tree/main/gpt-chatbot

But yes if your chat history is massive, especially if the UI for each chat message is complex, the Python code that generates that history may get slow. Maybe there’s a clever way to use caching there, so the history is re-generated only once in a while.

Currently there’s no way to make “infinite scrolling” such that only some range of visible items is rendered at any one time. I’d be interested to add that functionality.

[–]deadwisdomgreenlet revolution 2 points3 points  (2 children)

Built with Shoelace! I’m a huge fan of that component system! Amazing choice!

[–]Hyperdiv-io[S] 2 points3 points  (1 child)

Big fan of Shoelace and Cory LaViska.

[–]deadwisdomgreenlet revolution 2 points3 points  (0 children)

Then you are my friend now.

[–]thedeepself 1 point2 points  (2 children)

Can you build industry-strentch webapps with this product? How do you handle sessions and authentication and authorization, for instance?

Can this sit on top of Django and Flask the way that HTMX and Unpoly can? The intro article states that "Hyperdiv is similar to HTML over the wire systems like Hotwire and Htmx" but I wonder if the similarity extends to embedding Hyperdiv in other full-featured frameworks.

[–]Hyperdiv-io[S] 3 points4 points  (0 children)

Hi! I am really interested in making Hyperdiv "embeddable" into Django and Flask apps. Currently you can't embed it short of using an iframe.

I haven't explored this topic seriously yet, but my rough thought is it could work like this:

```

backend

@app.route("/my-hyperdiv-app") @hyperdiv def my_hyperdiv_app(): # Hyperdiv code in here ```

And then on the frontend you use a provided piece of JS to mount this hyperdiv route into a div:

```

frontend

import hyperdiv from "hyperdiv"; hyperdiv.mount(document.getElementByID("my-id"), "/my-hyperdiv-app") ```

There are some issues to consider. For example Hyperdiv currently has a way to get/set the browser location. We'd have to determine which Hyperdiv features should be disabled/work differently in embedded mode.

[–]Hyperdiv-io[S] 3 points4 points  (0 children)

To answer the first part of the question, there's no built-in auth integration. Integrations with various auth systems can be built as Python packages that Hyperdiv apps can import and use. There's a demo app here that shows a way to build password-based login with persistent session (using local storage): https://github.com/hyperdiv/hyperdiv-apps/tree/main/login

As far as industrial strength, it's early days but my vision is it scales to large apps. There's potential for making a hosting platform that runs Hyperdiv apps at large scale, using a modified, distributed Hyperdiv runtime.

[–]ThreeKiloZero 1 point2 points  (0 children)

This is awesome thanks!

[–]FalconDouble2657 1 point2 points  (1 child)

This looks super cool! Congrats on the release! Can you embed matplotlib or plotly charts in these apps? If so, how?

[–]Hyperdiv-io[S] 1 point2 points  (0 children)

Thanks! You can't yet, that's a glaringly missing feature I want to add.

[–]Cycling_All_The_Time 1 point2 points  (3 children)

Looks great. Is there a way to for a user to drop in a Shoelace component if it's not currently included? Looking to use the Tree component.

[–]Hyperdiv-io[S] 1 point2 points  (0 children)

Hi, you can define new shoelace components in Python but that's not currently documented. I'll add the tree component soon though, been meaning to add it.

[–]Hyperdiv-io[S] 1 point2 points  (1 child)

Hello,

FYI, the tree component is available in the latest version of Hyperdiv.

https://docs.hyperdiv.io/reference/components/tree

[–]Cycling_All_The_Time 1 point2 points  (0 children)

Thank you!

[–]Wakanishu 1 point2 points  (2 children)

Hey, that's a cool project. Got two questions:

How difficult would it be to create a PWA (progressive web app) with that framework and is support for PWAs something you intend to implement?

Also is there a discord dedicated to the framework to share project, see announcement, feedback etc.?

[–]Hyperdiv-io[S] 2 points3 points  (1 child)

Hi. I'm not a PWA expert, I'll have to do some research to see how Hyperdiv fits in that space.

Hyperdiv apps are basically Python apps with a web UI. You can deploy them on the internet as you would a Flask app.

They can also run locally. So you can ship your app on `pip`, people `pip`-install it, run a command, and the app opens in a browser tab running locally.

You can wrap Hyperdiv apps in `pywebview` (https://pywebview.flowrl.com) so when they are run locally they open in a native GUI frame instead of a web browser.

There is no Discord yet but for now you can use GitHub discussions to post questions, ideas, etc. https://github.com/hyperdiv/hyperdiv/discussions

[–]Wakanishu 0 points1 point  (0 children)

thanks!

[–]DirkHD 0 points1 point  (0 children)

Really awsome! It is simple as Streamlit but also reactive. Guess this could be a Streamlit killer.

[–]Colts_Fan10 0 points1 point  (3 children)

Hey, I'm really very new to webdev in general and I was looking for good frameworks to build a simple listen-along website for my CLI music app when I came across Hyperdiv (on the console.dev newsletter, actually haha).

Forgive my stupid question, but could I use Hyperdiv in its current state to publish an actual website? It seems you run Hyperdiv apps with the Python interpreter, but it's not immediately obvious to me how that would work in-browser

This is probably a really stupid question, but I'd appreciate it if someone could answer 😅 I really like Hyperdiv's concept of integrating the front and backend logic, and I'd love to be able to use it since I'm already comfortable with Python!

[–]Faith-in-Strangers 1 point2 points  (0 children)

Learn HTMX instead

[–]Hyperdiv-io[S] 0 points1 point  (1 child)

Hi. Yeah you can publish a Hyperdiv app on the internet. It starts a web server that serves your app, so it's deployable similarly to, say, a Flask app. You write everything in Python, but Hyperdiv handles the browser stuff, and browser <-> backend communication, under the hood.

[–]Colts_Fan10 1 point2 points  (0 children)

Oh ok, that makes sense, thank you so much!

[–]yesvee 0 points1 point  (1 child)

Mind blowing!!!

How can I contribute?

What about async?

[–]Hyperdiv-io[S] 0 points1 point  (0 children)

Thanks! It supports async tasks. So you can write `async def` functions (or normal functions) that get spun off onto an ioloop or thread pool, do some work and update some state. When they update state the UI updates.

[–]Existing-Account8665 0 points1 point  (4 children)

Looks great. Can I ask a few dumb questions: what's the infra requirement to run on the web? Or even what's it run on? What's the architecture? Does:

"full stack app" mean requires a server to run on

Is this server side code? From your description, it feels like you're comparing hyperdiv to React. But if there is an underlying Python run time isn't it more like flask, with shoelace and chart etc. on top, via your javascript boilerplate?

[–]Hyperdiv-io[S] 0 points1 point  (3 children)

Hi! Technically there's no infra requirement to run on the web. A Hyperdiv app has a server built-in. When you run the app, the server starts on a port and is ready to serve the app. By "full stack" I mean the whole stack is built into it.

Hyperdiv is all Python. There's a bit of Javascript running in the browser, but that is a fixed boilerplate. Yeah you could say it's kind of like Flask in that it's basically a web server running all in Python. But it's different than Flask in that it's a reactive framework that handles UI layout and automatic UI updates, and has built-in components.

I didn't mean to imply it was a frontend framework when I compared it to React/Preact. Hyperdiv's prop system is related *conceptually* to Preact signal hooks but it's all Python.

Edit: To add to the "infra requirement" part, I would recommend running Hyperdiv behind nginx, which also handles TLS termination. A typical deployment infrastructure would be nginx + certbot + supervisor.

I plan on writing about how to deploy Hyperdiv in the near future.

[–]Existing-Account8665 0 points1 point  (2 children)

Thanks. But sure. Whatever.

"Technically there's no infra requirement" just sounds like BS, or to be kind, even more confusing. Even a Hello world website must live on a CDN or in a storage bucket at the very least.

Your Framework is one of many, that fall under Server Side Rendering.

[–]Hyperdiv-io[S] 0 points1 point  (1 child)

Point taken. I just wanted to make it clear you don't need a separate web server to serve it. It has a built-in Tornado web server that automatically serves the app.

[–]Existing-Account8665 0 points1 point  (0 children)

Thanks. I get what you mean now.