FastUI 是一种构建由声明式 Python 代码来构建 Web 应用程序用户界面的新方法。
这意味着:
- 如果你是一名 Python 开发人员,可以使用 React 构建响应式 Web 应用程序,而无需编写任何 JavaScript 代码,也无需接触
npm
。 - 如果你是前端开发人员,可以专注于构建真正可重用的神奇组件,无需为每个视图复制粘贴组件。
- 对于每个人来说 —— 真正的关注点分离,后端定义了整个应用程序;而前端可以自由地仅实现用户界面
FastUI 的核心是一组匹配的 Pydantic 模型和 TypeScript interfaces,允许你定义用户界面。其在构建时由 TypeScript 和 Pyright/mypy 进行验证,并在运行时由 Pydantic 进行验证。
FastUI 由 4 部分组成:
fastui
PyPI 包— UI 组件的 Pydantic 模型和一些实用程序。虽然它与FastAPI配合良好,但它不依赖于 FastAPI,并且其中大部分可以与任何 Python Web 框架一起使用。@pydantic/fastui
npm 包— 一个 React TypeScript 包,让你在实现自己的组件时重用 FastUI 的机制和类型@pydantic/fastui-bootstrap
npm 包 — 使用 Bootstrap 实现/定制所有 FastUI 组件@pydantic/fastui-prebuilt
npm 包(在 jsdelivr.com CDN 上提供)提供了 FastUI React 应用程序的预构建版本,因此你无需安装任何 npm 包或自行构建任何内容即可使用它。Python 包提供了一个简单的 HTML 页面来服务此应用程序。
以下是一个简单但完整的 FastAPI 应用程序,它使用 FastUI 来显示一些用户配置文件:
from datetime import date
from fastapi import FastAPI, HTTPException
from fastapi.responses import HTMLResponse
from fastui import FastUI, AnyComponent, prebuilt_html, components as c
from fastui.components.display import DisplayMode, DisplayLookup
from fastui.events import GoToEvent, BackEvent
from pydantic import BaseModel, Field
app = FastAPI()
class User(BaseModel):
id: int
name: str
dob: date = Field(title='Date of Birth')
# define some users
users = [
User(id=1, name='John', dob=date(1990, 1, 1)),
User(id=2, name='Jack', dob=date(1991, 1, 1)),
User(id=3, name='Jill', dob=date(1992, 1, 1)),
User(id=4, name='Jane', dob=date(1993, 1, 1)),
]
@app.get("/api/", response_model=FastUI, response_model_exclude_none=True)
def users_table() -> list[AnyComponent]:
"""
Show a table of four users, `/api` is the endpoint the frontend will connect to
when a user fixes `/` to fetch components to render.
"""
return [
c.Page( # Page provides a basic container for components
components=[
c.Heading(text='Users', level=2), # renders `<h2>Users</h2>`
c.Table[User]( # c.Table is a generic component parameterized with the model used for rows
data=users,
# define two columns for the table
columns=[
# the first is the users, name rendered as a link to their profile
DisplayLookup(field='name', on_click=GoToEvent(url='/user/{id}/')),
# the second is the date of birth, rendered as a date
DisplayLookup(field='dob', mode=DisplayMode.date),
],
),
]
),
]
@app.get("/api/user/{user_id}/", response_model=FastUI, response_model_exclude_none=True)
def user_profile(user_id: int) -> list[AnyComponent]:
"""
User profile page, the frontend will fetch this when the user visits `/user/{id}/`.
"""
try:
user = next(u for u in users if u.id == user_id)
except StopIteration:
raise HTTPException(status_code=404, detail="User not found")
return [
c.Page(
components=[
c.Heading(text=user.name, level=2),
c.Link(components=[c.Text(text='Back')], on_click=BackEvent()),
c.Details(data=user),
]
),
]
@app.get('/{path:path}')
async def html_landing() -> HTMLResponse:
"""Simple HTML page which serves the React app, comes last as it matches all paths."""
return HTMLResponse(prebuilt_html(title='FastUI Demo'))