Представляю наиболее простой и действенный метод создания этой важной инфраструктурной единицы. Я выбрал эту тему в первую очередь потому, что она способна значительно сократить время разработки — речи о нескольких месяцах.
Поделюсь одной историей из моего опыта:
Требовалось разработать билдер процессов. Важно отметить, что эта задача была подработкой, и у меня не было возможности тратить на нее много времени.
Создать карту мне помогла библиотека (https://github.com/projectstorm/react-diagrams). Хотя я ее не рекомендую из-за сложности, она достаточно гибкая.
Однако возникла значительная проблема с формами, которые должны открываться по клику на каждый блок.
Таких форм должно было быть более 40. Мне совершенно не хотелось вручную создавать так много форм. К тому же я осознавал, что эти блоки будут точкой расширения. Если делать формы вручную, меня будут привлекать к этому проекту бесконечно.
Проанализировав формы, выяснилось, что в них есть всего около 7 повторяющихся полей.
(Текстовые поля, селекты с поиском, редактор условий, массив с другими полями и еще несколько)
В итоге я решил, чтобы конфигурация форм приходила с бэка, а я подготовлю всего 7 типовых полей. После приблизительно 40 часов разработки на MUI билдер был готов. Я задокументировал все в Storybook, показал бек-энд разработчику и отправился отдыхать.
Несмотря на кажущуюся сложность проекта, работу я выполнил достаточно быстро. Заказчик был изумлен, как невысока оказалась стоимость проекта.
Более того, хотя проект активно использовался, он не требовал правок на фронте около года!
Бек-энд разработчики просто копировали и вносили небольшие изменения в конфиги форм.
В моей практике было еще несколько примеров, когда аналогичное простое решение — создать билдер — экономило массу времени. Но это самый наглядный случай.
Это пробный урок. Оформите подписку, чтобы получить доступ ко всем материалам курса. Премиум
Меня зовут Евгений Паромов. Я Senior Front-end разработчик. 5 лет разрабатываю на React. Люблю много работать и за это время повидал около 20 проектов. 2 года использую FSD во всех проектах. Использовал FSD с React, Vue, React-query, Redux, Mobx, Next. Есть опыт миграции большого легаси на FSD (7 лет разработки нескольких команд). Есть опыт разработки проектов на FSD с нуля
Евгений Паромов
Микрофронтенды - современный подход к разработке, который помогает масштабировать приложения, повышать гибкость и ускорять работу команд. На этом воркшопе вы разберётесь, зачем нужны микрофронты и какие задачи они решают в реальных проектах.Мы пошагово разберём, как построить микрофронты с использованием Vite Module Federation, как организовать роутинг и обеспечить обратную совместимость. Вы узнаете, как эффективно переиспользовать код между моду
