Как вынести управление формами из разработки
В одном из проектов у заказчиков было много сложных форм. Большие, многовкладочные, со сложной условной логикой. Всё хранилось в YAML-файлах, которые писали разработчики, и клиентский код маппил их в UI. Любое изменение формы или добавление новой требовало участия разработчика и запуска нового деплоя.
Я предложил внедрить drag-and-drop конструктор форм на базе Form.io. Идея была в том, чтобы форма хранилась как JSON-схема, которую генерирует визуальный редактор, и это позволило бы администраторам самим собирать и публиковать формы без деплоя и без разработчика в процессе.
Стандартного набора компонентов конечно же было недостаточно, старые формы содержали специфические поля для ввода, например, выбор пользователя из дерева оргструктуры, поиск сущностей с фильтрами в модальном окне, computed-поля с вычислением из других полей. Пришлось написать пару десятков кастомных компонентов, расширить функционал стандартных компонентов для вёрстки шаблона форм, добавить поддержку условного рендеринга табов, прикрутить многоязычность.
Не обошлось и без проблем, и, пожалуй, самой главной проблемой была периодически возникающая ситуация с циклическими зависимостями между полями ввода. Форма на 200+ полей с условной логикой - это граф, и иногда он оказывался замкнутым, форма просто подло тормозила, иногда и зависала вовсе. Решил это добавлением кода, который выявлял такие проблемные места: строил граф зависимостей и подсвечивал проблемные цепочки ещё до сохранения формы.
Иногда встречались баги на уровне самой библиотеки Form.io, решал путём monkey patching как быстрое решение, пару раз открывал issue на GitHub, кажется что-то даже пофиксили.
Drag-and-drop это конечно не панацея. Формы были сложными, и хоть код писать уже не требовалось, администраторам тоже пришлось непросто: куча настроек в интерфейсе, плюс нужно было делать адаптивные формы, чтобы на мобилах ничего не съезжало. Первое время часто приходили ко мне с вопросами, что меня немало отвлекало от основных задач. Решил это написанием мануала с лучшими практиками: как строить шаблоны, какие компоненты использовать, как настраивать зависимости, чтобы не выстрелить себе в ногу. Через несколько месяцев опытные администраторы уже сами консультировали новых.
После внедрения конструктора удалось сильно разгрузить разработчиков: формы собирали администраторы в редакторе сами, и публиковали их на горячую, без запуска нового деплоя после каждого изменения.
← К статьям