Салют! Не так давно создатели знаменитого pydantic выпустили новый фреймворк — FastUI, который позволяет создавать пользовательские интерфейсы с помощью декларативного кода на Python. В этой статье рассмотрим создание простого приложения и деплой его в Cloud Apps.
❯ Обзор
По заявлению авторов фреймворка, фронтенду не нужно (и не следует) знать ничего о приложении, которое вы создаете, вместо этого он должен просто предоставить все компоненты, необходимые для создания интерфейса, а затем бэкенд может предоставить необходимые данные и параметры компонентов.
Реализовано это таким образом, что FastUI инкапсулирует описание компонентов интерфейса и в виде классов, затем запускается простое React приложение, которое обращается к эндпоинтам за данными и компонентами.
❯ Пример
Для примера давайте напишем простое приложение, предоставляющее информацию о городах из списка с возможностью пагинации.
Данные для экспериментов любезно предоставили создатели фреймворка. Для начала опишем pydantic модель и функцию для чтения данных.
from pydantic import BaseModel, Field, TypeAdapter
import json
from pathlib import Path
class City(BaseModel):
id: int
city: str = Field(title="Name")
city_ascii: str = Field(title="City Ascii")
lat: float = Field(title="Latitude")
lng: float = Field(title="Longitude")
country: str = Field(title="Country")
iso2: str = Field(title="ISO2")
iso3: str = Field(title="ISO3")
admin_name: str = Field(title="Admin Name")
capital: str = Field(title="Capital")
population: float = Field(title="Population")
def cities_list() -> list[City]:
cities_file = Path(__file__).parent / "cities.json"
with open(cities_file, "r", encoding="utf-8") as f:
data = json.load(f)
cities = [City(**city) for city in data]
return cities
Далее напишем каркас для нашего примера, с помощью FastAPI. Опишем два роута, первый возвращает необходимые компоненты и данные, а второй — простое React приложение, которое отвечает за запрос и отображение компонентов, полученных из предыдущего.
from fastapi import FastAPI
from fastapi.responses import HTMLResponse
from fastui import AnyComponent, FastUI
from fastui import components as c, prebuilt_html
from fastui.components.display import DisplayLookup, DisplayMode
from fastui.events import BackEvent, GoToEvent
app = FastAPI()
@app.get("/api/cities", response_model=FastUI, response_model_exclude_none=True)
def cities_view(page: int = 1, country=None):
cities = cities_list()
page_size = 10 # Количество записей в таблице, отображаемых на странице
filter_form_initial = {}
return c.Page( # Page - базовый контейнер для остальных компонентов
components=[
c.Table( # Table - базовая разметка таблицы
data=cities[(page - 1) * page_size : page * page_size], #Создаём срез данных для заполнения таблицы
data_model=City, #Передаём модель данных
columns=[ # Описываем столбцы таблицы
DisplayLookup( #Указываем содержимое и размер столбца в процентах
field="city",
table_width_percent=33
),
DisplayLookup(field="country", table_width_percent=33),
DisplayLookup(field="population", table_width_percent=33),
],
),
c.Pagination(page=page, page_size=page_size, total=len(cities)), #Кнопки для пагинации
]
)
@app.get("/{path:path}")
async def html_landing() -> HTMLResponse:
"""Простое React приложение, идёт последним, т.к. соответствует всем маршрутам"""
return HTMLResponse(prebuilt_html(title="Большие города"))
Результат работы представлен на рисунке ниже:
❯ Деплой
Для деплоя приложений на FastUI можно воспользоваться сервисом Apps, к сожалению рассмотренный фреймворк только набирает популярность, поэтому мы воспользуемся опцией: «деплой из Dockerfile». Для этого достаточно создать Dockerfile и разместить его в корне репозитория.
FROM python:3.11
COPY . /app
WORKDIR /app
RUN pip install -r requirements.txt
CMD ["uvicorn", "app.main:app", "--host", "0.0.0.0", "--port", "8000"]
EXPOSE 8000
Обратите внимание, что при отсутствии в Dockerfile параметра EXPOSE, APPS будет слушать порт 8080 контейнера.
Далее достаточно предоставить сервису доступ к аккаунту на github.
Затем остаётся следить за логами деплоя:
В случае успешного развёртывания появиться удобный дашборд с графиками нагрузки на виртуальную машину:
❯ Заключение
В данной статье мы рассмотрели лишь малую часть возможностей фреймворка, однако можно отметить, что FastUI предоставляет новый подход к созданию веб-приложений и позволяет существенно ускорить разработку.
