openpencil/packages/docs/ru/overview/comparison.md

OpenPencil и Penpot: архитектура и производительность

OpenPencil и Penpot — открытые инструменты дизайна с разными задачами и архитектурой.

::: info WASM-рендерер Penpot Penpot 2.x включает Rust/Skia WASM-рендерер render-wasm/v1, который включается параметрами сервера или ?wasm=true. По умолчанию по-прежнему используется SVG-рендерер. Ниже рассматриваются оба варианта. :::

1. Размер кодовой базы

Показатель	OpenPencil	Penpot
Строк кода	около 26 000	около 299 000
Исходных файлов	около 143	около 2 900
Языки	TypeScript, Vue	Clojure, ClojureScript, Rust, JavaScript, SQL, SCSS
Код отрисовки	около 3 200 строк, TypeScript	22 000 строк, Rust/Skia WASM
Интерфейс	около 4 500 строк	около 175 000 строк, CLJS и SCSS
Серверная часть	Нет, локальная архитектура	32 600 строк и 151 файл SQL
Соотношение	1×	около 11×

OpenPencil примерно в 11 раз меньше. Это следствие другой архитектуры, а не только меньшего набора возможностей.

2. Архитектура

OpenPencil: один клиентский процесс

┌─────────────────────────────────┐
│         Tauri native shell      │
│  ┌───────────────────────────┐  │
│  │  Vue 3 + TypeScript       │  │
│  │  Editor + Kiwi codec      │  │
│  │  SceneGraph in TypeScript │  │
│  │  CanvasKit + Yoga WASM    │  │
│  └───────────────────────────┘  │
└─────────────────────────────────┘

Редактор, SceneGraph, кодек файлов и отрисовка работают в одном процессе. Отдельные сервер, база данных и Docker не нужны. SceneGraph хранится как Map<string, SceneNode>. TypeScript напрямую вызывает CanvasKit, а Yoga WASM синхронно рассчитывает компоновку.

Penpot: клиент-серверная платформа

┌───────────────────────────────────────────────────────┐
│                    Docker Compose                     │
│  ClojureScript frontend │ Clojure/JVM backend        │
│  Rust/Skia WASM         │ PostgreSQL, Valkey, MinIO  │
│  Chromium exporter      │ MCP server                 │
└───────────────────────────────────────────────────────┘

Для полной установки Penpot нужны интерфейс, серверная часть JVM, PostgreSQL, Valkey, MinIO и экспортёр на основе Chromium без интерфейса. Среда разработки требует Docker Compose, JVM, Node и инструменты Rust.

OpenPencil избегает сетевой задержки, сериализации между службами, управления контейнерами и запросов к базе данных для обычных операций. Penpot рассчитан на многопользовательскую платформу с серверным размещением, а OpenPencil — на локальную работу с минимальной задержкой.

3. Конвейер отрисовки

OpenPencil: TypeScript → CanvasKit WASM

renderSceneToCanvas(canvas, graph, pageId) {
  this.fillPaint.setColor(...)
  canvas.drawRRect(rrect, this.fillPaint)
}

• Один прямой переход из TypeScript в WASM.
• SceneGraph остаётся в памяти JavaScript и не сериализуется перед отрисовкой.
• Код отрисовки занимает около 3 200 строк и разделён на специализированные модули.

Penpot: ClojureScript → Rust WASM → Skia

ClojureScript → JavaScript
  → разложение и бинарная упаковка в память WASM
  → Rust WASM через Emscripten C FFI
  → skia-safe
  → Skia/WebGL

Без WASM каждая фигура отображается как элемент SVG DOM через React/Reagent. В режиме WASM UUID разбивается на четыре u32, преобразование — на шесть f32, заливки и обводки кодируются в двоичном виде, а основные свойства фигуры занимают структуру размером 104 байта.

Система использует кеш плиток, области интереса, 11 поверхностей отрисовки и глобальное изменяемое состояние через unsafe { STATE.as_mut() }. Кеш может хранить до 1024 текстур. OpenPencil перерисовывает видимую область целиком.

Аспект	OpenPencil	Penpot
JavaScript → WASM	Прямые вызовы с объектами TypeScript	Двоичные структуры
Модель	Полная отрисовка видимой области	Кеш плиток
Поверхности	1	11
Дополнительный кеш	Нет	До 1024 плиток
Размер кода отрисовки	около 3 200 строк	22 000 строк
Небезопасный код	Нет	Глобальное состояние через unsafe

Прямой путь CanvasKit требует меньше промежуточной обработки для небольших и средних документов. Кеш Penpot может быть выгоднее для документов со 100 000 и более фигур, когда видна лишь малая часть холста.

4. SceneGraph и модель данных

nodes: Map<string, SceneNode>

OpenPencil обеспечивает поиск по идентификатору за O(1), 29 типов объектов из схемы Kiwi, около 390 полей в NodeChange, строгие типы TypeScript и GUID в формате Figma sessionID:localID.

Penpot поддерживает собственные определения типов в Clojure/ClojureScript и Rust. Отдельные модули отвечают за цвета, компоненты, контейнеры, заливки, сетку, модификаторы, страницы и контуры. Malli проверяет схемы во время выполнения, а данные отрисовки пересекают границу CLJS → Rust.

5. Движок компоновки

OpenPencil синхронно использует Yoga WASM:

const root = Yoga.Node.create()
root.setFlexDirection(FlexDirection.Row)
root.calculateLayout()

Penpot поддерживает собственные реализации Flex и Grid в ClojureScript и Rust WASM. Оба движка должны выдавать одинаковый результат. OpenPencil использует Yoga, включая ответвление с поддержкой Grid; Penpot поддерживает несколько тысяч строк собственного кода компоновки на двух языках.

6. Форматы и Figma

OpenPencil использует бинарный формат Kiwi Figma, напрямую импортирует .fig, читает данные Kiwi из буфера обмена и совместим с многопользовательским протоколом Figma.

Файл .penpot — ZIP-архив с манифестами JSON, данными документа, бинарными ресурсами и миниатюрами. Penpot не импортирует .fig напрямую и поддерживает несколько поколений формата через систему миграций.

7. Состояние и отмена

OpenPencil использует обратные команды: функции применения и отмены сохраняют только необходимое состояние, а несколько операций можно объединить.

Penpot использует Potok. UpdateEvent меняет состояние, WatchEvent выполняет побочные эффекты через RxJS, а история хранит обратные наборы изменений, ограничивается 50 записями и объединяет быстрые изменения в транзакции.

8. Разработка

Показатель	OpenPencil	Penpot
Подготовка	bun install && bun dev	Docker Compose, JVM, Node и Rust
Быстрое обновление	Vite	shadow-cljs
Типы	Строгий TypeScript	Схемы Malli во время выполнения
Настольная версия	Tauri v2	Браузер
Основные технологии	TypeScript и Vue	Clojure, ClojureScript, Rust и Docker

9. Производительность

Сценарий	OpenPencil	Penpot
Холодный запуск	менее 2 секунд с WASM	более 10 секунд для сервера, клиента и WASM
Обычная операция	Внутри одного процесса	Возможен сетевой обмен
Кадр	Прямой вызов Skia	CLJS → JS → WASM FFI → Skia
Базовая память	около 50 МБ во вкладке браузера	JVM, база данных, кеш и браузер
Работа без сети	Полная	Требует сервера
10 000 фигур	Один проход	Плиточная отрисовка с 11 поверхностями

10. Преимущества Penpot

1. Серверная совместная работа: учётные записи, контроль доступа и центральное хранение через WebSockets.
2. Экспорт PDF: отдельный экспортёр Chromium.
3. Система плагинов: изолированное выполнение и API плагинов.
4. Токены дизайна: встроенная поддержка.
5. CSS Grid: собственная реализация; OpenPencil использует ответвление Yoga с Grid.
6. Самостоятельное размещение: развёртывание для команды через Docker.
7. Зрелость: несколько лет эксплуатации.

11. Сценарии и расширяемость

Команда eval предоставляет совместимый с Figma Plugin API для сценариев без интерфейса, пакетных операций и автоматизированных тестов. Чат с ИИ, сервер MCP и CLI также предлагают 90 инструментов для чтения, создания, изменения, работы со структурой, переменными, векторными контурами, анализа, сравнения, логических операций и расположения.

Penpot предлагает изолированные плагины, но не имеет сопоставимого API для сценариев без интерфейса или интеграции MCP.

Итоги

Область	Преимущество	Причина
Простота	OpenPencil	Один процесс вместо нескольких служб
Отрисовка	OpenPencil	Прямой путь CanvasKit
Кодовая база	OpenPencil	Около 26 000 против 299 000 строк
Совместимость с Figma	OpenPencil	Нативные Kiwi и .fig
Разработка	OpenPencil	TypeScript и Vue вместо Clojure, Rust и Docker
Настольное приложение	OpenPencil	Tauri
Компоновка	OpenPencil	Yoga вместо двух собственных реализаций
Совместная работа	Разные преимущества	Penpot: сервер и контроль доступа; OpenPencil: P2P без размещения
Самостоятельное размещение	Penpot	Развёртывание Docker
Зрелость	Penpot	Многолетняя эксплуатация

OpenPencil — компактный редактор в одном процессе с CanvasKit и нативной поддержкой .fig. Penpot — полная клиент-серверная платформа на Clojure, ClojureScript, Rust, базах данных и службах Docker. Оба поддерживают совместную работу, но используют разные модели.