Выбор Генератора Форм Для Vue.js

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



Введение Наверное, каждый знает, что любой выбор начинается с постановки целей, постановки задач и формирования списка требований к объектам выбора.

Данная статья описывает функционал готовых решений и не преследует цели ответить на все вопросы в рамках данной темы.

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

Можно выделить следующие ситуации, когда такой подход оправдан:

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

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

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

Несколько слов, прежде чем перейти к списку кандидатов.

Есть более достойные проекты для других фреймворков, например, React или Angular, но изначально выбор пал на Vue.js, из-за простоты встраивания и минимализма, поэтому автор рассматривает только этот набор библиотек, а мы оставим остальные рамки выходят за скобки данной статьи.

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

Кандидаты

vue-json-схема

Описание

• Исходный репозиторий (2.0.0-альфа.

  2): github И НПМ ;

• Форк проекта (для устаревшей версии 1.1.1): github И НПМ ;
• Реализация темы для Element UI: github , демо .

Минусы

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

плюсы

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

нкформ

Описание

• Репозиторий: github И НПМ ;
• Реализация темы для Element UI: github И НПМ ;
• Примеры использование элементов управления пользовательского интерфейса;
• Демо-проект ;
• Генератор форм из документа JSON;
• Визуальный редактор создание форм.

Все комментарии в коде на китайском языке, что затрудняет понимание.

Имеет встроенный механизм локализации.

Основная часть проекта покрыта модульными и функциональными тестами в Cypress. Библиотека использует собственные ключи, которые отличаются от исходной схемы JSON, но не нарушают ее.

Минусы

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

плюсы

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

vue-форм-генератор

Описание

• Репозиторий: github И НПМ ;
• Реализация темы для Element UI: github И НПМ ;
• Форк тем для Element UI с небольшими изменениями: github И НПМ ;
• Пример используя элементы управления пользовательского интерфейса и репозиторий пример, vue-файл ;
• Детальный анализ использование и настройка vue-form-generator.

Большое количество возможностей настройки элементов, но нет простых способов локализации.

Минусы

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

плюсы

• Популярность проекта;
• Большое количество расширений;
• Поддержка элемента пользовательского интерфейса.

vue-форма-json-схема

Описание

• Репозиторий: github И НПМ

Позволяет добавлять свои собственные визуальные компоненты , используемый в uiSchema.

Минусы

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

Плюсы

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

vue-ele-form

Описание

• Репозиторий: github И НПМ .

Подарок онлайн-демо И проект для визуального создания форм, В сети .

Минусы

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

плюсы

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

форма-создать

Описание

• Репозиторий: github И НПМ .

Формы можно настроить с помощью JSON, но при этом используется собственный формат, отличный от исходной схемы JSON. Существует тема для Element UI.

Минусы

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

плюсы

• Есть возможность расширения и сторонних компонентов, таких как: Текстовый, JSON, Code и Markdown редакторы;
• Поддержка элемента пользовательского интерфейса.

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

vue-vuelidate-jsonschema

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

json2vue

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

нет валидаторов, локализации и т.п.

vue-форм-строитель

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

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

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

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

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

Если ваш выбор, как и выбор автора, — ncform, то вы можете использовать этот форк: github И НПМ .

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

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

Теги: #vue.js #vue #схема json #Элемент #генератор форм

• Подтекст

  19 Oct, 24

• Что Вам Нужно Знать Прежде Чем Начать Работу На Ebay.

  19 Oct, 24

• Новый Формат Документа — Cdf (Computable Document Format): Альтернатива Pdf?

  19 Oct, 24

• Небольшой, Но Полезный Скрипт Для Пакетной Обработки Фотографий С Помощью Imagemagic.

  19 Oct, 24

• Сибирь – Следующая Силиконовая Долина

  19 Oct, 24

• Я Потратил 3 Месяца, Пытаясь Найти Работу После Лагеря По Программированию, И Вот Что Я Узнал

  19 Oct, 24

• Анонсирована Новая Версия Mongodb: Будет Обновление Безопасности И Свежие Инструменты

  19 Oct, 24

• Что Вы Думаете О Рекламной Кампании Mediamarkt («Хрю-Хрю-Хрю-Хрю, Я Люблю Экономить»)?

  19 Oct, 24

• Opera Ice: Новый Браузер Для Мобильных Платформ На Webkit

  19 Oct, 24

• Как Linkedin Локализует На 19 Языков За 1 Ночь

  19 Oct, 24