FastUI
v0.7.0
Encuentre la documentación aquí. Únase a la discusión en el canal slack #fastui aquí
Tenga en cuenta: FastUI todavía es un trabajo activo en progreso, no espere que esté completo.
Puede ver una demostración sencilla de una aplicación creada con FastUI aquí.
FastUI es una nueva forma de crear interfaces de usuario de aplicaciones web definidas por código declarativo Python.
Esto significa:
npm .En esencia, FastUI es un conjunto de modelos Pydantic e interfaces TypeScript coincidentes que le permiten definir una interfaz de usuario. Esta interfaz es validada en tiempo de compilación por TypeScript y pyright/mypy y en tiempo de ejecución por Pydantic.
FastUI se compone de 4 cosas:
fastui PyPI: modelos Pydantic para componentes de interfaz de usuario y algunas utilidades. Si bien funciona bien con FastAPI, no depende de FastAPI y la mayor parte podría usarse con cualquier marco web de Python.@pydantic/fastui npm: un paquete React TypeScript que le permite reutilizar la maquinaria y los tipos de FastUI mientras implementa sus propios componentes.@pydantic/fastui-bootstrap : implementación/personalización de todos los componentes FastUI usando Bootstrap@pydantic/fastui-prebuilt (disponible en la CDN de jsdelivr.com) que proporciona una versión prediseñada de la aplicación FastUI React para que pueda usarla sin instalar ningún paquete npm ni crear nada usted mismo. El paquete Python proporciona una página HTML simple para servir esta aplicación.Aquí hay una aplicación FastAPI simple pero completa que usa FastUI para mostrar algunos perfiles de usuario:
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 se representa así:
Por supuesto, es una aplicación muy sencilla, la demostración completa es más completa.
FastUI ya define un rico conjunto de componentes.
Todos los componentes se enumeran en la aplicación de demostración.
FastUI es una implementación del principio RESTful; pero no como se suele entender, sino que me refiero al principio definido en la tesis doctoral original de Roy Fielding, y excelentemente resumido en este ensayo en htmx.org (gente de HTMX, lamento usar su artículo para promover React, que sé desprecias).
El principio RESTful como se describe en el artículo HTMX es que la interfaz no necesita (y no debería) saber nada sobre la aplicación que estás creando. En cambio, debería proporcionar todos los componentes que necesita para construir la interfaz, y el backend puede decirle al frontend qué hacer.
Piense en su interfaz como una marioneta y en la parte trasera como la mano dentro de ella; la marioneta no necesita saber qué decir, ese es el punto.
Crear una aplicación de esta manera tiene una serie de ventajas importantes:
En abstracto, FastUI es como lo opuesto a GraphQL pero con el mismo objetivo: GraphQL permite a los desarrolladores frontend ampliar una aplicación sin ningún nuevo desarrollo backend; FastUI permite a los desarrolladores backend ampliar una aplicación sin ningún desarrollo frontend nuevo.
Por supuesto, este principio no debería limitarse a las aplicaciones Python y React: siempre que utilicemos el mismo conjunto de esquemas y codificación acordados para comunicarnos, deberíamos poder utilizar cualquier frontend y backend que implemente el esquema. Indistintamente.
Esto podría significar:
