FastUI
v0.7.0
Temukan dokumentasinya di sini. Bergabunglah dalam diskusi di saluran #fastui slack di sini
Harap dicatat: FastUI masih dalam proses aktif, jangan berharap sudah selesai.
Anda dapat melihat demo sederhana aplikasi yang dibangun dengan FastUI di sini.
FastUI adalah cara baru untuk membangun antarmuka pengguna aplikasi web yang ditentukan oleh kode Python deklaratif.
Artinya:
npm .Pada intinya, FastUI adalah sekumpulan model Pydantic dan antarmuka TypeScript yang cocok yang memungkinkan Anda menentukan antarmuka pengguna. Antarmuka ini divalidasi pada waktu pembuatan oleh TypeScript dan pyright/mypy dan pada waktu proses oleh Pydantic.
FastUI terdiri dari 4 hal:
fastui PyPI - Model Pydantic untuk komponen UI, dan beberapa utilitas. Meskipun berfungsi baik dengan FastAPI, ia tidak bergantung pada FastAPI, dan sebagian besar dapat digunakan dengan kerangka web python apa pun.@pydantic/fastui npm package — paket React TypeScript yang memungkinkan Anda menggunakan kembali mesin dan tipe FastUI sambil mengimplementasikan komponen Anda sendiri@pydantic/fastui-bootstrap npm — implementasi/kustomisasi semua komponen FastUI menggunakan Bootstrap@pydantic/fastui-prebuilt (tersedia di CDN jsdelivr.com) menyediakan versi aplikasi FastUI React yang telah dibuat sebelumnya sehingga Anda dapat menggunakannya tanpa menginstal paket npm apa pun atau membuat apa pun sendiri. Paket Python menyediakan halaman HTML sederhana untuk melayani aplikasi ini.Berikut aplikasi FastAPI sederhana namun lengkap yang menggunakan FastUI untuk menampilkan beberapa profil pengguna:
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' ))Yang rendernya seperti ini:
Tentunya itu aplikasi yang sangat sederhana, demo lengkapnya lebih lengkap.
FastUI sudah mendefinisikan serangkaian komponen yang kaya.
Semua komponen tercantum di aplikasi demo.
FastUI merupakan implementasi dari prinsip RESTful; tetapi tidak seperti yang biasanya dipahami, yang saya maksud adalah prinsip yang didefinisikan dalam disertasi PhD asli oleh Roy Fielding, dan dirangkum dengan sangat baik dalam esai ini di htmx.org (Orang-orang HTML, saya minta maaf menggunakan artikel Anda untuk mempromosikan React yang saya tahu kamu benci).
Prinsip RESTful seperti yang dijelaskan dalam artikel HTMX adalah frontend tidak perlu (dan tidak seharusnya) mengetahui apa pun tentang aplikasi yang Anda buat. Sebaliknya, ia seharusnya hanya menyediakan semua komponen yang Anda perlukan untuk membangun antarmuka, backend kemudian dapat memberi tahu frontend apa yang harus dilakukan.
Bayangkan frontend Anda sebagai boneka, dan backend sebagai tangan di dalamnya — boneka tidak perlu tahu harus berkata apa, itulah intinya.
Membangun aplikasi dengan cara ini memiliki sejumlah keuntungan signifikan:
Secara abstrak, FastUI seperti kebalikan dari GraphQL tetapi dengan tujuan yang sama — GraphQL memungkinkan pengembang frontend memperluas aplikasi tanpa pengembangan backend baru; FastUI memungkinkan pengembang backend memperluas aplikasi tanpa pengembangan frontend baru.
Tentu saja, prinsip ini tidak boleh terbatas pada aplikasi Python dan React — asalkan kita menggunakan rangkaian skema dan pengkodean yang sama untuk berkomunikasi, kita harus dapat menggunakan frontend dan backend apa pun yang mengimplementasikan skema tersebut. Secara bergantian.
Ini bisa berarti:
