FastUI
v0.7.0
Encontre a documentação aqui. Participe da discussão no canal #fastui do Slack aqui
Observação: FastUI ainda é um trabalho ativo em andamento, não espere que esteja completo.
Você pode ver uma demonstração simples de um aplicativo desenvolvido com FastUI aqui.
FastUI é uma nova maneira de construir interfaces de usuário de aplicativos da web definidas por código Python declarativo.
Isso significa:
npm .Em sua essência, FastUI é um conjunto de modelos Pydantic e interfaces TypeScript correspondentes que permitem definir uma interface de usuário. Esta interface é validada em tempo de construção por TypeScript e pyright/mypy e em tempo de execução por Pydantic.
FastUI é composto de 4 coisas:
fastui PyPI – modelos Pydantic para componentes de UI e alguns utilitários. Embora funcione bem com FastAPI, não depende de FastAPI e a maior parte pode ser usada com qualquer estrutura web python.@pydantic/fastui npm — um pacote React TypeScript que permite reutilizar o maquinário e os tipos de FastUI enquanto implementa seus próprios componentes@pydantic/fastui-bootstrap — implementação/customização de todos os componentes FastUI usando Bootstrap@pydantic/fastui-prebuilt (disponível no CDN jsdelivr.com) que fornece uma versão pré-construída do aplicativo FastUI React para que você possa usá-lo sem instalar nenhum pacote npm ou construir nada sozinho. O pacote Python fornece uma página HTML simples para servir este aplicativo.Aqui está um aplicativo FastAPI simples, mas completo, que usa FastUI para mostrar alguns perfis de usuário:
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' ))Que é renderizado assim:
Claro, é um aplicativo muito simples, a demonstração completa é mais completa.
FastUI já define um rico conjunto de componentes.
Todos os componentes estão listados no aplicativo de demonstração.
FastUI é uma implementação do princípio RESTful; mas não como geralmente é entendido, em vez disso, quero dizer o princípio definido na dissertação de doutorado original de Roy Fielding, e excelentemente resumido neste ensaio em htmx.org (Pessoal do HTML, lamento usar seu artigo para promover o React, que eu sei você despreza).
O princípio RESTful descrito no artigo HTMX é que o frontend não precisa (e não deve) saber nada sobre o aplicativo que você está construindo. Em vez disso, ele deve apenas fornecer todos os componentes necessários para construir a interface; o back-end pode então dizer ao front-end o que fazer.
Pense no seu frontend como uma marionete e no backend como a mão dentro dele - a marionete não precisa saber o que dizer, esse é o ponto.
Construir um aplicativo dessa forma tem uma série de vantagens significativas:
Em resumo, FastUI é como o oposto do GraphQL, mas com o mesmo objetivo – GraphQL permite que desenvolvedores front-end estendam um aplicativo sem qualquer novo desenvolvimento de back-end; FastUI permite que desenvolvedores de back-end estendam um aplicativo sem qualquer novo desenvolvimento de front-end.
É claro que esse princípio não deve ser limitado a aplicativos Python e React — desde que usemos o mesmo conjunto de esquemas e codificação acordados para nos comunicarmos, deveremos ser capazes de usar qualquer frontend e backend que implemente o esquema. Intercambiavelmente.
Isso pode significar:
