Конструктор форм з drag-and-drop: розробка під ключ

Типова біль: менеджер просить додати поле «Зручний час для дзвінка» у форму зворотного зв'язку. Розробник править шаблон, оновлює валідацію, тестує на staging — іде 4 години. Такі правки трапляються щотижня, відволікаючи від основної розробки. У результаті компанія втрачає до 16 годин на місяць лише на доопрацювання форм. При цьому в типовому проєкті з десятком форм подібні зміни перетворюються на нескінченний цикл узгоджень та деплоїв.

Готовий конструктор форм з drag-and-drop усуває цю проблему на рівні архітектури. Ми розробили рішення, яке дозволяє нетехнічним співробітникам створювати та змінювати форми через інтуїтивний інтерфейс. Конструктор складається з трьох незалежних компонентів: Builder (редактор на React), Renderer (компонент відображення) та Backend (API для зберігання схем і відповідей). Схема форми — JSON-схема, яка інтерпретується рендерером. Це дає повну гнучкість без зміни коду при додаванні нового типу поля. Нижче — приклад такої схеми.

{
  "id": "uuid-v4",
  "title": "Заявка на зворотний дзвінок",
  "description": "Ми передзвонимо протягом 30 хвилин",
  "settings": {
    "submit_label": "Відправити заявку",
    "success_message": "Дякуємо! Ми зв'яжемося з вами.",
    "redirect_url": null,
    "notify_emails": ["[email protected]"],
    "allow_multiple_submissions": false
  },
  "fields": [
    {
      "id": "field_1",
      "type": "text",
      "label": "Ім'я",
      "placeholder": "Введіть ваше ім'я",
      "required": true,
      "validation": { "min_length": 2, "max_length": 100 }
    },
    {
      "id": "field_2",
      "type": "phone",
      "label": "Телефон",
      "required": true,
      "validation": { "pattern": "^\\+?[\\d\\s\\-\\(\\)]{7,20}$" }
    },
    {
      "id": "field_3",
      "type": "select",
      "label": "Зручний час дзвінка",
      "required": false,
      "options": [
        { "value": "morning", "label": "9:00 – 12:00" },
        { "value": "afternoon", "label": "12:00 – 17:00" },
        { "value": "evening", "label": "17:00 – 20:00" }
      ]
    },
    {
      "id": "field_4",
      "type": "conditional_group",
      "condition": { "field": "field_3", "operator": "equals", "value": "evening" },
      "fields": [
        {
          "id": "field_4_1",
          "type": "checkbox",
          "label": "Підтверджую, що дзвінок після 17:00 мені зручний",
          "required": true
        }
      ]
    }
  ]
}

Чому JSON-схема?

JSON-схема — це єдине джерело істини для всіх компонентів. Builder генерує її, Renderer читає та відмальовує, Backend валідує та зберігає відповіді. Така архітектура дозволяє додавати нові типи полів без зміни коду фронтенду чи бекенду — достатньо розширити схему. Це ключова відмінність від саморобних рішень, де кожне поле жорстко зашите в шаблон.

Проблеми, які вирішуємо

• Ручне кодування кожної форми — забирає до 4 годин на одну зміну. Наш конструктор скорочує це до 30 хвилин на редагування через інтерфейс.
• Складність підтримки кастомних полів — додавання нового типу вимагає зміни коду на всіх рівнях. JSON-схема дозволяє додавати поля без участі розробника.
• Відсутність аналітики — без конструктора складно відстежувати конверсію. Ми вбудовуємо дашборд з розподілом відповідей, конверсією та покинутими сесіями.

Підтримувані типи полів

Яку бібліотеку обрати для drag-and-drop?

Для реалізації drag-and-drop в редакторі ми використовуємо бібліотеку @dnd-kit. Вона сучасніша за react-beautiful-dnd: підтримує складніші сценарії — наприклад, перетягування між контейнерами, сортування з анімацією та роботу з сенсорними екранами. При цьому вона легша та швидша.

import { DndContext, closestCenter, DragEndEvent } from '@dnd-kit/core';
import { SortableContext, verticalListSortingStrategy, arrayMove } from '@dnd-kit/sortable';

function FormBuilder({ schema, onChange }: BuilderProps) {
  const [fields, setFields] = useState(schema.fields);

  function handleDragEnd(event: DragEndEvent) {
    const { active, over } = event;
    if (active.id !== over?.id) {
      setFields((items) => {
        const oldIndex = items.findIndex((i) => i.id === active.id);
        const newIndex = items.findIndex((i) => i.id === over!.id);
        const reordered = arrayMove(items, oldIndex, newIndex);
        onChange({ ...schema, fields: reordered });
        return reordered;
      });
    }
  }

  return (
    <DndContext collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
      <SortableContext items={fields.map(f => f.id)} strategy={verticalListSortingStrategy}>
        {fields.map(field => (
          <SortableFieldCard
            key={field.id}
            field={field}
            onEdit={(updated) => updateField(field.id, updated)}
            onDelete={() => removeField(field.id)}
          />
        ))}
      </SortableContext>
    </DndContext>
  );
}

Рендеринг та валідація

Рендерер працює з тією ж JSON-схемою. Для валідації використовуємо React Hook Form — бібліотеку, яка мінімізує ререндери та спрощує правила перевірки.

import { useForm } from 'react-hook-form';

function FormRenderer({ schema, onSubmit }: RendererProps) {
  const { register, handleSubmit, watch, formState: { errors } } = useForm();

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {schema.fields.map(field => (
        <FormField
          key={field.id}
          field={field}
          register={register}
          errors={errors}
          watch={watch}
        />
      ))}
      <button type="submit">{schema.settings.submit_label}</button>
    </form>
  );
}

function FormField({ field, register, errors, watch }) {
  // Умовна логіка: показувати поле лише якщо умова виконана
  if (field.condition) {
    const watchValue = watch(field.condition.field);
    const conditionMet = evaluateCondition(watchValue, field.condition);
    if (!conditionMet) return null;
  }

  const rules = buildValidationRules(field);

  switch (field.type) {
    case 'text':
    case 'email':
    case 'phone':
      return (
        <div>
          <label>{field.label}{field.required && ' *'}</label>
          <input {...register(field.id, rules)} placeholder={field.placeholder} />
          {errors[field.id] && <span>{errors[field.id].message}</span>}
        </div>
      );
    case 'select':
      return (
        <div>
          <label>{field.label}</label>
          <select {...register(field.id, rules)}>
            <option value="">Оберіть...</option>
            {field.options.map(opt => (
              <option key={opt.value} value={opt.value}>{opt.label}</option>
            ))}
          </select>
        </div>
      );
    // ... інші типи
  }
}

Як зберігати дані та аналізувати відповіді?

Зберігання схем та відповідей організовано на PostgreSQL. Схема форми — JSONB, відповіді — теж JSONB з GIN-індексом для швидкого пошуку.

CREATE TABLE forms (
    id          UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    title       VARCHAR(255) NOT NULL,
    slug        VARCHAR(100) UNIQUE,
    schema      JSONB NOT NULL,
    is_active   BOOLEAN DEFAULT TRUE,
    created_by  INTEGER,
    created_at  TIMESTAMP DEFAULT NOW(),
    updated_at  TIMESTAMP DEFAULT NOW()
);

CREATE TABLE form_submissions (
    id          BIGSERIAL PRIMARY KEY,
    form_id     UUID REFERENCES forms(id),
    data        JSONB NOT NULL,
    metadata    JSONB DEFAULT '{}',
    submitted_at TIMESTAMP DEFAULT NOW()
);

CREATE INDEX idx_submissions_form ON form_submissions (form_id, submitted_at DESC);
CREATE INDEX idx_submissions_data ON form_submissions USING gin(data);
-- Аналітика: розподіл відповідей для поля
SELECT
    data->>'field_3' AS answer,
    COUNT(*) AS count,
    ROUND(COUNT(*) * 100.0 / SUM(COUNT(*)) OVER (), 1) AS percent
FROM form_submissions
WHERE form_id = $1
  AND data ? 'field_3'
GROUP BY data->>'field_3'
ORDER BY count DESC;

Обробка відправки виконується через єдиний API-ендпоінт:

// POST /api/forms/{slug}/submit
async function submitForm(req: Request, res: Response) {
  const form = await getFormBySlug(req.params.slug);
  if (!form || !form.is_active) return res.status(404).json({ error: 'Form not found' });

  const schema = form.schema;
  const errors = validateSubmission(schema.fields, req.body);
  if (Object.keys(errors).length) {
    return res.status(422).json({ errors });
  }

  const submission = await saveSubmission(form.id, req.body, {
    ip: req.ip,
    user_agent: req.headers['user-agent'],
    referer: req.headers.referer,
  });

  // Сповіщення
  if (schema.settings.notify_emails?.length) {
    await sendNotificationEmail(form, submission);
  }
  if (schema.settings.webhook_url) {
    await triggerWebhook(schema.settings.webhook_url, submission);
  }

  return res.json({
    success: true,
    message: schema.settings.success_message,
    redirect: schema.settings.redirect_url,
  });
}

Типові помилки при реалізації

• N+1 запити при завантаженні списку форм — вирішуємо через eager loading або кешування.
• Проблеми гідратації на сервері — форми з умовами можуть рендеритися некоректно при SSR. Використовуємо Suspense та поступове завантаження.
• Складність валідації кастомних полів — JSON-схема з правилами спрощує підтримку.
• Відсутність захисту від повторної відправки — впроваджуємо CSRF-токени та унікальні ключі.

Процес роботи

1. Аналітика — вивчаємо вимоги, типи форм, інтеграції.
2. Проектування — розробляємо JSON-схему та прототип інтерфейсу.
3. Реалізація — пишемо Builder, Renderer, Backend, підключаємо аналітику.
4. Тестування — перевіряємо коректність рендерингу, валідації, відправок.
5. Деплой — розгортаємо на сервері, налаштовуємо моніторинг.

Строки реалізації

Що входить в роботу

• Готовий React-компонент редактора з палітрою полів
• API для зберігання схем та відповідей
• Сторінка аналітики з графіками та вивантаженням
• Інтеграція з поштою (сповіщення) та вебхуками
• Документація по API та налаштуванні
• Навчання адміністраторів (1–2 години)
• Гарантія 12 місяців на розроблене рішення

На відміну від саморобного рішення, де кожна зміна вимагає 4 годин роботи розробника, наш конструктор дозволяє змінити форму за 30 хвилин через інтерфейс. Це дає суттєву економію бюджету — до 95% часу на створення та зміну форм. Оцінимо ваш проєкт за 1 годину: зв'яжіться з нами, щоб обговорити деталі та отримати комерційну пропозицію. Замовте розробку конструктора форм під ключ вже сьогодні.

Послуги бекенд-розробки: production-grade надійність

На production-сервері о 3:14 ночі черга Laravel Jobs перестала оброблятися — 40 000 необроблених завдань у Redis. Причина: worker упав через memory leak у статичній змінній Eloquent observer, supervisor не перезапустив через misconfigured stopwaitsecs. Ми розбирали такий інцидент на проекті з 500 RPS: діагностика 4 години, фікс — 20 хвилин. Щоб ви не втрачали гроші, пропонуємо послуги бекенд-розробки з акцентом на production-grade надійність — 10+ років досвіду, 50+ проектів, 5 років на ринку. Оцінимо ваш проект за 2 дні.

Які проблеми вирішуємо

N+1 запити: головний вбивця швидкості

N+1 — найпоширеніша причина повільних сторінок у Laravel-додатках. Стандартна історія: сторінка працювала нормально на dev з 10 записами, на production з 10 000 — 8-секундне завантаження.

Laravel Debugbar у dev-оточенні показує кількість запитів. Більше 20 — сигнал для audit.

Model::preventLazyLoading(! app()->isProduction());

Telescope для профілювання: логує всі запити, jobs, mail, notifications з деталізацією. Після впровадження eager loading час завантаження сторінки падає з 8 с до 0.3 с — у 27 разів.

Memory leak у статичних змінних

У Laravel Octane або Swoole додаток тримається в пам’яті між запитами. Статичні змінні не скидаються — призводять до неконтрольованого росту пам’яті. Використовуємо defer-функції та контейнерні біндинги для коректного скидання стану.

Неправильний connection pool

Rails, Laravel, Django відкривають нове з'єднання PostgreSQL на кожен PHP/Python процес. 100 воркерів — 100 з'єднань. PostgreSQL деградує від 200+ активних з'єднань через overhead на управління.

PgBouncer у transaction pooling: 1000 воркерів → 20–50 реальних з'єднань. Це знижує latency на 40% та зменшує витрати на хостинг на 30% — при середній вартості хостингу $2,000/міс економить $600/міс. GIN-індекс для JSONB до 100 разів швидший за B-tree при пошуку.

Як Octane справляється з високим навантаженням?

Laravel Octane (RoadRunner або Swoole) прибирає overhead bootstrap на кожен HTTP-запит. Приріст: 3–8x на синтетичних бенчмарках, 2–4x на реальних додатках. Важливо: не зберігати стан у статичних змінних — застосовуємо це на проектах >1000 RPS.

Як PostgreSQL допомагає уникнути повільних запитів?

Використовуємо composite indexes для WHERE + ORDER BY, partial indexes для фільтрів з високою селективністю, GIN-індекси для JSONB та full-text search. to_tsvector + GIN замість LIKE '%query%' — запобігає seq scan навіть на мільйонах записів. Аналізуємо плани через EXPLAIN ANALYZE та pg_stat_statements.

Як обрати стек для вашого проекту?

Node.js виправданий для realtime: Laravel публікує події в Redis Pub/Sub, Node.js підписується та транслює клієнтам. Go — для goroutines (10k з'єднань на сервер — норма), але розробка повільніша, ніж Laravel.

Чому Redis критичний для продуктивності?

Redis виконує кілька ролей:

Redis Cluster для горизонтального масштабування, Sentinel для автоматичного failover. Замовте консультацію щодо оптимізації Redis для вашого проекту.

Що входить в роботу під ключ

• Архітектурне проектування (документація API, схема БД, діаграма сервісів)
• Реалізація за узгодженим ТЗ з code review
• Налаштування CI/CD (GitHub Actions, Docker), моніторингу (Sentry, Grafana), алертингу
• Навантажувальне тестування (k6, wrk) зі звітом
• Передача вихідних кодів, доступів, інструкція з деплою
• Навчання команди замовника (2–3 сесії)
• Гарантійна підтримка 1 місяць після здачі

Орієнтири по термінах

Вартість розраховується індивідуально після аналізу вимог до навантаження, інтеграцій та бізнес-логіки. Зв'яжіться з нами для безкоштовного аудиту вашого поточного backend — отримайте план оптимізації за 2 дні. Замовте консультацію та дізнайтеся, як знизити витрати на інфраструктуру на 30% без втрати продуктивності.