FastUI：快速构建Web应用程序界面

简介

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包或构建任何内容的情况下使用它。同时，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://fastui-demo.onrender.com/
https://github.com/pydantic/FastUI