Складчина: 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-тренажеры, Поддержка наставника, Практика в студии - в данный тариф не входят.
СЛИВ СКЛАДЧИН
Для просмотра скрытого содержимого вы должны зарегистрироваться
Возможно, Вас ещё заинтересует:
- Клиенты с гарантией (на 1 месяц) [Тариф Оптимальный] [Даниил Латышев]
- Зожные печенюшки на скорую руку [Тариф Самостоятельный] [leonov_chef] [Сергей Леонов]
- Прописи [umeem_igrat] [Алсу Хаметова]
- Игры на липучках -2 [umeem_igrat] [Алсу Хаметова]
- Игры на липучках -1 [umeem_igrat] [Алсу Хаметова]
- Большой сборник игр на липучках [umeem_igrat] [Алсу Хаметова]