FastUI
v0.7.0
Найдите документацию здесь. Присоединяйтесь к обсуждению на Slack-канале #fastui здесь.
Обратите внимание: над FastUI все еще ведется активная работа, не ждите, что она будет завершена.
Здесь вы можете увидеть простую демонстрацию приложения, созданного с помощью FastUI.
FastUI — это новый способ создания пользовательских интерфейсов веб-приложений, определяемых декларативным кодом Python.
Это означает:
npm .По своей сути FastUI представляет собой набор соответствующих моделей Pydantic и интерфейсов TypeScript, которые позволяют вам определять пользовательский интерфейс. Этот интерфейс проверяется во время сборки TypeScript и Pyright/mypy, а во время выполнения — Pydantic.
FastUI состоит из 4 вещей:
fastui PyPI — модели Pydantic для компонентов пользовательского интерфейса и некоторые утилиты. Хотя он хорошо работает с FastAPI, он не зависит от FastAPI, и большую часть его можно использовать с любой веб-инфраструктурой Python.@pydantic/fastui npm — пакет React TypeScript, который позволяет повторно использовать механизм и типы FastUI при реализации собственных компонентов.@pydantic/fastui-bootstrap npm — реализация/настройка всех компонентов FastUI с использованием Bootstrap.@pydantic/fastui-prebuilt npm (доступен на CDN jsdelivr.com), предоставляющий предварительно созданную версию приложения 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; но не так, как его обычно понимают, вместо этого я имею в виду принцип, определенный в оригинальной докторской диссертации Роя Филдинга и превосходно резюмированный в этом эссе на htmx.org (пользователи HTML, мне жаль, что я использовал вашу статью для продвижения React, который я знаю ты презираешь).
Принцип RESTful, описанный в статье о HTMX, заключается в том, что интерфейсу не нужно (и не следует) знать ничего о приложении, которое вы создаете. Вместо этого он должен просто предоставить все компоненты, необходимые для создания интерфейса, а серверная часть может затем сообщить интерфейсной части, что делать.
Думайте о своем интерфейсе как о марионетке, а о бэкэнде как о руке внутри него — марионетке не нужно знать, что сказать, в этом-то и суть.
Создание приложения таким способом имеет ряд существенных преимуществ:
Вкратце, FastUI похож на противоположность GraphQL, но преследует ту же цель: GraphQL позволяет разработчикам внешнего интерфейса расширять приложение без какой-либо новой внутренней разработки; FastUI позволяет разработчикам серверной части расширять приложение без необходимости разработки нового внешнего интерфейса.
Конечно, этот принцип не должен ограничиваться приложениями Python и React — при условии, что мы используем один и тот же набор согласованных схем и кодировок для связи, мы должны иметь возможность использовать любой интерфейс и серверную часть, реализующие эту схему. Взаимозаменяемо.
Это может означать:
