Skip to main content

Фреймворки и технологии платформы

Общий обзор ключевых технологий, применяемых в Lowcode Platform: их роль, место в архитектуре и минимальный набор знаний, нужный для разработки.

🎯 Зачем эта страница​

Цель — дать краткое, но структурированное понимание того, из чего состоит платформа, и какие фреймворки участвуют в её работе:

  • что за технологии используются на frontend, backend, в билд-системе;
  • почему они были выбраны;
  • как они взаимодействуют между собой;
  • какую часть монорепозитория они «ведут»;
  • что нужно знать разработчику, чтобы вносить вклад в проект.

1. Архитектура платформы (высокий уровень)

┌───────────────────────────────┐
│ builder-web (React + Vite)    │  ← визуальный редактор
└───────────────────────────────┘
               │ REST / POST
               ▼
┌───────────────────────────────┐
│ backend API (NestJS + Fastify)│  ← хранение проектов, валидация, компиляция
│ + Prisma + PostgreSQL         │
└───────────────────────────────┘
               │
               ▼
┌───────────────────────────────┐
│ DSL-compiler (TS)              │  ← генерация AST, React/HTML кода
└───────────────────────────────┘
               │
               ▼
┌───────────────────────────────┐
│ runtime-host (React)          │  ← запуск скомпилированных приложений
└───────────────────────────────┘

2. React + Vite (frontend)

Используется в:

  • apps/builder-web — визуальный редактор;
  • apps/runtime-host — выполнение скомпилированного React-кода;
  • packages/ui-kit — общая библиотека UI-компонентов.

Почему React​

  • декларативный UI;
  • TSX — нативный формат для генерации из DSL;
  • огромная экосистема.

Почему Vite​

  • мгновенный HMR;
  • простой конфиг;
  • быстрая разработка.

3. NestJS + Fastify (backend)

Используются в apps/api.

NestJS даёт архитектуру (модули, контроллеры, сервисы), Fastify — быстрый HTTP-движок.

API выполняет:

  • CRUD проектов и версий;
  • валидацию DSL;
  • компиляцию DSL→AST→React/HTML;
  • работу с Prisma.

4. Prisma + PostgreSQL

Prisma — ORM с типобезопасностью, миграциями и автогенерацией TS-типов.

PostgreSQL — основная база данных.

Хранит проекты, версии, результаты компиляции.

5. Turborepo

Используется для управления задачами в монорепозитории.

Преимущества:

  • кеширование задач;
  • параллельная сборка;
  • декларативные зависимости.

6. pnpm

Менеджер пакетов с workspace-поддержкой.

Преимущества:

  • высокая скорость;
  • хранение node_modules через ссылки;
  • удобен для больших монореп.

7. TypeDoc

Используется для генерации reference-справочника по пакетам (packages/*).

Результат кладётся в:

apps/docs/docs/reference/<package>

Команда:

pnpm docs:ref

8. Docusaurus

Основная документация располагается в apps/docs.

Даёт структуру:

  • разделы (architecture, frameworks, reference);
  • sidebars;
  • статическая сборка.

9. TailwindCSS

Используется в packages/ui-kit.

Преимущества:

  • быстрый прототипинг;
  • темы (light/dark);
  • единый дизайн для runtime и редактора.

10. Что должен знать разработчик

Frontend​

  • React
  • TSX
  • Tailwind
  • Vite

Backend​

  • NestJS
  • Prisma
  • PostgreSQL

Full-stack​

  • структура монорепы
  • Turborepo
  • DSL→AST→React pipeline

11. Как всё связывается

builder-web
  → /api/dsl/validate
  → /api/dsl/compile/react
  → AST
  → preview (babel-standalone)
  → runtime-host

DSL → AST → код → превью → исполнение.