FastUI
v0.7.0
ค้นหาเอกสารได้ที่นี่ เข้าร่วมการสนทนาในช่อง #fastui slack ที่นี่
โปรดทราบ: FastUI ยังคงอยู่ในระหว่างดำเนินการ อย่าคาดหวังว่าจะเสร็จสมบูรณ์
คุณสามารถดูการสาธิตแอปพลิเคชันที่สร้างด้วย FastUI อย่างง่ายได้ที่นี่
FastUI เป็นวิธีใหม่ในการสร้างอินเทอร์เฟซผู้ใช้แอปพลิเคชันเว็บที่กำหนดโดยโค้ด Python ที่ประกาศ
ซึ่งหมายความว่า:
npmหัวใจหลักของ FastUI คือชุดของโมเดล Pydantic และอินเทอร์เฟซ TypeScript ที่ตรงกันซึ่งช่วยให้คุณสามารถกำหนดอินเทอร์เฟซผู้ใช้ได้ อินเทอร์เฟซนี้ได้รับการตรวจสอบ ณ เวลาสร้างโดย TypeScript และ pyright/mypy และ ณ รันไทม์โดย Pydantic
FastUI ประกอบด้วย 4 สิ่ง:
fastui PyPI - โมเดล Pydantic สำหรับส่วนประกอบ UI และยูทิลิตี้บางอย่าง แม้ว่าจะทำงานได้ดีกับ FastAPI แต่ก็ไม่ได้ขึ้นอยู่กับ FastAPI และส่วนใหญ่สามารถนำไปใช้กับเฟรมเวิร์กเว็บหลามใดก็ได้@pydantic/fastui แพ็คเกจ npm — แพ็คเกจ React TypeScript ที่ให้คุณนำเครื่องจักรและประเภทของ FastUI มาใช้ซ้ำในขณะที่ใช้ส่วนประกอบของคุณเอง@pydantic/fastui-bootstrap แพ็คเกจ npm - การใช้งาน/ปรับแต่งส่วนประกอบ FastUI ทั้งหมดโดยใช้ Bootstrap@pydantic/fastui-prebuilt แพ็คเกจ npm (มีอยู่ใน jsdelivr.com CDN) ซึ่งมีแอป FastUI React เวอร์ชันที่สร้างไว้ล่วงหน้าเพื่อให้คุณสามารถใช้งานได้โดยไม่ต้องติดตั้งแพ็คเกจ npm ใด ๆ หรือสร้างสิ่งใด ๆ ด้วยตัวเอง แพ็คเกจ Python มีหน้า HTML อย่างง่ายเพื่อให้บริการแอปนี้นี่เป็นแอปพลิเคชัน FastAPI ที่เรียบง่ายแต่สมบูรณ์ซึ่งใช้ FastUI เพื่อแสดงโปรไฟล์ผู้ใช้บางส่วน:
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' ))ซึ่งแสดงผลเช่นนี้:
แน่นอนว่ามันเป็นแอปพลิเคชั่นที่เรียบง่าย การสาธิตตัวเต็มจะสมบูรณ์ยิ่งขึ้น
FastUI กำหนดชุดส่วนประกอบที่หลากหลายแล้ว
ส่วนประกอบทั้งหมดแสดงอยู่ในแอปสาธิต
FastUI เป็นการนำหลักการ RESTful ไปใช้ แต่ไม่ใช่อย่างที่เข้าใจกันโดยทั่วไป แต่ฉันหมายถึงหลักการที่กำหนดไว้ในวิทยานิพนธ์ระดับปริญญาเอกต้นฉบับโดย Roy Fielding และสรุปได้อย่างยอดเยี่ยมในบทความนี้บน htmx.org (ชาว HTMX ฉันขอโทษที่ใช้บทความของคุณเพื่อส่งเสริม React ที่ฉันรู้ คุณดูถูก)
หลักการ RESTful ตามที่อธิบายไว้ในบทความ HTMX คือส่วนหน้าไม่จำเป็นต้อง (และไม่ควร) รู้อะไรเกี่ยวกับแอปพลิเคชันที่คุณกำลังสร้าง แต่ควรจัดเตรียมส่วนประกอบทั้งหมดที่คุณต้องการเพื่อสร้างอินเทอร์เฟซ จากนั้นแบ็กเอนด์จะสามารถบอกส่วนหน้าว่าต้องทำอะไร
คิดว่าส่วนหน้าของคุณเป็นเหมือนหุ่นเชิด และส่วนหลังเป็นเหมือนมือที่อยู่ข้างใน หุ่นเชิดไม่จำเป็นต้องรู้ว่าจะพูดอะไร นั่นคือประเด็น
การสร้างแอปพลิเคชันด้วยวิธีนี้มีข้อดีที่สำคัญหลายประการ:
โดยสรุปแล้ว FastUI นั้นเหมือนกับสิ่งที่ตรงกันข้ามกับ GraphQL แต่มีเป้าหมายเดียวกัน — GraphQL ช่วยให้นักพัฒนาส่วนหน้าขยายแอปพลิเคชันโดยไม่ต้องมีการพัฒนาแบ็กเอนด์ใหม่ FastUI ช่วยให้นักพัฒนาแบ็คเอนด์ขยายแอปพลิเคชันได้โดยไม่ต้องมีการพัฒนาส่วนหน้าใหม่
แน่นอนว่าหลักการนี้ไม่ควรจำกัดอยู่เพียงแอปพลิเคชัน Python และ React หากเราใช้ชุดสคีมาและการเข้ารหัสที่ตกลงร่วมกันชุดเดียวกันในการสื่อสาร เราควรจะสามารถใช้ฟรอนต์เอนด์และแบ็กเอนด์ที่ใช้สคีมาได้ สลับกันได้
นี่อาจหมายถึง:
