FastUI是一种通过声明性Python代码构建网页应用用户界面（UI）的全新方式。对于Python开发者而言，它打破了传统的界限，让我们能够轻松创建响应式的Web应用，而无需编写一行JavaScript或接触npm。
Python开发者的福音
FastUI让Python开发者可以使用React构建现代网页应用，只需编写Python代码，无需关心底层实现细节。这意味着你可以专注于核心逻辑和功能，而不被繁琐的JavaScript语法和npm工具打扰。
前端开发者的利器
对于前端开发者，FastUI使你能够专注于构建真正可重用的组件。再也不需要在每个视图中重复造轮子，FastUI提供了模块化的方法，让你可以轻松地管理和复用组件，减少代码冗余。
关注点的真正分离
在FastUI的设计中，后端开发者负责整个应用的定义，而前端开发者则可以自由实现用户界面。这种分离让开发者能更好地协作，并提高开发效率，避免了传统开发方式中常见的沟通误区。
FastUI的核心结构
FastUI的核心是匹配的Pydantic模型和TypeScript接口，它们允许你定义用户界面。该接口由TypeScript在构建时以及Pydantic在运行时进行验证，确保了数据的一致性和安全性。
四大组成部分
1. fastui PyPI包：提供UI组件的Pydantic模型及一些实用工具。虽然与FastAPI协同工作得很好，但它不依赖于FastAPI，可以与任何Python Web框架一起使用。
2. @pydantic/fastui npm包：这是一个React TypeScript包，允许你重用FastUI的机制和类型，同时实现自己的组件。
3. @pydantic/fastui-bootstrap npm包：利用Bootstrap对所有FastUI组件进行实现和自定义的包。
4. @pydantic/fastui-prebuilt npm包：提供了预构建的FastUI React应用的版本，用户无需安装任何npm包或自行构建即可使用。
FastAPI示例应用
以下是一个使用FastUI显示用户简介的简单FastAPI应用示例：
from datetime import date
from fastapi importFastAPI,HTTPException
from fastapi.responses importHTMLResponse
from fastui importFastUI,AnyComponent, prebuilt_html, components as c
from fastui.components.display importDisplayMode,DisplayLookup
from fastui.events importGoToEvent,BackEvent
from pydantic importBaseModel,Field
app =FastAPI()
class User(BaseModel):
id:int
name:str
dob: date =Field(title='Date of Birth')
# 定义一些用户
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]:
"""返回四个用户的表格数据"""
return[
c.Page(
components=[
c.Heading(text='Users', level=2),
c.Table(
data=users,
columns=[
DisplayLookup(field='name', on_click=GoToEvent(url='/user/{id}/')),
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]:
"""返回特定用户的个人资料页面"""
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}')
asyncdef html_landing()->HTMLResponse:
"""返回简单HTML页面以服务于React应用"""
return HTMLResponse(prebuilt_html(title='FastUI Demo'))该示例展示了如何利用FastUI构建用户界面，呈现用户信息并实现页面之间的互动。
总结
FastUI作为一种新兴的Web开发工具，以其独特的声明式编程方式让Python开发者和前端开发者能够高效合作。通过将后端与前端的关注点分离，FastUI不仅简化了开发流程，还提升了代码的可维护性。无论是构建复杂的Web应用还是实现简单的用户界面，FastUI都提供了理想的解决方案。
项目地址：https://github.com/pydantic/FastUI
