什么是 Hyperdiv?说白了,Hyperdiv 就是用 Python 快速搞定浏览器端交互 UI 的神器。它偏瘦,立马模式(immediate‐mode)语法,几行代码就能渲染组件。内置 Shoelace 组件库、Markdown 渲染支持、Chart.js 图表、浏览器本地存储读写,以及纯 Python 表单校验……全家桶式服务,工具链开箱即用,基础设施几乎零配置。
它解决了哪些痛点?要想在浏览器里写 UI,传统上你得学 HTML + CSS + JS + React/Vue 生态,打包、链路、路由、状态管理一大堆工具还得配置。Hyperdiv 的思路是:
- • 独立用 Python 写「前端」,后台前后端语言一体化。
- • 零 JS 配置,Shoelace 组件现成好用。
- • 表单校验、数据流都可以用 Python 写,少了很多折腾。
下面这张表,帮你快速感受一下传统开发 vs Hyperdiv 的差异:
动手体验:代码示例,仅供参考下面这个小 Demo,做了个简单的表单 + 图表,用 Python 写 UI,绝对不夸张。
from hyperdiv import app, html, storage, form, chart# 定义一个简单表单class UserForm(form.Model): username = form.TextField(min_length=3) age = form.NumberField(min_value=1)@app.route("/")def index():# 从本地存储读上一次输入 data = storage.load("user_info")or{} form_ui =UserForm(data)# 表单提交回调@form_ui.on_submit def handle_submit(clean_data): storage.save("user_info", clean_data) chart_data ={"labels":["Age"],"datasets":[{"data":[clean_data["age"]]}]} return html.div([ html.h3(f"你好,{clean_data['username']}!"), chart.Bar(data=chart_data) ])# 页面布局 return html.div([ html.h1("Hyperdiv 表单 + 图表 Demo"), form_ui.render() ])
一行行 Python,就把表单、校验、保存、图表都搞定了。你只要 pip install hyperdiv,然后执行这段脚本,就能在浏览器里立刻看到效果。
优缺点分析
| |
| |
| |
| 内置常用组件:Shoelace、Markdown、Chart | |
| |
| |
总结总的来说,Hyperdiv 就像给前端加了个 Python 引擎,你不用再在 JS、TS、Babel、Webpack 间钻牛角尖。它适合:
- • 只会 Python、不想学一堆前端技术的同学;
如果你想用 Python 快速做点交互式 Web App,尤其是数据展示、表单操作,真的可以一试。赶紧 pip install hyperdiv,搞一个 Demo 试试水吧!
项目地址:https://github.com/hyperdiv/hyperdiv