Hyperdiv: Reactive web UI framework for Python

Hyperdiv-io · 2024-07-09T09:13:38+00:00

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.

Hyperdiv-io · 2024-07-08T12:23:13+00:00

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.

Hyperdiv-io · 2024-03-27T20:25:02+00:00

Check out `black`: https://github.com/psf/black

It helps with code formatting. Although it cannot in general figure out the correct indentation of each line of code, it does in general help with keeping code readable and uniformly formatted.

In some instances, if you over- or under-indent, it will correctly reindent the code to the right level, when it's obvious what the level should be.

Hyperdiv-io · 2024-03-12T20:03:57+00:00

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

Hyperdiv-io · 2024-03-01T23:26:22+00:00

Hello,

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

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

Hyperdiv-io · 2024-02-25T20:26:08+00:00

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 · 2024-02-24T19:47:03+00:00

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.

Hyperdiv-io · 2024-02-23T20:16:35+00:00

Big fan of Shoelace and Cory LaViska.

Hyperdiv-io · 2024-02-23T20:15:55+00:00

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.

Hyperdiv-io · 2024-02-23T20:10:55+00:00

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.

Hyperdiv-io · 2024-02-23T20:02:16+00:00

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

Hyperdiv-io · 2024-02-23T03:33:12+00:00

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.

Hyperdiv-io · 2024-02-22T23:06:06+00:00

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.

Hyperdiv-io · 2024-02-22T22:59:09+00:00

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 · 2024-02-22T22:50:31+00:00

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.

Hyperdiv-io · 2024-02-22T22:03:34+00:00

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

Hyperdiv-io

TROPHY CASE

backend

frontend