Уважаемый хабрачитатель, хочу поделиться с тобой опытом в выборе и использовании генераторов форм для Vue.js.

Введение

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

Если вы только погружаетесь в эту предметную область, то первое, что вам необходимо сделать — это оценить применимость данного подхода к вашей разработке. Можно выделить следующие ситуации, когда этот подход оправдает себя:

1. Приложение имеет множество однотипных форм, где декомпозиция компонентов не оказывает должного эффекта, а использование copy & paste только ухудшает поддерживаемость;
2. Приложение очень динамично развивается и требуется экономить время на реализации каждой новой фичи продукта в ущерб UX (User eXperience);
3. Приложение находится на стадии прототипирования и большая часть функциональности будет изменена или удалена в ближайшее время.

Далее необходимо определиться со списком требований к библиотеке генератора форм (данный список может отличаться от ваших требований):

1. Библиотека для Vue.js;
2. Поддержка Element UI, желательно актуальной версии;
3. Построение форм из JSON schema, с использованием валидаторов;
4. Возможность локализации форм, включая ошибки валидации.

Требования из данного списка не выглядят какими-то невыполнимыми, но дьявол кроется в деталях и, для того чтобы сделать осознанный выбор, не достаточно просто прочитать описание на сайте разработчика или README проекта. Основные проблемы можно обнаружить только при решении практических задач, а данная статья призвана облегчить жизнь тем, что автор уже прошёл по ровно уложенным граблям и готов поделиться с вами своими объективными и субъективными заключениями.

Несколько слов перед тем, как перейти к списку кандидатов. Под другие фреймворки, например, React или Angular, есть более достойные проекты, но изначально выбор пал на Vue.js, в силу его простоты встраивания и минималистичности, поэтому автор рассматривает только данный набор библиотек, а остальные фреймворки оставим за скобками этой статьи. Element — очень функциональный UI kit, предоставляющий практически все примитивы для быстрой разработки веб-приложений и требующий минимального опыта от разработчика, что идеально подходит для людей, переходящих в веб-разработку из других языков программирования.

Кандидаты

vue-json-schema

Описание

• Оригинальный репозиторий (2.0.0-alpha.2): github и npm;
• Fork проекта (для legacy версии 1.1.1): github и npm;
• Реализация темы для Element UI: github, демо.

Интересный проект, имеет ~360 звёзд на github, но заброшен с 2018 года, хорошо интегрирован с Element UI, позволяет расширять возможности основной библиотеки, добавляя свои собственные типы объектов.

Минусы

• Стабильно работает только версия 1.1.1, а 2.0.0 находится на стадии готовности alpha и её использование в production версиях приложений не рекомендуется;
• Не поддерживает механизма локализации из коробки, нужно создавать несколько схем или патчить схему «на лету» до передачи генератору;
• Давно не поддерживается, последняя тестированная версия Vue.js 2.2.0 в рамках интеграции.

Плюсы

• Возможность создавать формы из оригинальной JSON schema и применять стандартные валидаторы к данным;
• Поддержка Element UI.

ncform

Описание

• Репозиторий: github и npm;
• Реализация темы для Element UI: github и npm;
• Примеры использования UI controls;
• Demo проект;
• Генератор формы из JSON документа;
• Визуальный редактор создания форм.

Китайский проект, имеет ~900 звёзд на github и развивается неспешно. Все комментарии в коде на китайском языке, что усложняет понимание. Имеет встроенный механизм локализации. Основная часть проекта покрыта Unit и функциональными тестами на cypress. В библиотеке используются проприетарные ключи, отступающие от оригинальной JSON schema, но при этом не ломающие её.

Минусы

• Недостаточно качественная документация и примеры;
• Проприетарные ключи в JSON schema;
• Недостаточно конфигурационных возможностей UI controls.

Плюсы

• Популярность проекта;
• Встроенная поддержка локализации;
• Возможность создания собственных валидаторов в JSON schema через dx-выражения;
• Минимально необходимая поддержка Element UI.

vue-form-generator

Описание

• Репозиторий: github и npm;
• Реализация темы для Element UI: github и npm;
• Fork темы для Element UI c незначительными изменениями: github и npm;
• Пример использования UI controls и репозиторий примера, vue файл;
• Подробный разбор использования и настройки vue-form-generator.

Самый популярный проект по количеству звёзд на github ~2500, имеет хорошую документацию на английском языке. Большое количество конфигурационных возможностей элементов, но отсутствуют простые способы для локализации.

Минусы

• Нет возможности загрузки из JSON файла, как минимум валидаторы — это объекты;
• Собственный формат схемы для создания формы, несовместим с оригинальной JSON schema;
• Не поддерживает пакет i18n и локализацию для валидаторов;
• Необходимо переопределять стили для ошибок валидаторов и объектов форм.

Плюсы

• Популярность проекта;
• Большое количество расширений;
• Поддержка Element UI.

vue-form-json-schema

Описание

• Репозиторий: github и npm

Библиотека использует классические аннотации JSON schema для валидации, но для отрисовки UI требует отдельного объекта, содержащего UI конфигурацию — uiSchema. Поддерживает локализацию для ошибок валидации через проект и другие плагины для ajv, например, ajv-errors. Позволяет добавлять свои визуальные компоненты, используемые в uiSchema.

Минусы

• Не поддерживает Element UI, требуется отдельно применять стили;
• Очень сложно создавать uiSchema, соизмеримо с описанием визуальной схемы в блоке template vue-компонента.

Плюсы

• Возможность конфигурировать формы из JSON schema;
• Встроенная поддержка валидации, которую можно расширять;
• Встроенная поддержка локализации, включая результат работы валидаторов.

vue-ele-form

Описание

• Репозиторий: github и npm.

Китайский проект с относительно большим количеством звёзд на github ~530, но с полностью отсутствующей документацией на английском языке. Присутствует онлайн demo и проект для визуального создания форм, онлайн.

Минусы

• Вся документация, примеры и комментарии в коде только на китайском языке;
• Используется отличная от оригинальной JSON schema структура описания.

Плюсы

• Проект активно развивается и есть надежда, что он станет интернациональным;
• Присутствует функциональность расширения данной библиотеки и уже существуют более 10 новых визуальных компонентов;
• Поддержка Element UI.

form-create

Описание

• Репозиторий: github и npm.

Китайский проект с ~2100 звёздочек на github, но при этом есть минимальная документация на английском языке. Формы можно конфигурировать через JSON, но для этого используется собственный формат, отличный от оригинальной JSON schema. Присутствует тема для Element UI.

Минусы

• Используется отличная от оригинальной JSON schema структура описания;
• Плохая локализация на английский, как в документации, так и создаваемом представлении, во многих местах отсутствует перевод с китайского языка;

Плюсы

• Присутствует возможность расширения и сторонние компоненты, такие как: Text, JSON, Code и Markdown редакторы;
• Поддержка Element UI.

Дополнительные проекты

vue-vuelidate-jsonschema

• Репозиторий.

Имея формы, собранные во Vue компонент, можно проверять модель по заранее подготовленной схеме и получать ошибки от валидации при прямом вызове или копить state в объекте, но при этом отсутствует возможность генерации форм.

json2vue

• Репозиторий.

Проект создан для конфигурирования форм с помощью JSON, но ценность этого сомнительна, т.к. там нет валидаторов, локализации и т.д.

vue-form-builder

• Репозиторий.

Очередной китайский проект по созданию форм из собственного представления, поддерживает тему с Element UI, но на этом его плюсы заканчиваются.

Выводы

Хорошего решения для генерации форм из коробки нет, каждая из рассмотренных библиотек имеет ряд преимуществ и недостатков, поэтому существуют только пути решения:

• Взять vue-form-json-schema и сделать для него свои компоненты, базирующиеся на Element UI, а также сделать генератор uiSchema объектов, который будет иметь более простой интерфейс, где не нужно будет создавать развесистые описания;
• Взять vue-json-schema и добавить туда локализацию объектов, но это потребует больших изменений под капотом, а также необходимо расширять интерфейс описания объектов, чтобы поддержать все возможности Element UI;
• Взять ncform и написать конвертер для оригинальной JSON schema в кастомную под этот проект, также необходимо расширить плагины интеграции с Element UI, чтобы поддержать больше возможностей из этого фреймворка;
• Взять vue-form-generator и написать конвертер для оригинальной JSON schema в кастомную под этот проект, реализовать способ внедрения переводов или поддержки i18n, переработать стилизацию ошибок под Element UI.

Из списка требований необходимо получить библиотеку, которая сможет:

• Создавать формы только на основе оригинальной JSON schema;
• Поддерживать локализацию объектов внутри формы и ошибок от валидаторов;
• Поддерживать гибкий механизм проверки входных;
• Поддерживать визуальные схемы Element UI.

В рамках результата исследования, выбор пал на ncform как на самое готовое решение. JSON schema требует минимальной кастомизации и её генерация будет практически нативной, есть поддержка Element UI, локализация ошибок возможна как через внедрение собственного описания при загрузке библиотеки, так и через минимальную правку исходного кода, текст ошибок валидации задаётся на уровне схемы, но конкретно эти участки должны подвергаться предобработке до генерации формы.

Если ваш выбор, как и выбор автора, остановится на ncform, то можно использовать данный fork: github и npm. В рамках него проделана работа по переводу ошибок от стандартных валидаторов на русский и английский языки из коробки, расширена функциональность визуальных компонентов Element UI, исправлена работа некоторых валидаторов, например, для списковых объектов с типом array.

Автор надеется, что данная статья хотя бы немного сможет облегчить муки выбора при аналогичной ситуации, и вы сможете найти подходящее вам решение за меньшее время.