# Feature-Sliced Design ## ru - [Примеры](/examples.md): Список сайтов, сделанных людьми с FSD - [🧭 Навигация](/nav.md): Feature-Sliced Design Navigation help page - [Версии Feature-Sliced Design](/versions.md): Feature-Sliced Design Versions page listing all documented site versions - [💫 Community](/community.md): Community resources, additional materials - [Team](/community/team.md): Core-team - [Альтернативы](/docs/about/alternatives.md): История архитектурных подходов - [Миссия](/docs/about/mission.md): Здесь описаны цели и ограничения применимости методологии, которыми мы руководствуемся при разработке методологии - [Мотивация](/docs/about/motivation.md): Главная идея Feature-Sliced Design - облегчить и удешевить разработку комплексных и развивающихся проектов, на основании объединения результатов исследований, обсуждения опыта разного рода широкого круга разработчиков. - [Продвижение в компании](/docs/about/promote/for-company.md): Нужна ли методология проекту и компании? - [Продвижение в команде](/docs/about/promote/for-team.md): - Онбординг новых людей - [Аспекты интеграции](/docs/about/promote/integration.md): Что получаем в конечном счете? - [Частичное применение](/docs/about/promote/partial-application.md): Как частично применять методологию? Имеет ли смысл? Что если игнорировать? - [Абстракции](/docs/about/understanding/abstractions.md): Закон дырявых абстракций - [Об архитектуре](/docs/about/understanding/architecture.md): Проблемы - [Типы знаний в проекте](/docs/about/understanding/knowledge-types.md): В любом проекте можно выделить следующие "типы знаний": - [Нейминг](/docs/about/understanding/naming.md): У разных разработчиков различный опыт и контекст, что может привести к недопониманию в команде, когда одни и те же сущности называются по-разному. Например: - [О понимании потребностей и о формулировке задач](/docs/about/understanding/needs-driven.md): — Не получается сформулировать цель, которую будет решать новая фича? А может проблема в том, что сама задача не сформулирована? **Смысл ещё и в том, чтобы методология помогла вытащить наружу проблемное определение задач и целей** - [Сигналы архитектуры](/docs/about/understanding/signals.md): Если есть ограничение со стороны архитектуры - значит на то есть явные причины, и последствия, если их игнорировать - [Рекомендации по брендингу](/docs/branding.md): Визуальная айдентика FSD основана на его ключевых концепциях: Layered, Sliced self-contained parts, Parts & Compose, Segmented. - [Памятка по декомпозиции](/docs/get-started/cheatsheet.md): Используйте её как быстрый справочник, когда вы решаете, как разбить ваш интерфейс по слоям. Ниже также доступна PDF-версия, чтобы вы могли распечатать её и держать под подушкой. - [FAQ](/docs/get-started/faq.md): Свой вопрос можно задать в Telegram-чате, Discord-сообществе и GitHub Discussions. - [Обзор](/docs/get-started/overview.md): Feature-Sliced Design (FSD) — это архитектурная методология для проектирования фронтенд-приложений. Проще говоря, это набор правил и соглашений по организации кода. Главная цель этой методологии — сделать проект понятнее и стабильнее в условиях постоянно меняющихся бизнес-требований. - [Туториал](/docs/get-started/tutorial.md): Часть 1. На бумаге - [Обработка API-запросов](/docs/guides/examples/api-requests.md): handling-api-requests} - [Авторизация](/docs/guides/examples/auth.md): В общих чертах авторизация состоит из следующих этапов: - [Автокомплит](/docs/guides/examples/autocompleted.md): Про декомпозицию по слоям - [Browser API](/docs/guides/examples/browser-api.md): Про работу с Browser API: localStorage, audioApi, bluetoothAPI и т.п. - [CMS](/docs/guides/examples/cms.md): Фичи бывают разные - [Entities](/docs/guides/examples/entities.md): entities layer in Feature-Sliced Design encapsulates core business logic, similar to entities in backend applications. However, its use in frontend applications is not always necessary and should be approached with caution to avoid overcomplicating the codebase. - [Обратная связь](/docs/guides/examples/feedback.md): Errors, Alerts, Notifications, ... - [i18n](/docs/guides/examples/i18n.md): Куда положить? Как с этим работать? - [Метрика](/docs/guides/examples/metric.md): Про способы инициализировать метрики в приложении - [Монорепозитории](/docs/guides/examples/monorepo.md): Про применимость для монорепозиториев, про bff, про микроаппы - [Лейауты страниц](/docs/guides/examples/page-layout.md): Это руководство рассматривает абстракцию лейаута страницы — когда несколько страниц имеют одинаковую структуру, отличаясь только основным содержимым. - [Desktop/Touch платформы](/docs/guides/examples/platforms.md): Про применение методологии для desktop/touch - [SSR](/docs/guides/examples/ssr.md): Про реализацию SSR с применением методологии - [Темизация](/docs/guides/examples/theme.md): Куда положить работу с темой и палитрой? - [Типы](/docs/guides/examples/types.md): В этом руководстве рассматриваются типы данных из типизированных языков, таких как TypeScript, и где они вписываются в FSD. - [White Labels](/docs/guides/examples/white-labels.md): Figma, brand uikit, templates, адаптируемость к брендам - [Кросс-импорты](/docs/guides/issues/cross-imports.md): Кросс-импорты появляются тогда, когда слой/абстракция начинает брать слишком много ответственности, чем должна. Именно поэтому методология выделяет новые слои, которые позволяют расцепить эти кросс-импорты - [Десегментация](/docs/guides/issues/desegmented.md): Ситуация - [Роутинг](/docs/guides/issues/routes.md): Ситуация - [Миграция с кастомной архитектуры](/docs/guides/migration/from-custom.md): Это руководство описывает подход, который может быть полезен при миграции с кастомной самодельной архитектуры на Feature-Sliced Design. - [Миграция с v1](/docs/guides/migration/from-v1.md): Зачем v2? - [Миграция с v2.0 на v2.1](/docs/guides/migration/from-v2-0.md): Основным изменением в v2.1 является новая ментальная модель разложения интерфейса — сначала страницы. - [Использование с Electron](/docs/guides/tech/with-electron.md): Electron-приложения имеют особую архитектуру, состоящую из нескольких процессов с разными ответственностями. Применение FSD в таком контексте требует адаптации структуры под специфику Electron. - [Использование с Next.js](/docs/guides/tech/with-nextjs.md): FSD совместим с Next.js как в варианте App Router, так и в варианте Pages Router, если устранить главный конфликт — папки app и pages. - [Использование с NuxtJS](/docs/guides/tech/with-nuxtjs.md): В NuxtJS проекте возможно реализовать FSD, однако возникают конфликты из-за различий между требованиями к структуре проекта NuxtJS и принципами FSD: - [Использование с React Query](/docs/guides/tech/with-react-query.md): Проблема «куда положить ключи» - [Использование с SvelteKit](/docs/guides/tech/with-sveltekit.md): В SvelteKit проекте возможно реализовать FSD, однако возникают конфликты из-за различий между требованиями к структуре проекта SvelteKit и принципами FSD: - [Docs for LLMs](/docs/llms.md): This page provides links and guidance for LLM crawlers. - [Слои](/docs/reference/layers.md): Слои - это первый уровень организационной иерархии в Feature-Sliced Design. Их цель - разделить код на основе того, сколько ответственности ему требуется и от скольких других модулей в приложении он зависит. Каждый слой несет особое семантическое значение, чтобы помочь вам определить, сколько ответственности следует выделить вашему коду. - [Публичный API](/docs/reference/public-api.md): Публичный API — это контракт между группой модулей, например, слайсом, и кодом, который его использует. Он также действует как ворота, разрешая доступ только к определенным объектам и только через этот публичный API. - [Слайсы и сегменты](/docs/reference/slices-segments.md): Слайсы - [Feature-Sliced Design](/index.md): Architectural methodology for frontend projects