Создавайте декларативные веб-формы
Что такое формы схемы JSON?
Схема JSON помогает вам декларативно создавать и настраивать веб-формы.
Формы иногда могут быть сложными в приложениях, и вам приходится смешивать бизнес-логику с компонентами пользовательского интерфейса, особенно если вы создаете эти компоненты с нуля и есть огромные накладные расходы на их обслуживание.
Благодаря принципам разработки на основе моделей теперь вы можете абстрагироваться от всего этого в чистом формате JSON. Существует даже спецификация, определенная, так что вы покрыты поддержкой стандартов.
Давайте углубимся в некоторые основные принципы и узнаем, как можно использовать эти формы в реальных сценариях.
Схема JSON
Это ваша модель, в которой вы определяете, из чего должна состоять форма и их тип на основе их правил проверки (например, username и password должны храниться как строка типа с длиной).
Схема пользовательского интерфейса
Для данного определения модели вы можете управлять тем, как должен выглядеть пользовательский интерфейс для этого компонента. (например, для password вы хотите, чтобы вводимый текст был виджетом пароля).
Данные формы
Он содержит значения, доступные onChange событиям, которые сохраняются в formData.json и будут доступны при отправке формы.
Настройка вашей первой формы (очень простая форма входа)
Теперь давайте смонтируем этот компонент с помощью React. Я буду использовать вариант библиотека Material UI, чтобы продемонстрировать это:
Это очень простой пример для начала работы с формами на основе схемы JSON.
Вы можете найти живую площадку, чтобы увидеть, сколько сложных форм вы можете создать, а подробный пример можно найти на GitHub.
Большинство библиотек связывают вас с определенными виджетами, но эта библиотека имеет возможность расширять ее с помощью ваших существующих компонентов:
Заключение
В следующей статье я приведу пример, чтобы глубже погрузиться в преобразование существующих форм в формы на основе схемы JSON.
Чтобы немного расширить свое воображение, что, если бы вы могли сгенерировать весь свой код на основе этих форм JSON? Простота абстрагирования от JSON оставляет вам безграничные возможности.
