Documentation

Github Feature-Sliced Design

Telegram

Twitter

Описание

Представьте что ваше приложение это живой органзим. Любой организм подвержен старению. Чтобы сгладить углы мы должны ухаживать за ним. Уход должен быть комплексным. В мире разработки абсолютно так же. С годами наши проекты стареют. В мире фронтенда нет единого подхода к организации структуры проекта. Мало реальных примеров с жизнеспособной архитектурой. Каждый проект делают по внутренним стандартам компании и в итоге каждый раз надо вникать в архитектуру. К тому же, чаще всего она затачивается под конкретный фреймворк или библиотеку. Последствия не верного выбора архитектуры в проекте обычно выражаются в росте хаоса, беспорядка,как следствие - неустойчивость к изменениям. Я постараюсь рассказать вам про один стандартизированный подход - Feature-Sliced Design. Но перед этим изучим популярные ошибки и подходы к их решению.

Презентация

На выступлении немного стили поехали в некоторых местах, тут актуальные пропорции

Преза

Материалы

Доклады по FSD

Я бы очень советовал посмотреть этот доклад:

Доклад: FSD — Архитектура Frontend проектов / Илья Азин

Презентация

Более свежая презентация, но без видосика, с закрытого выступления, Илья разрешил 👀

Интересное по FSD

Awesome Resources

Eslint-config, CRA-template, CLI и многое полезеное по FSD

Про разделение хуков по смыслу

Мифический слой Processes

Про shared/api

Еще про shared/api

Про shared segments, assets и тд

Немного про UI

Про модалки

Про React hooks

Где располагать Layout (Header/Footer/...)

Немного про Redux

Еще про Redux

Про бизнес - сущность

Entities vs Features vs ...

Формулировка определения "Feature"

Еще немного про Слои

Интересное про Public API

Public API, Антихрупкость или все же Усточивость

Про side effects free для Webpack, для Public API

FSD Angular разбор

FSD Vue разбор

FSD NextJs разбор

Про импорты

Про тришейкинг ре-экспортов, Side effects free

model vs store vs ...

Decompose Github Decompose Twitter

Про подходы к архитектуре (в приоритете с оглядкой на Frontend)

MV* - ui патерны

Чистая архитектура на фронтенде

Еще немного про чистую архитектуру

Atomic Design

Atomic Design: What is it and why is it important in 2022?

Vertical Slices

Еще про Vertical Slices

Solid OCP

Feature Driven Architecture - Oleg Isonen

Live-coding: Чистая архитектура во фронтенде / Александр Беспоясов

Примеры

Структура с Atomic Design

Cardbox

Github-client

Sharead-frontend

Effector real world

Еще примеры из доки

Про миграцию/рефакторинг

Доклад Ильи Климова про бесконечный рефакторинг

Тред Бонус

С легаси

Что пригодится

FSD Eslint - config (Beta)

Webpack Circular Dependency Plugin - Судя по ишью, не подойдет для 5 версии вебпака
Dpdm - Статический анализ зависимостей

Eslint no-cycle

Dependency Cruiser

eslint-plugin-boundaries

На выбор по импорт сортировке:

import-sort
sort-imports

Plant UML:

WS

VSCode

Остальное

Youtube Feature-Sliced Design

Нужна ли методология?

Про Feature Slices, хорошо подойдёт для начала

Про декомпозицию и примеры

Про Isolation

Структура приложения от Sova

Что такое бизнес логика

Почему utils & helpers это свалка

Структура моделей Effector

Tight Coupling Vs Loose Coupling

Low Coupling and High Cohesion

Отдельная благодарность организаторам, кор-тиме FSD за консультации, колежкам/друзьям за оценку презы и конечно WE ARE FORMOSHLEPLS