Кейс: конструктор форм

↑ 8.4 Frontend System Design · ← Предыдущая · → Следующая

Желательно~3 мин чтенияУровень: senior

Зачем это на собесе

Кейс проверяет проектирование схемы, расширяемость и валидацию.

Требования

Администратор собирает форму (поля, порядок, правила), пользователи заполняют. Поддержка условной видимости, валидации, разных типов полей, версионирования и сохранения черновиков.

Модель (JSON Schema-подобная)

type Field =
  | { id: string; type: 'text'; label: string; required?: boolean; pattern?: string }
  | { id: string; type: 'number'; label: string; min?: number; max?: number }
  | { id: string; type: 'select'; label: string; options: { value: string; label: string }[] }
  | { id: string; type: 'group'; label: string; fields: Field[] }
 
interface FormSchema {
  id: string
  version: number
  fields: Field[]
  rules: { when: { field: string; op: 'eq' | 'neq' | 'in'; value: unknown }; then: { show?: string[]; require?: string[] } }[]
}

Схема хранится на сервере, версионируется; ответы привязаны к версии схемы.

Рендер

<component v-for="f in visibleFields" :key="f.id"
  :is="registry[f.type]" v-bind="f" v-model="values[f.id]" :error="errors[f.id]" />

• реестр компонентов по типу (расширяемость, Open/Closed);
• видимость полей вычисляется правилами (computed);
• значения — плоский объект values по id.

Валидация

• схема генерирует валидатор (Zod/Yup/JSON Schema через Ajv);
• запуск на blur/submit, а не на каждый ввод; асинхронные проверки (уникальность) с debounce;
• повторная проверка на сервере обязательна;
• сообщения ошибок и i18n.

Конструктор (editor)

• drag-and-drop порядка (Sortable, dnd-kit-аналоги), панель свойств поля;
• undo/redo (стек команд), предпросмотр;
• автосохранение черновика;
• ограничение циклических зависимостей правил.

Сложные моменты

• условные поля и очистка значений скрытых полей;
• вложенные группы и повторяющиеся блоки (массивы);
• миграция ответов при смене версии схемы;
• доступность: связка label, ошибки aria-describedby, порядок фокуса;
• безопасность: не исполнять произвольный код из схемы (правила декларативные), санитизация HTML в подписях;
• производительность на больших формах (ленивый рендер шагов).

Вопросы с ответами

Почему схема декларативная?

Её можно хранить, версионировать, валидировать на сервере и клиенте, отрисовывать разными клиентами и не исполнять произвольный код.

Что делать при изменении схемы формы, когда есть старые ответы?

Версионировать схему, хранить версию вместе с ответом, писать миграции или показывать ответ по старой версии.