- PVSM.RU - https://www.pvsm.ru -

Выбор генератора форм для Vue.js

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

Выбор генератора форм для Vue.js - 1

Введение

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

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

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

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

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

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

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

Кандидаты

vue-json-schema

Описание

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

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

Минусы

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

Плюсы

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

ncform

Описание

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

Минусы

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

Плюсы

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

vue-form-generator

Описание

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

Минусы

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

Плюсы

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

vue-form-json-schema

Описание

  • Репозиторий: github [27] и npm [28]

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

Минусы

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

Плюсы

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

vue-ele-form

Описание

  • Репозиторий: github [32] и npm [33].

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

Минусы

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

Плюсы

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

form-create

Описание

  • Репозиторий: github [37] и npm [38].

Китайский проект с ~2100 звёздочек на github, но при этом есть минимальная документация [39] на английском языке. Формы можно конфигурировать через 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 [43] и npm [44]. В рамках него проделана работа по переводу ошибок от стандартных валидаторов на русский и английский языки из коробки, расширена функциональность визуальных компонентов Element UI, исправлена работа некоторых валидаторов, например, для списковых объектов с типом array.

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

Автор: Dmitry Nagibin

Источник [45]


Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/json-schema/356510

Ссылки в тексте:

[1] Element: https://element.eleme.io/#/en-US

[2] github: https://github.com/formschema/native

[3] npm: https://www.npmjs.com/package/@formschema/native

[4] github: https://github.com/iboldurev/vue-json-schema

[5] npm: https://www.npmjs.com/package/vue-json-schema

[6] github: https://github.com/formschema/elementui

[7] демо: https://github.com/formschema/elementui/tree/master/demo

[8] github: https://github.com/ncform/ncform

[9] npm: https://www.npmjs.com/package/@ncform/ncform

[10] github: https://github.com/ncform/ncform/tree/master/packages/ncform-theme-elementui

[11] npm: https://www.npmjs.com/package/@ncform/ncform-theme-elementui

[12] Примеры: https://ncform.github.io/ncform/ncform-theme-elementui/index.html

[13] Demo проект: https://github.com/daniel-dx/ncform-demo

[14] Генератор формы: https://ncform.github.io/ncform/ncform-show/schema-gen/index.html

[15] Визуальный редактор: https://f-loat.github.io/ncform-maker/?lang=en

[16] github: https://github.com/vue-generators/vue-form-generator

[17] npm: https://www.npmjs.com/package/vue-form-generator

[18] github: https://github.com/egorzot/vue-form-generator-element

[19] npm: https://www.npmjs.com/package/vue-form-generator-element

[20] github: https://github.com/gt4w-consultoria/vue-form-generator-element-gt4w

[21] npm: https://www.npmjs.com/package/vue-form-generator-element-gt4w

[22] Пример: https://egorzot.github.io/vue-form-generator-element-example/

[23] репозиторий: https://github.com/egorzot/vue-form-generator-element-example

[24] vue файл: https://github.com/egorzot/vue-form-generator-element-example/blob/master/src/components/Example.vue

[25] Подробный разбор: https://blog.logrocket.com/how-to-build-reusable-forms-using-vue-form-generator/

[26] документацию: https://vue-generators.gitbook.io/vue-generators/

[27] github: https://github.com/jarvelov/vue-form-json-schema

[28] npm: https://www.npmjs.com/package/vue-form-json-schema

[29] проект: https://github.com/ajv-validator/ajv-i18n

[30] ajv-errors: https://github.com/ajv-validator/ajv-errors

[31] визуальные компоненты: https://jarvelov.gitbook.io/vue-form-json-schema/api/vue-form-json-schema/components

[32] github: https://github.com/dream2023/vue-ele-form

[33] npm: https://www.npmjs.com/package/vue-ele-form

[34] онлайн demo: https://dream2023.github.io/vue-ele-form/

[35] проект: https://github.com/dream2023/f-render

[36] онлайн: https://dream2023.gitee.io/f-render/

[37] github: https://github.com/xaboy/form-create

[38] npm: https://www.npmjs.com/package/form-create

[39] документация: http://www.form-create.com/en/v2/

[40] Репозиторий: https://github.com/mokkabonna/vue-vuelidate-jsonschema

[41] Репозиторий: https://github.com/xaboy/json2vue

[42] Репозиторий: https://github.com/openfext/vue-form-builder

[43] github: https://github.com/vxcontrol/ncform

[44] npm: https://www.npmjs.com/search?q=vxcontrol%2Fncform

[45] Источник: https://habr.com/ru/post/517142/?utm_source=habrahabr&utm_medium=rss&utm_campaign=517142