Джокер
Администратор
- Регистрация
- 2 Янв 2015
- Сообщения
- 112.166
- Реакции
- 72.658
Складчина: Feature-Sliced Design [Тариф Самостоятельный] [PurpleSchool] [Антон Ларичев]
Продвинутая Frontend архитектура для React, Vue, Next, Nuxt, Angular и Svelte приложений
Чему вы научитесь?
После прохождения курса вы сможете:
Создавать удобную и расширяемую структуру проекта
Писать легкопереиспользуемый код
Разделять ответственность между компонентами
Мигрировать проекты на FSD
Избегать циклические зависимости
Применять FSD в проектах на любом фреймворке
Правильно разбивать проект на слои
Верно определять доменные области проекта
Использовать инструменты FSD для поддержки структуры
Минимальные требования: Знание любого frontend фреймворка
Курс подойдёт frontend разработчикам любого уровня подготовки. При этом мы на практике разберём как можно работать с FSD не только с React, но и Next, Vue, Nuxt, Angular и даже Svelte.
Мы начнём изучение разбора того, что такое FSD и как он помогает лучше структурировать наши проекты, что такое слои, слайсы и сегменты. Далее мы будем разбирать каждый слой, применяя на практике знания и создавая скелет для большого проекта.
Мы разберём инструменты, которые позволят вам удобнее и быстрее структурировать ваши проекты по FSD и контролировать изменения. Мы напрямую на макетах будем размечать различные слои, чтобы потренироваться в декомпозиции. А уже под конец курса мы посмотрим как можно использовать FSD с различными фреймворками, как Next, Vue, Nuxt, Angular и Svelte. Курс будет максимально практическим, так как изучив каждый из слоев или сегментов мы сразу же будем применять их практике, создавая приложение.
План курса
Курс построен таким образом, чтобы доносить материал от простого к сложному. Ниже вы можете ознакомиться с планом курса и посмотреть часть открытых лекций по кнопке проигрывателя.
1. Введение
1.1 Почему FSD
1.2 Как устроен курс
1.3 Обзор проекта
2. Настройка окружения
2.1 Настройка окружения
2.2 Настройка VSCode
2.3 Установка Node
2.4 О работе NVM
2.5 Figma компоненты
3. Введение в FDS
3.1 Что такое FSD
3.2 Layers
3.3 Slices
3.4 Segments
4. Pages и App
4.1 О слое App
4.2 Старт проекта
4.3 Подготовка слоя App
4.4 Обзор проекта
4.5 О слое Pages
4.6 Структура роутинга
4.7 Выделение slice
4.8 Создание первой страницы
4.9 Добавление стилей
4.10 Layout
5. Shared
5.1 О слое
5.2 Константы маршрутов
5.3 Конфигурации
5.4 API клиент
5.5 Библиотека
5.6 UI компоненты
5.7 Импорты в Shared
5.8 Что ниже Shared
6. Инструменты FSD
6.1 Steiger
6.2 Path Alias
6.3 Tree-shaking
6.4 CLI
6.5 Расширения
7. Entities
7.1 О слое
7.2 Создание slices
7.3 State managment
7.4 API
7.5 UI компоненты
7.6 Упражнение - Выделение entities
7.7 Кросс-импорты
8. Features
8.1 О слое
8.2 Примеры feature
8.3 Специфичность в СSS
8.4 Упражнение - Выделение features
8.5 Упражнение - Разметка страниц
9. Widgets
9.1 О слое
9.2 Примеры Widget
9.3 Processes
9.4 Упражнение - Выделение виджетов
9.5 Упражнение - Финал декомпозиции
10. Работа с фреймворками
10.1 Next
10.2 Vue
10.3 Nuxt
10.4 Angular
10.5 Sveltkit
10.6 Миграция проектов
10.8 Отзыв о курсе
Автор курса: Антон Ларичев
Основатель PurpleSchool
Занимаюсь разработкой уже более 14 лет и имею большой опыт: JavaScript, TypeScript, Php, Go, C#, Swift и Python. Активно внедряю гибкие методологии разработки в компании и внутренние обучения для команд.
Тариф Самостоятельный
Уроки и упражнения
Обратите внимание: Домашние задания, Ai-тренажеры, Поддержка наставника, Практика в студии - в данный тариф не входят.
СКАЧАТЬ СЛИВЫ КУРСОВ
Продвинутая Frontend архитектура для React, Vue, Next, Nuxt, Angular и Svelte приложений
Чему вы научитесь?
После прохождения курса вы сможете:
Создавать удобную и расширяемую структуру проекта
Писать легкопереиспользуемый код
Разделять ответственность между компонентами
Мигрировать проекты на FSD
Избегать циклические зависимости
Применять FSD в проектах на любом фреймворке
Правильно разбивать проект на слои
Верно определять доменные области проекта
Использовать инструменты FSD для поддержки структуры
Минимальные требования: Знание любого frontend фреймворка
Курс подойдёт frontend разработчикам любого уровня подготовки. При этом мы на практике разберём как можно работать с FSD не только с React, но и Next, Vue, Nuxt, Angular и даже Svelte.
Мы начнём изучение разбора того, что такое FSD и как он помогает лучше структурировать наши проекты, что такое слои, слайсы и сегменты. Далее мы будем разбирать каждый слой, применяя на практике знания и создавая скелет для большого проекта.
Мы разберём инструменты, которые позволят вам удобнее и быстрее структурировать ваши проекты по FSD и контролировать изменения. Мы напрямую на макетах будем размечать различные слои, чтобы потренироваться в декомпозиции. А уже под конец курса мы посмотрим как можно использовать FSD с различными фреймворками, как Next, Vue, Nuxt, Angular и Svelte. Курс будет максимально практическим, так как изучив каждый из слоев или сегментов мы сразу же будем применять их практике, создавая приложение.
План курса
Курс построен таким образом, чтобы доносить материал от простого к сложному. Ниже вы можете ознакомиться с планом курса и посмотреть часть открытых лекций по кнопке проигрывателя.
1. Введение
1.1 Почему FSD
1.2 Как устроен курс
1.3 Обзор проекта
2. Настройка окружения
2.1 Настройка окружения
2.2 Настройка VSCode
2.3 Установка Node
2.4 О работе NVM
2.5 Figma компоненты
3. Введение в FDS
3.1 Что такое FSD
3.2 Layers
3.3 Slices
3.4 Segments
4. Pages и App
4.1 О слое App
4.2 Старт проекта
4.3 Подготовка слоя App
4.4 Обзор проекта
4.5 О слое Pages
4.6 Структура роутинга
4.7 Выделение slice
4.8 Создание первой страницы
4.9 Добавление стилей
4.10 Layout
5. Shared
5.1 О слое
5.2 Константы маршрутов
5.3 Конфигурации
5.4 API клиент
5.5 Библиотека
5.6 UI компоненты
5.7 Импорты в Shared
5.8 Что ниже Shared
6. Инструменты FSD
6.1 Steiger
6.2 Path Alias
6.3 Tree-shaking
6.4 CLI
6.5 Расширения
7. Entities
7.1 О слое
7.2 Создание slices
7.3 State managment
7.4 API
7.5 UI компоненты
7.6 Упражнение - Выделение entities
7.7 Кросс-импорты
8. Features
8.1 О слое
8.2 Примеры feature
8.3 Специфичность в СSS
8.4 Упражнение - Выделение features
8.5 Упражнение - Разметка страниц
9. Widgets
9.1 О слое
9.2 Примеры Widget
9.3 Processes
9.4 Упражнение - Выделение виджетов
9.5 Упражнение - Финал декомпозиции
10. Работа с фреймворками
10.1 Next
10.2 Vue
10.3 Nuxt
10.4 Angular
10.5 Sveltkit
10.6 Миграция проектов
10.8 Отзыв о курсе
Автор курса: Антон Ларичев
Основатель PurpleSchool
Занимаюсь разработкой уже более 14 лет и имею большой опыт: JavaScript, TypeScript, Php, Go, C#, Swift и Python. Активно внедряю гибкие методологии разработки в компании и внутренние обучения для команд.
Тариф Самостоятельный
Уроки и упражнения
Обратите внимание: Домашние задания, Ai-тренажеры, Поддержка наставника, Практика в студии - в данный тариф не входят.
СКАЧАТЬ СЛИВЫ КУРСОВ
Для возможности скачивать складчины и сливы курсов нужно зарегистрироваться
Возможно, Вас ещё заинтересует:
- [Выкройки] Халат Kati. Размер 40-60. Рост 164 [OnePattern]
- Valuator - Академический взгляд на стоимость акций [Sponsr] (июль 2025) [Тариф Посмотреть] [Valuator]
- [МИФ] Фанфики: истории для тех, кто не хочет прощаться [Аш Пендрагон] + История гаданий и предсказаний [Марина Валентиновна Голубева]
- Основы лепки из глины: тарелка и кружка своими руками [lectoroom] [Светлана Килякова]
- Зарабатывай до 200 000 рублей на обслуживании кондиционеров [Руслан Климатик]
- Фабрика беглости. Изучайте грамматику, выражения и стратегии разговорной английской речи [Giovana Gogola]
- Нейросети для учителей [Изи Физис] [Надежда Юрьевна, Анна Вячеславовна]
- Английский в действии. Воркбук для повышения уровня вашего английского [Giovana Gogola]
- Трейдинг ретрит [Vesperfin] [Арина Веспер]
- Женский клуб поддержки и заботы «Мы вместе» [Лариса Суркова]