React.js. Новая библиотека для создания форм на react
Добрый день, меня зовут Николай!
Как много времени вы тратите на создание сложных форм из проекта в проект?
Думаю этот вопрос актуален для многих разработчиков React.
Библиотека formMOD создана чтобы сократить время разработки форм, а так же для универсальности и гибкости.
Это бесплатная библиотека (MIT лицензия)
На момент написания статьи это полностью готовый проект, с документацией и система уже используется в приложениях.
Я постараюсь описать все возможности библиотеки максимально кратко. Все примеры и подробное описание есть в документации.
Ссылка на документацию тут:
http://doc.formmod.org/
Ссылка на исходный код github:
https://github.com/nickorsk2017/formMOD
ЭТА СТАТЬЯ КРАТКО ОПИСЫВАЕТ ОСНОВНЫЕ ВОЗМОЖНОСТИ БИБЛИОТЕКИ.
РЕКОМЕНДУЕТСЯ ДЛЯ ПРОСМОТРА PC / LAPTOP ВЕРСИЯ.
В данный момент проект находится на стадии развития сообщества.То есть библиотека готова и сейчас нужно чтобы о ней узнали люди.
Сейчас мы только начали развивать сообщество - поддержите нас поставив звезду на GitHub - это очень важно!!!
Поехали!
Пример
Для начала посмотрим пример формы, которая сделана с помощью библиотеки.
На данный момент система позволяет
1. Использовать несколько правил валидаций на одно поле формы.
2. Использовать опциональные поля
3. Использовать групповые поля (поле хобби)
4. Использовать форму для режима просмотра, редактирования
5. И другие решения (см документацию)
Данные
1. Схема. Все данные и настройки формы хранятся в схеме, она же является состоянием (state).
2. Абстрактная модель данных.Это означает что библиотека ничего не знает о вашей системе, инпутах, store, бизнес логике. Это дает максимальную гибкость и охват, так как не создает лишних зависимостей.
Валидация
Из коробки доступные следующие правила:
empty, email, max, min.
Но вы так же можете писать свои собственные (custom).
Смотрите документацию.
UI логика.
- Basic inputs - flow для создания простых компонетов. Тут все просто - текстовые поля, кнопочки и тд.
Документация:
https://doc.formmod.org/#/basic/
- Optional inputs. Это UI компоненты формы которые зависят от значений других полей.Например, если вы ставите checkbox, то появляется еще одно поле.
Система работает на хуке visibilities в схеме, где на входе текущее значение формы, а на выходе boolean значение которое активирует поле или нет.
Документация:
https://doc.formmod.org/#/optional/
- Group inputs. Можно добавлять поля форм и удалять на лету. То есть это список полей формы со значениями.
Документация:
https://doc.formmod.org/#/group/
- Combined inputs. Это составные компоненты состоящие из других UI компонентов внутри себя. Так как система formMOD абстрактна, вы можете использовать ее не только в форме, но и внутри UI компонентов.
Документация:
https://doc.formmod.org/#/combined/
CRUD
Система позволяет использовать один компонент формы для режима просмотра, редактирования или создания данных.
Это экономит время и снижает количество багов ведь у вас один компонент для всего.
Режим редактирования:
https://doc.formmod.org/#/editmode/
Режим просмотра:
https://doc.formmod.org/#/viewmode/
Gallery UI
Есть набор готовых UI компонентов, их можно скачать, модифицировать по вашему усмотрению. Cписок ниже, но будут добавляться новые компоненты.
Рекомендации
В документации вы можете узнать как правильно работать с данными, store и так далее.
1. Data конверторы
https://doc.formmod.org/#/recommendations/converters/
2. Работа со store
https://doc.formmod.org/#/recommendations/stores/
Helpers
FormMOD использует внутри себя утилиты. Эти утилиты могут быть полезны и для вашей работы. Это избавляет от лишних зависимостей и делает работу проще.
Смотрите раздел документации
https://doc.formmod.org/#/helpers/
Smart inputs ( экперимент)
В плане эксперимента есть возможность создавать UI компоненты через специальный ссылочный объект.
Это сокращает размер кода и делает работу с UI инпутами более удобными.
https://doc.formmod.org/#/smart-introduction/
Далее
Все примеры и код описаны в документации, не буду дублировать чтобы не делать статью слишком объемной.Нам очень нужна ваша поддержка, ставьте звезду на githab тут:
https://github.com/nickorsk2017/formMOD
И желаем всем вам Мира и удачи!!!
Не вижу crud таблицы. 25 лет назад на десктопе уже были развитые библиотеки для табличных форм. Почему в вебе этого нет в открытом доступе ?
Это формы, а не таблицы.