FastUI下载 - FastUI源码下载

FastUI

Python

v0.7.0

下载

快速用户界面

在此处查找文档。在这里加入 #fastui slack 频道的讨论

请注意： FastUI 仍在进行中，不要指望它会完成。

原理（简短版）

您可以在此处查看使用 FastUI 构建的应用程序的简单演示。

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

这意味着：

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

从本质上讲，FastUI 是一组匹配的 Pydantic 模型和 TypeScript 接口，允许您定义用户界面。该接口在构建时由 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 visits `/` 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 (
                    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' ))

其呈现如下：

当然，这是一个非常简单的应用程序，完整的演示更加完整。

成分

FastUI 已经定义了一组丰富的组件。

演示应用程序中列出了所有组件。

原理（长版）

FastUI是RESTful原则的实现；但不是通常理解的那样，而是我指的是 Roy Fielding 的原始博士论文中定义的原理，并在 htmx.org 上的这篇文章中进行了出色的总结（HTMX 人，我很抱歉用你的文章来推广 React，我知道你鄙视）。

HTMX 文章中描述的 RESTful 原则是前端不需要（也不应该）了解有关您正在构建的应用程序的任何信息。相反，它应该只提供构建界面所需的所有组件，然后后端可以告诉前端要做什么。

将您的前端视为一个木偶，将后端视为其中的手 - 木偶不需要知道该说什么，这就是重点。

以这种方式构建应用程序具有许多显着的优点：

您只需在一处编写代码即可构建新功能 - 添加新视图、更改现有视图的行为或更改 URL 结构
部署前端和后端可以完全解耦，只要前端知道如何渲染后端将要求它使用的所有组件，就可以了
您应该能够重用一组丰富的开源组件，它们最终应该比您自己构建的任何组件都经过更好的测试并且更可靠，这是可能的，因为这些组件不需要有关如何使用它们的上下文（注意：由于 FastUI 是全新的，这还不是真的，希望我们能实现这一点）
我们可以使用 Pydantic、TypeScript 和 JSON Schema 来保证双方使用商定的模式进行通信

抽象而言，FastUI 类似于 GraphQL，但具有相同的目标——GraphQL 让前端开发人员扩展应用程序，而无需任何新的后端开发； FastUI 允许后端开发人员扩展应用程序，而无需任何新的前端开发。