FastUI
v0.7.0
Die Dokumentation finden Sie hier. Beteiligen Sie sich hier an der Diskussion im Slack-Kanal #fastui
Bitte beachten Sie: FastUI befindet sich noch in der aktiven Entwicklungsphase. Erwarten Sie nicht, dass es abgeschlossen ist.
Eine einfache Demo einer mit FastUI erstellten Anwendung können Sie hier sehen.
FastUI ist eine neue Möglichkeit, Benutzeroberflächen für Webanwendungen zu erstellen, die durch deklarativen Python-Code definiert sind.
Das heisst:
npm zu berühren.Im Kern besteht FastUI aus einer Reihe passender Pydantic-Modelle und TypeScript-Schnittstellen, mit denen Sie eine Benutzeroberfläche definieren können. Diese Schnittstelle wird zur Build-Zeit von TypeScript und pyright/mypy und zur Laufzeit von Pydantic validiert.
FastUI besteht aus 4 Dingen:
fastui PyPI-Paket – Pydantic-Modelle für UI-Komponenten und einige Dienstprogramme. Obwohl es gut mit FastAPI funktioniert, ist es nicht von FastAPI abhängig und das meiste davon kann mit jedem Python-Web-Framework verwendet werden.@pydantic/fastui npm-Paket – ein React TypeScript-Paket, mit dem Sie die Maschinen und Typen von FastUI wiederverwenden und gleichzeitig Ihre eigenen Komponenten implementieren können@pydantic/fastui-bootstrap npm-Paket – Implementierung/Anpassung aller FastUI-Komponenten mit Bootstrap@pydantic/fastui-prebuilt npm package (verfügbar auf jsdelivr.com CDN) bietet eine vorgefertigte Version der FastUI React-App, sodass Sie sie verwenden können, ohne npm-Pakete zu installieren oder selbst etwas zu erstellen. Das Python-Paket stellt eine einfache HTML-Seite zur Bereitstellung dieser App bereit.Hier ist eine einfache, aber vollständige FastAPI-Anwendung, die FastUI verwendet, um einige Benutzerprofile anzuzeigen:
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' ))Was wie folgt gerendert wird:
Natürlich ist das eine sehr einfache Anwendung, die vollständige Demo ist umfassender.
FastUI definiert bereits einen umfangreichen Satz an Komponenten.
Alle Komponenten sind in der Demo-App aufgeführt.
FastUI ist eine Implementierung des RESTful-Prinzips; aber nicht so, wie es normalerweise verstanden wird, sondern ich meine das Prinzip, das in der ursprünglichen Doktorarbeit von Roy Fielding definiert und in diesem Aufsatz auf htmx.org hervorragend zusammengefasst ist (HTMX-Leute, es tut mir leid, Ihren Artikel zu verwenden, um React zu bewerben, das ich kenne du verachtest ).
Das im HTMX-Artikel beschriebene RESTful-Prinzip besteht darin, dass das Frontend nichts über die Anwendung wissen muss (und sollte), die Sie erstellen. Stattdessen sollte es lediglich alle Komponenten bereitstellen, die Sie zum Aufbau der Schnittstelle benötigen. Das Backend kann dann dem Frontend mitteilen, was zu tun ist.
Stellen Sie sich Ihr Frontend als eine Marionette und das Backend als die Hand darin vor – die Puppe muss nicht wissen, was sie sagen soll, das ist ja der Punkt.
Der Aufbau einer Anwendung auf diese Weise hat eine Reihe bedeutender Vorteile:
Kurz gesagt ist FastUI wie das Gegenteil von GraphQL, hat jedoch das gleiche Ziel: Mit GraphQL können Frontend-Entwickler eine Anwendung erweitern, ohne dass ein neues Backend entwickelt werden muss. Mit FastUI können Backend-Entwickler eine Anwendung erweitern, ohne dass eine neue Frontend-Entwicklung erforderlich ist.
Natürlich sollte dieses Prinzip nicht auf Python- und React-Anwendungen beschränkt sein – vorausgesetzt, wir verwenden die gleichen vereinbarten Schemata und Codierungen für die Kommunikation, sollten wir in der Lage sein, jedes Frontend und Backend zu verwenden, das das Schema implementiert. Austauschbar.
Das könnte bedeuten:
