FastUI
v0.7.0
Retrouvez la documentation ici. Rejoignez la discussion sur la chaîne Slack #fastui ici
Remarque : FastUI est toujours un travail en cours, ne vous attendez pas à ce qu'il soit terminé.
Vous pouvez voir une simple démo d'une application créée avec FastUI ici.
FastUI est une nouvelle façon de créer des interfaces utilisateur d'applications Web définies par du code Python déclaratif.
Cela signifie:
npm .En son cœur, FastUI est un ensemble de modèles Pydantic et d'interfaces TypeScript correspondants qui vous permettent de définir une interface utilisateur. Cette interface est validée au moment de la construction par TypeScript et pyright/mypy et au moment de l'exécution par Pydantic.
FastUI est composé de 4 éléments :
fastui PyPI — Modèles Pydantic pour les composants de l'interface utilisateur et certains utilitaires. Bien que cela fonctionne bien avec FastAPI, il ne dépend pas de FastAPI et la plupart d'entre eux pourraient être utilisés avec n'importe quel framework Web Python.@pydantic/fastui npm — un package React TypeScript qui vous permet de réutiliser les machines et les types de FastUI tout en implémentant vos propres composants@pydantic/fastui-bootstrap npm package — implémentation/personnalisation de tous les composants FastUI à l'aide de Bootstrap@pydantic/fastui-prebuilt npm package (disponible sur jsdelivr.com CDN) fournissant une version pré-construite de l'application FastUI React afin que vous puissiez l'utiliser sans installer de packages npm ni créer quoi que ce soit vous-même. Le package Python fournit une simple page HTML pour servir cette application.Voici une application FastAPI simple mais complète qui utilise FastUI pour afficher certains profils d'utilisateurs :
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' ))Ce qui donne ceci :
Bien sûr, c'est une application très simple, la démo complète est plus complète.
FastUI définit déjà un riche ensemble de composants.
Tous les composants sont répertoriés dans l'application de démonstration.
FastUI est une implémentation du principe RESTful ; mais pas comme on l'entend habituellement, je veux plutôt dire le principe défini dans la thèse de doctorat originale de Roy Fielding, et parfaitement résumé dans cet essai sur htmx.org (les gens de HTML, je suis désolé d'utiliser votre article pour promouvoir React que je connais tu méprises).
Le principe RESTful tel que décrit dans l'article HTMX est que le frontend n'a pas besoin (et ne devrait pas) savoir quoi que ce soit sur l'application que vous créez. Au lieu de cela, il doit simplement fournir tous les composants dont vous avez besoin pour construire l'interface, le backend peut alors dire au frontend quoi faire.
Considérez votre frontend comme une marionnette et le backend comme la main qui se trouve à l'intérieur : la marionnette n'a pas besoin de savoir quoi dire, c'est un peu le problème.
Construire une application de cette manière présente un certain nombre d’avantages significatifs :
Dans l'abstrait, FastUI est à l'opposé de GraphQL mais avec le même objectif : GraphQL permet aux développeurs front-end d'étendre une application sans aucun nouveau développement back-end ; FastUI permet aux développeurs backend d'étendre une application sans aucun nouveau développement frontend.
Bien entendu, ce principe ne devrait pas être limité aux applications Python et React : à condition que nous utilisions le même ensemble de schémas et de codages convenus pour communiquer, nous devrions pouvoir utiliser n'importe quel frontend et backend qui implémente le schéma. De manière interchangeable.
Cela pourrait signifier :
