FastUI实战：用Python声明式构建响应式Web界面，告别JavaScript

FastUI 是一种全新的构建 Web 应用程序用户界面的方式，它完全由声明式的 Python 代码定义。它为 Python 开发者和前端开发者提供了一套简单而强大的工具，让你能够高效地构建响应式的 Web 应用界面，无需处理繁杂的 JavaScript 代码或底层技术细节。

FastUI 的优势

• 对于 Python 开发人员而言，FastUI 赋予了他们使用 React 构建响应式 Web 应用的能力，整个过程无需编写一行 JavaScript 代码，也不必和 npm 等工具的复杂性打交道。这意味着 Python 开发者可以在熟悉的 Python 语言环境中，构建出功能强大的现代 Web 应用。
• 对于前端开发人员来说，FastUI 让他们能将精力集中在构建可重用的组件上，而不是为每个视图都重复复制粘贴组件。这使前端开发人员能更专注于提供卓越的用户体验和界面创新。
• 从整体来看，FastUI 实现了后端与前端的真正分离。后端负责定义整个应用的核心逻辑，而前端则拥有了完全的自由去实现用户界面。

FastUI 的构成

FastUI 由以下四个核心部分组成：

• 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 包或构建任何内容，就能直接使用 FastUI。同时，Python 包也会提供一个简单的 HTML 页面来加载此应用。

FastUI 实践：一个用户界面示例

在实际应用中，FastUI 能帮助开发者快速构建出响应式的 Web 应用界面。下面是一个简单的 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

# 创建FastAPI应用
app = FastAPI()

# 定义用户数据模型
class User(BaseModel):
    id: int
    name: str
    dob: date = Field(title='出生日期')

# 定义一些用户
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]:
    """
    显示四位用户的表格，'/api' 是前端连接获取组件渲染的端点，当用户访问'/'时使用。
    """
    return [
        c.Page(
            components=[
                c.Heading(text='用户', level=2),
                c.Table(
                    data=users,
                    columns=[
                        DisplayLookup(field='name', on_click=GoToEvent(url='/user/{id}/')),
                        DisplayLookup(field='dob', mode=DisplayMode.date),
                    ],
                ),
            ]
        ),
    ]

FastUI 的组件

FastUI 已经预先定义了一套丰富的组件集，所有组件都可以在演示应用中找到。这些组件涵盖了从各种常用的用户界面元素，到数据展示和交互等多个方面，足以让开发者方便地构建出完整且美观的 Web 应用程序界面。

FastUI 的原则

FastUI 是 RESTful 原则的一种实现。它倡导前端不需要了解应用程序的细节，只需提供所有构建界面所需的组件，由后端来告诉前端如何处理这些组件。这种构建应用程序的方式带来了许多关键优势，例如只需在一个地方编写代码就能构建新功能、前后端的部署可以完全解耦等。

FastUI 的原则不应局限于 Python 和 React 应用。只要遵循相同的约定模式和编码进行通信，就能在任何实现了此模式的前端和后端中使用。这意味着你可以使用其他 JS 框架、边缘服务器等来实现不同的前端，甚至可以在其他编程语言中实现 FastUI 的组件模型。

总结

总而言之，FastUI 为开发者提供了一种全新且强大的方式来构建 Web 应用的用户界面。它精简了开发流程，分离了前后端，极大地提升了开发效率和灵活性，是一个极其值得关注和尝试的工具与技术。

项目地址：https://github.com/pydantic/FastUI