FastUI

FastUI

ここでドキュメントを見つけてください。ここの #fastuilack チャンネルでディスカッションに参加してください

注意してください: FastUI はまだ進行中の作業であり、完成することを期待しないでください。

原則（短縮版）

ここで、FastUI で構築されたアプリケーションの簡単なデモをご覧いただけます。

FastUI は、宣言型 Python コードで定義された Web アプリケーション ユーザー インターフェイスを構築する新しい方法です。

これはつまり：

• あなたが Python 開発者であれば、JavaScript を 1 行も記述したり、 npmに触れたりすることなく、React を使用してレスポンシブ Web アプリケーションを構築できます。
• フロントエンド開発者であれば、ビューごとにコンポーネントをコピー＆ペーストする必要がなく、真に再利用可能な魔法のコンポーネントの構築に集中できます。
• すべての人にとって、真の関心事の分離では、バックエンドがアプリケーション全体を定義します。一方、フロントエンドはユーザー インターフェイスのみを自由に実装できます。

FastUI の核心は、ユーザー インターフェイスを定義できるようにする、一致する Pydantic モデルと TypeScript インターフェイスのセットです。このインターフェイスは、ビルド時に TypeScript と pyright/mypy によって検証され、実行時に Pydantic によって検証されます。

実践 — 使用法

FastUI は 4 つの要素で構成されています。

• fastui PyPI パッケージ — UI コンポーネントおよびいくつかのユーティリティ用の Pydantic モデル。これは FastAPI でうまく動作しますが、FastAPI には依存しておらず、そのほとんどは任意の Python Web フレームワークで使用できます。
• @pydantic/fastui npm パッケージ — 独自のコンポーネントを実装しながら、FastUI の仕組みと型を再利用できる React TypeScript パッケージ
• @pydantic/fastui-bootstrap npm パッケージ — Bootstrap を使用したすべての FastUI コンポーネントの実装/カスタマイズ
• @pydantic/fastui-prebuilt npm パッケージ (jsdelivr.com CDN で入手可能) は、FastUI React アプリのビルド済みバージョンを提供するため、npm パッケージをインストールしたり、自分で何かを構築したりせずに使用できます。 Python パッケージは、このアプリを提供するための単純な HTML ページを提供します。

以下は、FastUI を使用していくつかのユーザー プロファイルを表示する、シンプルだが完全な FastAPI アプリケーションです。

 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 原則の実装です。しかし、通常理解されているのではなく、ロイ フィールディングによる元の博士論文で定義され、htmx.org のこのエッセイで見事に要約された原則を意味します (HTMX の皆さん、私が知っている React を宣伝するためにあなたの記事を使用して申し訳ありません)あなたは軽蔑します）。

HTMX の記事で説明されている RESTful 原則は、フロントエンドは構築しているアプリケーションについて何も知る必要がありません (また知るべきではありません) です。代わりに、インターフェイスの構築に必要なすべてのコンポーネントを提供するだけでよく、バックエンドはフロントエンドに何をすべきかを指示できます。

フロントエンドを操り人形、バックエンドを操り人形の中の手と考えてください。操り人形は何を言うべきかを知る必要はありません。それが重要です。

この方法でアプリケーションを構築すると、次のような大きな利点がいくつかあります。

• 新しい機能を構築するには、1 か所にコードを記述するだけで済みます。つまり、新しいビューの追加、既存のビューの動作の変更、または URL 構造の変更が可能です。
• バックエンドが使用を要求するすべてのコンポーネントをフロントエンドがレンダリングする方法を知っていれば、フロントエンドとバックエンドのデプロイは完全に分離できます。
• オープンソース コンポーネントの豊富なセットを再利用できる必要があります。それらは最終的に、自分で構築できるものよりもよくテストされ、信頼性が高くなります。これが可能になるのは、コンポーネントがどのように使用されるかについてのコンテキストが必要ないためです (注) : FastUI は新しいものなので、これはまだ真実ではありません。うまくいけば、そこに到達できます)
• Pydantic、TypeScript、JSON スキーマを使用して、双方が合意されたスキーマで通信していることを保証できます。

要約すると、FastUI は GraphQL の反対のようなものですが、同じ目標を持っています。つまり、GraphQL を使用すると、フロントエンド開発者は新しいバックエンド開発を行わずにアプリケーションを拡張できます。 FastUI を使用すると、バックエンド開発者は新しいフロントエンドを開発することなくアプリケーションを拡張できます。

Python と React を超えて

もちろん、この原則は Python と React アプリケーションに限定されるべきではありません。合意されたスキーマとエンコーディングの同じセットを使用して通信する限り、そのスキーマを実装するフロントエンドとバックエンドを使用できるはずです。交換可能。

これは次のことを意味します:

• Vue のような別の JS フレームワークを使用して Web フロントエンドを実装する — 多くの作業が必要ですが、価値は限られています。
• エッジ サーバーを使用して Web フロントエンドを実装すると、ブラウザーは HTML だけを認識できるようになります。多くの作業が必要ですが、非常に価値があります。
• モバイルや IoT などの他のプラットフォーム用のフロントエンドの実装 — 多くの作業が必要ですが、それが実際に良いアイデアかどうかわかりません。
• Rust や Go などの別の言語でコンポーネント モデルを実装します。バックエンドには実際にはそれほど多くのコードがないため、これは比較的小規模で機械的なタスクになります。