Feature-Sliced Design
★3.9 (всего оценок - 14)
Продолжительность
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 - все что нужно, все к ней привыкли.
Создали черт пойми какую систему, чтобы придать себе важности, а как ей пользоваться сами до конца не могут договориться