📱Citry.

Citry - это строго типизированный фронтенд-фреймворк для Python, объединяющий серверные события и Alpine.js для создания реактивных веб-интерфейсов без необходимости вести отдельный frontend-проект на JavaScript.

Архитектура проекта вдохновлена идеями Vue и Laravel Livewire: один Python-компонент инкапсулирует HTML-разметку, стили CSS, логику браузера, серверные обработчики событий и переводы интерфейса.

🔹Главные возможности:

🔘Строгая типизация (Full Typing): Входные параметры компонентов валидируются через аннотации типов Python (Kwargs). Опечатки в свойствах или пропущенные поля отлавливаются на этапе статического анализа, а метод template_data() изолирует контекст, доступный шаблону.

🔘Реактивность без тяжелого JS-стека: Бесшовная связка с Alpine.js и серверными событиями (Server Events) позволяет обновлять части DOM-дерева на лету прямо из Python-кода без сборщиков Webpack/Vite.

🔘HTML-подобная композиция: Компоненты вкладываются друг в друга через наглядные теги <c-ComponentName>, а атрибуты с префиксом c- вычисляют Python-выражения (например, c-messages="user.inbox").

🔘Фреймворк-агностик: Легко монтируется в существующие бэкенды на FastAPI, Django, Flask, Starlette, а также в любые чистые ASGI- и WSGI-приложения.

🔘Развитая экосистема разработки:

✔️Официальное расширение для VS Code с автодополнением, диагностикой и подсветкой синтаксиса шаблонов.

✔️Встроенный CLI-анализатор (citry check --static).

✔️Библиотека готовых доступных UI-компонентов (citry-ui) — диалоги, формы, навигация и таблицы.

💻Пример компонента:

from citry import Component

class Welcome(Component):
    class Kwargs:
        name: str
        messages: list[str]

    def template_data(self, kwargs, slots):
        return {
            "name": kwargs.name,
            "messages": kwargs.messages,
        }

    template = """
      <section class="welcome">
        <h1>С возвращением, {{ name }}!</h1>
        <ul>
          <li c-for="message in messages">{{ message }}</li>
          <li c-empty>Новых сообщений нет.</li>
        </ul>
      </section>
    """

    css = """
      .welcome { border-top: 3px solid #2563eb; }
    """

# Рендеринг компонента в HTML-строку
html = str(Welcome(name="Алексей", messages=["Сборка завершена", "Отчет готов"]))

📦Установка:

pip install citry
# или через uv:
uv add citry

✅Фреймворк поддерживает Python от 3.10 до 3.14 и распространяется под свободной лицензией MIT.

#Citry #Python #Frontend #Fullstack #FastAPI #Django #Flask #AlpineJS #Livewire #WebDev #OpenSource #DevTools

📱Ссылка на репозиторий:
https://github.com/citry-dev/citry