Feature-Sliced Design
Продолжительность
6 ч 13 мин
Категория
Другое (Frontend)
Количество уроков
62 Видео
Дата добавления
18 июн. 2025 г., 18:48
Язык
Русский
Этот курс будет полезен для frontend разработчиков с любым уровнем навыков. На практических занятиях мы рассмотрим, как применить FSD не только с React, но и с Next, Vue, Nuxt, Angular, а также Svelte.
Начнем с изучения, что такое FSD и как он способствует лучшей организации наших проектов, а также разберем понятия слоев, слайсов и сегментов. В дальнейшем мы поэтапно изучим каждый слой на практике, создавая основу для крупного проекта.
Также, мы познакомимся с инструментами, которые упрощают структурирование проектов по FSD и управление изменениями. Будем работать с макетами для тренировки декомпозиции, размечая различные слои. В заключительных этапах курса мы исследуем, как внедрять FSD совместно с такими фреймворками, как Next, Vue, Nuxt, Angular и Svelte. Курс ориентирован на практику, так как после изучения каждого слоя или сегмента мы сразу же будем применять знания, разрабатывая приложение.
По окончании курса вы научитесь:
- Создавать удобную и гибкую архитектуру проекта
- Писать код, который легко можно использовать повторно
- Эффективно распределять задачи между компонентами
- Проводить миграцию проектов на FSD
- Избегать циклических зависимостей в коде
- Внедрять FSD в проекты независимо от фреймворка
- Корректно разделять проект на уровни
- Правильно определять доменные области в проекте
- Применять инструменты FSD для поддержания структуры
Посмотреть больше
Это пробный урок. Оформите подписку, чтобы получить доступ ко всем материалам курса. Премиум
-
Урок 1. 00:05:001.1 Почему FSD (Введение)
-
Урок 2. 00:04:481.2 Как устроен курс
-
Урок 3. 00:01:591.3 Обзор проекта
-
Урок 4. 00:01:081.4 Проект домашних заданий
-
Урок 5. 00:06:011.5 AI и тренажёры
-
Урок 6. 00:03:291.6 Стажировка в студии
-
Урок 7. 00:01:462.1 Настройка окружения (Настройка)
-
Урок 8. 00:01:502.2 Настройка VSCode
-
Урок 9. 00:03:382.3 Установка Node
-
Урок 10. 00:15:102.4 О работе NVM
-
Урок 11. 00:03:192.5 Figma компоненты
-
Урок 12. 00:17:312.6 Домашнее задание AI
-
Урок 13. 00:05:453.1 Что такое FSD (Введение FSD)
-
Урок 14. 00:09:403.2 Layers
-
Урок 15. 00:12:563.3 Slices
-
Урок 16. 00:06:443.4 Segments
-
Урок 17. 00:03:214.1 О слое App (Pages и App)
-
Урок 18. 00:05:124.2 Старт проекта
-
Урок 19. 00:06:174.3 Подготовка слоя App
-
Урок 20. 00:04:544.4 Обзор проекта
-
Урок 21. 00:02:444.5 О слое Pages
-
Урок 22. 00:04:294.6 Структура роутинга
-
Урок 23. 00:07:434.7 Выделение slice
-
Урок 24. 00:11:074.8 Создание первой страницы
-
Урок 25. 00:05:504.9 Добавление стилей
-
Урок 26. 00:05:294.10 Layout
-
Урок 27. 00:07:235.1 О слое (Shared)
-
Урок 28. 00:07:575.2 Константы маршрутов
-
Урок 29. 00:05:155.3 Конфигурации
-
Урок 30. 00:07:005.4 API клиент
-
Урок 31. 00:04:195.5 Библиотека
-
Урок 32. 00:06:165.6 UI компоненты
-
Урок 33. 00:02:085.7 Импорты в Shared
-
Урок 34. 00:07:435.8 Что ниже Shared
-
Урок 35. 00:06:486.1 Steiger (Инструменты FSD)
-
Урок 36. 00:03:106.2 Path Alias
-
Урок 37. 00:04:246.3 Tree-shaking
-
Урок 38. 00:04:576.4 CLI
-
Урок 39. 00:02:486.5 Расширения
-
Урок 40. 00:04:327.1 О слое (Entities)
-
Урок 41. 00:03:197.2 Создание slices
-
Урок 42. 00:10:377.3 State managment
-
Урок 43. 00:08:167.4 API
-
Урок 44. 00:07:297.5 UI компоненты
-
Урок 45. 00:07:517.6 Упражнение - Выделение entities
-
Урок 46. 00:04:507.7 Кросс-импорты
-
Урок 47. 00:04:158.1 О слое (Features)
-
Урок 48. 00:09:418.2 Примеры feature
-
Урок 49. 00:04:178.3 Специфичность в СSS
-
Урок 50. 00:08:158.4 Упражнение - Выделение features
-
Урок 51. 00:09:218.5 Упражнение - Разметка страниц
-
Урок 52. 00:02:379.1 О слое (Widgets)
-
Урок 53. 00:06:249.2 Примеры Widget
-
Урок 54. 00:02:409.3 Processes
-
Урок 55. 00:06:089.4 Упражнение - Выделение виджетов
-
Урок 56. 00:11:339.5 Упражнение - Финал декомпозиции
-
Урок 57. 00:07:4010.1 Next (Работа с фреймворками)
-
Урок 58. 00:04:5410.2 Vue
-
Урок 59. 00:06:0610.3 Nuxt
-
Урок 60. 00:05:4210.4 Angular
-
Урок 61. 00:04:4810.5 Sveltkit
-
Урок 62. 00:04:2210.6 Миграция проектов
Комментарии
Другие материалы в этой категории
Главный принцип - делать максимально изолированные компоненты, все что они должны уметь - принимать параметры через пропсы, и отдавать данные через события. Вся логика в сторе или в композаблах(vue), выполнять логику только на верхнем уровне - в странице. Если вызываешь апишку непосредственно в форме поиска - застрелись, если в компоненте кнопки подключил стор - спрыгни со скалы. И не нужна никакая строгая организация папок, которая только путаницу вводит. Старая добрая папка components - все что нужно, все к ней привыкли.
Создали черт пойми какую систему, чтобы придать себе важности, а как ей пользоваться сами до конца не могут договориться