Как построить расширяемую архитектуру Frontend-приложения | Co-location, Modules и FSD

Как организовать frontend-проект так, чтобы при создании новой части приложения было понятно, где должна находиться её логика? В этом видео я разбираю практический подход к архитектуре React и Next.js приложений, в котором расположение кода определяется не только его типом, но и тем, к какой части системы он относится и кто должен им владеть. На простом примере посмотрим, почему классическая структура из components, hooks, helpers, types и utils со временем перестаёт быть достаточной. Когда одна часть продукта начинает состоять из компонентов, моделей, типов, констант и собственной логики, её код постепенно оказывается разбросан по всему проекту. Для решения этой проблемы мы объединим несколько архитектурных принципов: co-location, доменную модульность и отдельные идеи Feature-Sliced Design. Затем применим их в реальном проекте и разделим архитектуру между core, features, modules, app и глобальными папками. Отдельно разберём, чем самостоятельная feature отличается от обычного helper или util, почему не весь переиспользуемый код должен попадать в features и когда логике лучше вообще оставаться рядом с конкретной страницей. Главная идея проста: место кода должно определяться не только тем, чем он является, но и тем, кто должен им владеть. Project: https://github.com/eugenezalens/cache-routes-independence Instagram: https://www.instagram.com/eugenezalens/ LinkedIn: https://www.linkedin.com/in/eugenezalens/ Главы 00:00 Вступление 01:20 Введение 01:50 Проблема 03:21 Решение 04:48 Рефакторинг и применение 06:52 Заключение #FrontendArchitecture #React #NextJS