FastUI
v0.7.0
ابحث عن الوثائق هنا. انضم إلى المناقشة في قناة #fastui Slack هنا
يرجى ملاحظة: FastUI لا يزال قيد التنفيذ، فلا تتوقع أن يكتمل.
يمكنك مشاهدة عرض توضيحي بسيط لتطبيق تم إنشاؤه باستخدام FastUI هنا.
FastUI هي طريقة جديدة لبناء واجهات مستخدم تطبيقات الويب المحددة بواسطة كود Python التعريفي.
هذا يعنى:
npm .FastUI في جوهره عبارة عن مجموعة من نماذج Pydantic المطابقة وواجهات TypeScript التي تسمح لك بتحديد واجهة المستخدم. يتم التحقق من صحة هذه الواجهة في وقت الإنشاء بواسطة TypeScript وpyright/mypy وفي وقت التشغيل بواسطة Pydantic.
تتكون واجهة FastUI من 4 أشياء:
fastui PyPI — نماذج Pydantic لمكونات واجهة المستخدم وبعض الأدوات المساعدة. على الرغم من أنه يعمل بشكل جيد مع 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؛ ولكن ليس كما هو مفهوم عادةً، أعني بدلاً من ذلك المبدأ المحدد في أطروحة الدكتوراه الأصلية التي كتبها روي فيلدينغ، وتم تلخيصه بشكل ممتاز في هذا المقال على htmx.org (أيها الأشخاص في HTML، يؤسفني استخدام مقالتكم للترويج لـ React الذي أعرفه فإنك تكره).
مبدأ RESTful كما هو موضح في مقالة HTMX هو أن الواجهة الأمامية لا تحتاج (ولا ينبغي لها) أن تعرف أي شيء عن التطبيق الذي تقوم بإنشائه. بدلاً من ذلك، يجب أن توفر فقط جميع المكونات التي تحتاجها لإنشاء الواجهة، ويمكن للواجهة الخلفية بعد ذلك أن تخبر الواجهة الأمامية بما يجب القيام به.
فكر في الواجهة الأمامية الخاصة بك كدمية، والواجهة الخلفية كاليد بداخلها - لا تحتاج الدمية إلى معرفة ما ستقوله، وهذا هو الهدف.
إن إنشاء تطبيق بهذه الطريقة له عدد من المزايا الهامة:
باختصار، FastUI يشبه عكس GraphQL ولكن بنفس الهدف - يتيح GraphQL لمطوري الواجهة الأمامية توسيع التطبيق دون أي تطوير جديد للواجهة الخلفية؛ يتيح FastUI لمطوري الواجهة الخلفية توسيع التطبيق دون أي تطوير جديد للواجهة الأمامية.
بالطبع، لا ينبغي أن يقتصر هذا المبدأ على تطبيقات Python وReact - بشرط أن نستخدم نفس مجموعة المخططات والتشفير المتفق عليها للتواصل، يجب أن نكون قادرين على استخدام أي واجهة أمامية وواجهة خلفية تنفذ المخطط. بالتبادل.
هذا يمكن أن يعني:
