Как я превратил хаотичные формы во Vue в типизированную модель данных (AdaptForm)

В сфере искусственного интеллекта произошло заметное событие. OsStaSa 11 минут назад Как я превратил хаотичные формы во Vue в типизированную модель данных (AdaptForm) Средний 6 мин 160 JavaScript * TypeScript * VueJS * Кейс Из песочницы История о том, как задача «подсветить обязательные поля» превратилась в полноценную TypeScript-библиотеку с 500+ скачиваниями в неделю. ВведениеНа одном проекте нам необходимо было использовать много форм для ввода данных от пользователей. Каждая форма собиралась отдельно, максимум что мы использовали - это миксины для валидации данных и всё.

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

Технические детали

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

Так появилась первая версия библиотеки, которую я позже назвал AdaptForm. Версия 1: JavaScript, Django-style и первые граблиТак как я Fullstack-разработчик и мой основной язык это питон, то за основу форм я взял формы Django. Мне показалось, что они максимально подходили под то что мне было нужно.

class BalanceForm(forms. Form): amount = forms. DecimalField(label='Сумма пополнения', min_value=0.

Отраслевые последствия

01, max_digits=12, decimal_places=2)Первая версия AdaptForm выглядела похоже:const form = new Form({ phone: new PhoneField(), login: new LoginField(), email: new EmailField(), name: new NameField(), surname: new NameField(), gender: new SelectField(), birthdate: new DateField(), phone_friend: new PhoneField(). kwargs({is_required: false}), from_where_category_id: new SelectField(), }),Библиотека решала задачу: поля формы сами знали как валидировать данные, в каком виде отправлять на сервер и какие ошибки допустил пользователь при вводе данных, а форма просто собирала все эти поля в кучу и могла массово проводить проверки и получать данные для отправки на сервер. Но было ощущение, что чего-то не хватает.

Постоянно нужно было дописывать, менять функционал, так как не всегда было удобно использовать то что есть, а расширение превращалось в ад. Так или иначе, библиотека работала и я начал использовать её в других проектах. Но было не удобно переносить весь код библиотеки в ручную, и я решил залить её на npm, чтобы пользоваться самому и вдруг кому ещё понадобится.

Провальная попытка: TypeScript, но непонимание сути библиотекиПеред публикацией я решил доработать библиотеку, перенеся её на TypeScript. Я не понимал что хочу от библиотеки.

Событие, по словам экспертов, усилит конкуренцию в сфере ИИ.