Как билдер форм всех спас)



В это воскресенье прошёл наш первый воркшоп "Создание форм билдера" в сообществе.

Где я показал самый простой и эффективный способ создания этой базовой инфраструктурной штуки. (Такие воркшопы, но по разным темам, будут проходить где-то раз в неделю)



А выбрал я эту тему для начала по банальной причине: эта штука может сэкономить месяцы разработки





Вот одна показательная история из моего опыта:



Нужно было сделать вот такой билдер процессов, как на картинке. Что важно: это была подработка, и я не мог потратить на него слишком много времени.



Если сделать карту мне помогла библа (https://github.com/projectstorm/react-diagrams). Кстати, не советую её брать — крайне сложная, хотя и гибкая шо пипец



То вот с формами, которые окрываются по клику на каждый блок, встала большая проблема.



Их должно было быть 40+ разных штук.



Меня вообще не впирало сидеть и делать 40 форм. Плюс я понимал, что эти блоки — точка расширения. И если делать руками формы, то меня будут трясти по этому проекту всю жизнь.



И, проанализировав формы, оказалось, что среди них повторяются всего где-то 7 полей.

(Текстовые поля, селекты с поиском, редактор условий, массив с другими полями и еще несколько)



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



После часов 40 разработки на mui — билдер был готов. Я сделал в storybook, показал бекеру всё и пошёл отдыхать



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



Более того, проект, хоть им активно и пользовались, не требовал правок на фронте где-то год!!!

Бекеры просто копипастили конфиги форм и вносили небольшие правки.



В моём опыте были ещё случаи, когда простое решение — создать билдер, экономило тонну времени, но это самый показательный пример



(Если вам интересны такие штуки — залетайте в сообщество. Через неделю мы проведём вторую часть воркшопа, где подключим форму к беку, обработаем серверные и клиентские ошибки, добавим селект с автокомплитом)



👉🏻 Подробнее о сообществе