Clay: Flexbox и React-подобный UI на чистом C? Да, это возможно!

Знакомая ситуация? Вы пишете на C, вам нужна графика, и вот вы стоите перед выбором: либо мучиться с низкоуровневой отрисовкой каждого пикселя, либо тащить в проект монструозные GUI-фреймворки, которые замедляют всё и вся. А что, если я скажу, что есть золотая середина? Проект Clay (сокращение от "C Layout") — это именно такая находка. Это высокопроизводительная библиотека для компоновки 2D UI, которая привносит современные концепции Flexbox и декларативного UI прямо в ваш C-код, да ещё и работает с невероятной скоростью.

Clay — это не просто библиотека, это философия. Она создана для тех, кто ценит производительность, минимализм и полный контроль над своим кодом. Забудьте о тяжеловесных зависимостях и непредсказуемом поведении. С Clay вы получаете чистый, быстрый и предсказуемый UI, идеально подходящий для игровых движков, встроенных систем, высокопроизводительных приложений и всего, где каждый такт процессора на счету.

Пример GUI-приложения, построенного с помощью Clay

Чем Clay выделяется из толпы?

Давайте разберёмся, почему Clay заслуживает вашего внимания. Здесь есть несколько по-настоящему крутых фишек, которые меня зацепили:

1. Производительность на микросекундном уровне и минимализм

В мире C, где производительность — это религия, Clay чувствует себя как дома. Разработчики заявляют о микросекундной производительности компоновки, и это не пустые слова. Как это достигается? Всё просто и гениально:

Один файл clay.h: Вся библиотека умещается в один заголовочный файл размером около 4 тысяч строк кода. Никаких сложных сборок, никаких десятков файлов. Просто include и вперёд!
Ноль зависимостей: Да, вы не ослышались. Clay не зависит ни от чего, даже от стандартной библиотеки C. Это делает её идеальным кандидатом для самых низкоуровневых проектов, где важен каждый байт.
Статическая арена памяти: Никаких malloc и free, никаких непредсказуемых аллокаций. Clay использует статическую арену памяти, что обеспечивает предсказуемое и низкое потребление ресурсов (например, всего ~3.5 МБ для 8192 элементов UI). Это критически важно для игр и embedded-систем.

2. Flexbox-подобная модель компоновки в C

Если вы работали с вебом, то наверняка знакомы с Flexbox. Это мощный инструмент для создания отзывчивых и сложных интерфейсов. Clay берёт эту идею и переносит её в C, предлагая:

Отзывчивые макеты: Элементы могут растягиваться, сжиматься, переноситься, адаптируясь под доступное пространство. Это позволяет легко создавать интерфейсы, которые хорошо смотрятся на экранах любого размера.
Обработка текста и скроллинг: В Clay есть встроенная поддержка переноса текста и скроллируемых контейнеров. Вам не придётся изобретать велосипед для базовых UI-функций.
Масштабирование по соотношению сторон: Удобно для изображений и видео, чтобы они всегда сохраняли свои пропорции.

Пример Flexbox-подобной компоновки в Clay

Padding в Clay

Child Gap в Clay

Выравнивание дочерних элементов в Clay

Sizing в Clay

Sizing Grow в Clay

3. Декларативный синтаксис а-ля React, но на C!

Если вы привыкли к декларативному подходу в React, Flutter или HTML, то Clay покажется вам удивительно знакомым. Вы описываете структуру UI с помощью макросов CLAY(), которые можно вкладывать друг в друга, создавая иерархию элементов. И самое приятное — внутри этих макросов вы пишете обычный C-код!

void SidebarItemComponent() {
    CLAY(id, sidebarItemConfig) {
        // children go here...
    }
}

// ... в main()
CLAY(CLAY_ID("OuterContainer"), { /* ... */ }) {
    CLAY(CLAY_ID("SideBar"), { /* ... */ }) {
        // ...
        for (int i = 0; i < 5; i++) {
            SidebarItemComponent(); // Переиспользуемые компоненты - это просто функции!
        }
        // ...
    }
}

Это позволяет создавать переиспользуемые компоненты (просто функции!), использовать циклы, условия и любую другую логику C для динамического построения UI. Гибкость на высоте!

4. Агностик рендеринга и поддержка WebAssembly

Clay не занимается отрисовкой пикселей. Вместо этого он выдаёт отсортированный список примитивов рендеринга (прямоугольники, текст, изображения, границы), которые вы можете легко интегрировать в любой 3D-движок или графическую библиотеку. Это даёт вам полную свободу в выборе стека для отрисовки.

Кстати, Clay отлично работает с WebAssembly! Вы можете скомпилировать его с помощью Clang в компактный .wasm файл (всего 15 КБ без сжатия) и запускать ваш высокопроизводительный UI прямо в браузере. Представьте: нативный C-код, работающий в браузере с производительностью, о которой многие JS-фреймворки могут только мечтать. Посмотреть на это в действии можно на официальном сайте Clay.

Схема клиппинга в Clay

5. Встроенные отладочные инструменты

Разработчики Clay позаботились и об удобстве отладки. В библиотеку встроен инспектор UI, очень похожий на тот, что мы видим в браузерах. Он внедряет дополнительные команды рендеринга, позволяя вам в реальном времени видеть структуру вашего UI, границы элементов и другие полезные данные. Это значительно упрощает процесс разработки и поиска ошибок.

Clay с включенными отладочными инструментами

Как это работает под капотом?

Clay — это, по сути, движок компоновки, который берёт ваше декларативное описание UI и превращает его в набор команд для отрисовки. Цикл работы выглядит так:

Инициализация: Вы выделяете память (через арену) и инициализируете Clay, указывая размеры экрана и функцию для измерения текста.
Обновление состояния: Каждый кадр вы сообщаете Clay о размерах окна, положении указателя мыши/тача и событиях скроллинга.
Декларация UI: Между Clay_BeginLayout() и Clay_EndLayout() вы описываете свой UI с помощью макросов CLAY(), CLAY_TEXT() и других.
Получение команд рендеринга: Clay_EndLayout() возвращает массив команд отрисовки. Это могут быть прямоугольники, текст, изображения, границы, команды для обрезки (scissoring) или пользовательские элементы.
Отрисовка: Вы берёте эти команды и передаёте их своему рендеру (OpenGL, DirectX, Raylib, кастомный движок — что угодно!).

// Основной цикл рендеринга
while(renderLoop()) {
    Clay_SetLayoutDimensions((Clay_Dimensions) { screenWidth, screenHeight });
    Clay_SetPointerState((Clay_Vector2) { mousePositionX, mousePositionY }, isMouseDown);
    Clay_UpdateScrollContainers(true, (Clay_Vector2) { mouseWheelX, mouseWheelY }, deltaTime);

    Clay_BeginLayout();
    // Здесь ваш декларативный UI с CLAY(), CLAY_TEXT() и т.д.
    CLAY(CLAY_ID("MyUI"), { /* ... */ }) {
        CLAY_TEXT(CLAY_STRING("Hello, Clay!"), CLAY_TEXT_CONFIG({ .fontSize = 24 }));
    }
    Clay_RenderCommandArray renderCommands = Clay_EndLayout();

    // Передаём команды в ваш рендерер
    for (int i = 0; i < renderCommands.length; i++) {
        Clay_RenderCommand *renderCommand = &renderCommands.internalArray[i];
        switch (renderCommand->commandType) {
            case CLAY_RENDER_COMMAND_TYPE_RECTANGLE: { /* DrawRectangle(...) */ break; }
            // ... и так далее для других типов команд
        }
    }
}

Где Clay найдёт своё применение?

Благодаря своей уникальной комбинации производительности, низкоуровневости и гибкости, Clay идеально подходит для нескольких сценариев:

Разработка игр: Игровые UI часто требуют максимальной производительности и предсказуемого потребления памяти. Clay позволяет создавать сложные интерфейсы без накладных расходов, характерных для многих других решений.
Встроенные системы: Там, где ресурсы сильно ограничены, а надёжность критична, Clay с его отсутствием зависимостей и статическим управлением памятью — настоящий спаситель.
Высокопроизводительные десктопные приложения: Если вы пишете приложение, где скорость отклика UI имеет первостепенное значение, Clay поможет вам добиться этого.
Кроссплатформенные решения с WebAssembly: Возможность компиляции в WASM открывает двери для создания быстрых, нативных по ощущениям веб-интерфейсов, используя при этом мощь C.

Стоит ли попробовать Clay?

Если вы работаете с C и вам нужен UI, который не будет тормозить, который легко интегрируется в любую графическую среду и даёт вам полный контроль — однозначно да! Clay — это свежий взгляд на проблему UI в низкоуровневом программировании. Он доказывает, что можно иметь и производительность, и удобный декларативный синтаксис.

Конечно, порог входа может показаться немного выше, чем у готовых фреймворков, но награда в виде скорости и контроля того стоит. Загляните на GitHub-репозиторий, изучите примеры и посмотрите вводное видео. Возможно, Clay — это именно то, что вы искали для своего следующего проекта!

Помните: Clay — это не полноценный GUI-фреймворк с виджетами "из коробки". Это библиотека компоновки, которая даёт вам основу для создания собственных виджетов и рендеринга. Это как конструктор Lego: он даёт вам кирпичики, а что вы из них построите — зависит только от вашей фантазии и потребностей.