FastUI
v0.7.0
여기에서 문서를 찾으세요. 여기 #fastui Slack 채널에서 토론에 참여하세요.
참고: FastUI는 아직 진행 중인 작업이므로 완료될 것으로 기대하지 마세요.
여기에서 FastUI로 구축된 애플리케이션의 간단한 데모를 볼 수 있습니다.
FastUI는 선언적 Python 코드로 정의된 웹 애플리케이션 사용자 인터페이스를 구축하는 새로운 방법입니다.
이는 다음을 의미합니다.
npm 건드리지 않고도 React를 사용하여 반응형 웹 애플리케이션을 구축할 수 있습니다.FastUI의 핵심은 사용자 인터페이스를 정의할 수 있는 일치하는 Pydantic 모델 및 TypeScript 인터페이스 세트입니다. 이 인터페이스는 빌드 시 TypeScript 및 pyright/mypy에 의해, 런타임 시 Pydantic에 의해 검증됩니다.
FastUI는 4가지로 구성됩니다.
fastui PyPI 패키지 — UI 구성 요소 및 일부 유틸리티를 위한 Pydantic 모델입니다. FastAPI와 잘 작동하지만 FastAPI에 의존하지 않으며 대부분은 모든 Python 웹 프레임워크에서 사용할 수 있습니다.@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 원칙을 구현한 것입니다. 하지만 일반적으로 이해되는 것과는 달리 Roy Fielding의 박사학위 논문 원본에 정의되어 있고 htmx.org의 이 에세이에 훌륭하게 요약되어 있는 원칙을 의미합니다. 당신은 경멸합니다).
HTMX 기사에 설명된 RESTful 원칙은 프런트엔드가 빌드 중인 애플리케이션에 대해 아무것도 알 필요가 없고 알 필요도 없다는 것입니다. 대신 인터페이스를 구성하는 데 필요한 모든 구성 요소를 제공해야 하며, 그러면 백엔드는 프런트엔드에 무엇을 해야 할지 알려줄 수 있습니다.
프런트엔드를 꼭두각시로 생각하고 백엔드를 그 안에 있는 손으로 생각하세요. 꼭두각시는 무슨 말을 해야 할지 알 필요가 없습니다. 그게 요점입니다.
이러한 방식으로 애플리케이션을 구축하면 다음과 같은 여러 가지 중요한 이점이 있습니다.
추상적으로 FastUI는 GraphQL과 반대이지만 동일한 목표를 가지고 있습니다. GraphQL을 사용하면 프런트엔드 개발자가 새로운 백엔드 개발 없이 애플리케이션을 확장할 수 있습니다. FastUI를 사용하면 백엔드 개발자가 새로운 프런트엔드 개발 없이 애플리케이션을 확장할 수 있습니다.
물론 이 원칙은 Python 및 React 애플리케이션에만 국한되어서는 안 됩니다. 동일한 합의된 스키마 및 인코딩 세트를 사용하여 통신한다면 해당 스키마를 구현하는 모든 프런트엔드와 백엔드를 사용할 수 있어야 합니다. 상호 교환적으로.
이는 다음을 의미할 수 있습니다.
