FastUI 更快地构建更好的 UI

1月18日，北京，聊聊2025如何加入技术开发？

FastUI 是一种构建由声明式 Python 代码来构建 Web 应用程序用户界面的新方法。

这意味着：

• 如果你是一名 Python 开发人员，可以使用 React 构建响应式 Web 应用程序，而无需编写任何 JavaScript 代码，也无需接触npm。
• 如果你是前端开发人员，可以专注于构建真正可重用的神奇组件，无需为每个视图复制粘贴组件。
• 对于每个人来说 —— 真正的关注点分离，后端定义了整个应用程序；而前端可以自由地仅实现用户界面

FastUI 的核心是一组匹配的 Pydantic 模型和 TypeScript interfaces，允许你定义用户界面。其在构建时由 TypeScript 和 Pyright/mypy 进行验证，并在运行时由 Pydantic 进行验证。

FastUI 由 4 部分组成：

• fastuiPyPI 包— UI 组件的 Pydantic 模型和一些实用程序。虽然它与FastAPI配合良好，但它不依赖于 FastAPI，并且其中大部分可以与任何 Python Web 框架一起使用。
• @pydantic/fastuinpm 包— 一个 React TypeScript 包，让你在实现自己的组件时重用 FastUI 的机制和类型
• @pydantic/fastui-bootstrapnpm 包 — 使用 Bootstrap 实现/定制所有 FastUI 组件
• @pydantic/fastui-prebuiltnpm 包（在 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'))