70 lines
5.2 KiB
Markdown
70 lines
5.2 KiB
Markdown
# Технологический стек
|
||
|
||
## Ключевые технологии
|
||
|
||
| Уровень | Технология | Почему |
|
||
|-------|-----------|-----|
|
||
| **Рендеринг** | Skia CanvasKit WASM | Тот же движок, что и у Figma — проверенная производительность, GPU-ускорение, пиксельная точность |
|
||
| **UI-фреймворк** | Vue 3 + VueUse | Реактивный Composition API, отличная поддержка TypeScript |
|
||
| **Компоненты** | Reka UI | Headless, доступные UI-примитивы (дерево, слайдер и т.д.) |
|
||
| **Стилизация** | Tailwind CSS 4 | Утилитарный подход, быстрая итерация, тёмная тема |
|
||
| **Макет** | Yoga WASM | CSS flexbox движок от Meta, проверенный на React Native |
|
||
| **Формат файлов** | Kiwi binary + Zstd | Собственный формат Figma — компактный, быстрый парсинг, совместимость с .fig |
|
||
| **Совместная работа** | Trystero + Yjs | P2P WebRTC через MQTT, CRDT-синхронизация, сохранение в y-indexeddb |
|
||
| **Цвет** | culori | Конвертация цветовых пространств (HSV, RGB, hex) |
|
||
| **ИИ/MCP** | MCP SDK + Hono | 90+ инструментов для ИИ-кодинга, транспорты stdio + HTTP |
|
||
| **JSX-трансформ** | Sucrase | 201 КБ JSX → JS, синхронный, работает в браузере |
|
||
| **События** | nanoevents | 108 байт, типизированный эмиттер событий для мутаций SceneGraph |
|
||
| **JSX-трансформ** | Sucrase | 201 КБ JSX → JS, синхронный, работает в браузере |
|
||
| **События** | nanoevents | 108 байт, типизированный эмиттер событий для мутаций SceneGraph |
|
||
| **Десктоп** | Tauri v2 | ~5 МБ нативное приложение (против ~100 МБ у Electron), бэкенд на Rust |
|
||
| **Сборка** | Vite 7 | Быстрый HMR, нативные ES-модули |
|
||
| **Тестирование** | Playwright + bun:test | Визуальная регрессия (E2E) + быстрые модульные тесты |
|
||
| **Линтинг** | oxlint | На основе Rust, на порядки быстрее ESLint |
|
||
| **Форматирование** | oxfmt | Форматирование на основе Rust |
|
||
| **Проверка типов** | typescript-go (tsgo) | Нативная Go-реализация проверки типов TypeScript |
|
||
|
||
## Ключевые зависимости
|
||
|
||
```json
|
||
{
|
||
"canvaskit-wasm": "^0.40.0",
|
||
"vue": "^3.5.29",
|
||
"yoga-layout": "npm:@open-pencil/yoga-layout@3.3.0-grid.2",
|
||
"nanoevents": "^9.1.0",
|
||
"sucrase": "^3.35.1",
|
||
"reka-ui": "^2.8.2",
|
||
"tailwindcss": "^4.2.1",
|
||
"culori": "^4.0.2",
|
||
"fzstd": "^0.1.1",
|
||
"fflate": "^0.8.2",
|
||
"trystero": "^0.20.0",
|
||
"yjs": "^13.6.24",
|
||
"y-indexeddb": "^9.0.12"
|
||
}
|
||
```
|
||
|
||
## Почему не...
|
||
|
||
### Почему не SVG-рендеринг?
|
||
|
||
SVG медленный для сложных документов. Каждый узел — это элемент DOM — 10 000 узлов означают 10 000 DOM-элементов с расходами на макет, отрисовку и композитинг. CanvasKit отрисовывает всё на одну GPU-поверхность. (Penpot по-прежнему использует SVG-рендеринг по умолчанию, но разрабатывает опциональный Rust/Skia WASM рендерер.)
|
||
|
||
### Почему не Electron (как десктоп Figma)?
|
||
|
||
Tauri v2 использует системный webview (~5 МБ) вместо включения Chromium (~100 МБ). Бэкенд на Rust обеспечивает нативную производительность для файлового ввода-вывода и системной интеграции.
|
||
|
||
### Почему не React (как в первоначальном плане)?
|
||
|
||
Проект мигрировал с React на Vue 3 на ранней стадии разработки. Система реактивности Vue и композаблы VueUse оказались более эргономичными для управления состоянием редактора.
|
||
|
||
### Почему не собственный движок макетов?
|
||
|
||
Yoga поддерживается Meta, проверен на миллиардах устройств с React Native и реализует спецификацию CSS flexbox. Создание собственного движка заняло бы месяцы работы для достижения того же уровня корректности.
|
||
|
||
## Планируемые технологии
|
||
|
||
| Технология | Назначение | Этап |
|
||
|-----------|---------|-------|
|
||
| CSS Grid в Yoga | Макет на основе сетки | ✅ Включено через [форк Yoga](https://github.com/open-pencil/yoga/tree/grid) (`@open-pencil/yoga-layout`) |
|