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 允許後端開發人員擴展應用程序，而無需任何新的前端開發。