Разработка форм в React действительно утомительна.

Действительно. Утомительно.

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

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

Я хотел сделать больше, чем просто разработать еще одну библиотеку форм. Я хотел предложить, возможно, некое «технологическое мировоззрение», которое сообщество могло бы обсудить и поспорить. Если я могу процитировать xkcd:

Библиотека

Дамы и господа, представляю форму:



parkroolucas/uniformed
uniformed – мы очень стараемся определить нестандартный стандарт для форм React.github.com



Вы можете просмотреть README для руководства по началу работы и некоторых примеров кода. Однако эта библиотека все еще находится на очень ранней стадии, и я хотел обрисовать в общих чертах принципы ее разработки, а также аргументировать, почему я считаю такую ​​библиотеку необходимой.

Принципы

  1. Кодекс либертарианства; стиль разработки библиотеки, предполагающий лишь минимальное вмешательство и вмешательство во время ее реализации. При весе всего 1,08 КБ в сжатом виде весь смысл униформы в том, чтобы сохранить всю концепцию обработки форм действительно настраиваемой и расширяемой, оставаясь при этом мощным и кратким в своем синтаксисе. Я расскажу об этом подробнее чуть позже.
  2. Поток данных; сохранить реальность без необходимости расширяться до множества компонентов или отвратительно длинных полос прокрутки. Мы все знаем, на что это похоже; одна из первых вещей, которые мы все сделали, когда начали работать с React, — это возня с формой и с состоянием, окружающим форму. Именно тогда мы все поняли, как это больно; вам либо приходится иметь дело с полосами прокрутки длиной в километр (я из низов), либо вам приходится разбивать форму на отдельные компоненты, обычно по одному для каждого ввода, с отвратительным объемом управления состоянием, работающим по всей форме. С униформой я понял, что управление потоком данных и контроль — это единственное, что действительно нуждается в «библиотечении» в библиотеке форм React, поэтому это все, что я сделал. Я действительно сосредоточился на том, чтобы сделать поток данных в форме React максимально простым и интуитивно понятным, например:

Тада! *стрекотание сверчков* Дай угадаю. Слишком просто? Не впечатляет? Хорошо позвольте мне предложить этот вопрос; почему это должно быть совсем не просто? Почему такая фундаментальная диаграмма управления формой должна включать различные системы для управления: чистотой ввода? проверка формы? состояние отправки? Я твердо верю, что они никоим образом не являются фундаментальными для формы. Форма в самом фундаментальном смысле — это основной способ, с помощью которого программа получает семантический ввод от пользователя. Вот и все; больше ничего.

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

Последние мысли

Тем из вас, кто прочитал весь отрывок, спасибо! Я надеюсь, что поделился парой мыслей о том, как, по моему мнению, можно улучшить формы React, и надеюсь, что вы дадите моему решению — униформе (https://github.com/parkroolucas/uniformed) — справедливое одобрение. .