- PVSM.RU - https://www.pvsm.ru -
Уважаемый хабрачитатель, хочу поделиться с тобой опытом в выборе и использовании генераторов форм для Vue.js.
Пожалуй, известно каждому, что любой выбор начинается с фиксации целей, постановки задач и формирования списка требований к объектам выбора. Данная статья описывает функциональные возможности готовых решений и не призвана ответить на все вопросы в рамках данной темы.
Если вы только погружаетесь в эту предметную область, то первое, что вам необходимо сделать — это оценить применимость данного подхода к вашей разработке. Можно выделить следующие ситуации, когда этот подход оправдает себя:
Далее необходимо определиться со списком требований к библиотеке генератора форм (данный список может отличаться от ваших требований):
Требования из данного списка не выглядят какими-то невыполнимыми, но дьявол кроется в деталях и, для того чтобы сделать осознанный выбор, не достаточно просто прочитать описание на сайте разработчика или README проекта. Основные проблемы можно обнаружить только при решении практических задач, а данная статья призвана облегчить жизнь тем, что автор уже прошёл по ровно уложенным граблям и готов поделиться с вами своими объективными и субъективными заключениями.
Несколько слов перед тем, как перейти к списку кандидатов. Под другие фреймворки, например, React или Angular, есть более достойные проекты, но изначально выбор пал на Vue.js, в силу его простоты встраивания и минималистичности, поэтому автор рассматривает только данный набор библиотек, а остальные фреймворки оставим за скобками этой статьи. Element [1] — очень функциональный UI kit, предоставляющий практически все примитивы для быстрой разработки веб-приложений и требующий минимального опыта от разработчика, что идеально подходит для людей, переходящих в веб-разработку из других языков программирования.
Интересный проект, имеет ~360 звёзд на github, но заброшен с 2018 года, хорошо интегрирован с Element UI, позволяет расширять возможности основной библиотеки, добавляя свои собственные типы объектов.
Китайский проект, имеет ~900 звёзд на github и развивается неспешно. Все комментарии в коде на китайском языке, что усложняет понимание. Имеет встроенный механизм локализации. Основная часть проекта покрыта Unit и функциональными тестами на cypress. В библиотеке используются проприетарные ключи, отступающие от оригинальной JSON schema, но при этом не ломающие её.
Самый популярный проект по количеству звёзд на github ~2500, имеет хорошую документацию [26] на английском языке. Большое количество конфигурационных возможностей элементов, но отсутствуют простые способы для локализации.
Библиотека использует классические аннотации JSON schema для валидации, но для отрисовки UI требует отдельного объекта, содержащего UI конфигурацию — uiSchema. Поддерживает локализацию для ошибок валидации через проект [29] и другие плагины для ajv, например, ajv-errors [30]. Позволяет добавлять свои визуальные компоненты [31], используемые в uiSchema.
Китайский проект с относительно большим количеством звёзд на github ~530, но с полностью отсутствующей документацией на английском языке. Присутствует онлайн demo [34] и проект [35] для визуального создания форм, онлайн [36].
Китайский проект с ~2100 звёздочек на github, но при этом есть минимальная документация [39] на английском языке. Формы можно конфигурировать через JSON, но для этого используется собственный формат, отличный от оригинальной JSON schema. Присутствует тема для Element UI.
Имея формы, собранные во Vue компонент, можно проверять модель по заранее подготовленной схеме и получать ошибки от валидации при прямом вызове или копить state в объекте, но при этом отсутствует возможность генерации форм.
Проект создан для конфигурирования форм с помощью JSON, но ценность этого сомнительна, т.к. там нет валидаторов, локализации и т.д.
Очередной китайский проект по созданию форм из собственного представления, поддерживает тему с 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
Нажмите здесь для печати.