Архитектура

Раздел про проектирование фронтенда: принципы чистого кода, классические архитектурные паттерны, React/Vue-паттерны компонентов, монорепозитории, микрофронтенды и паттерн Backend for Frontend.

9 статей 65 вопросов

Начни с базы

DRY, KISS, YAGNI во Frontend

Три принципа здорового кода — DRY, KISS, YAGNI — на примерах React и Vue. Как применять и когда сознательно отступать от правил.

6 вопросов

SOLID в React и Vue

Пять принципов SOLID — Single Responsibility, Open/Closed, Liskov, Interface Segregation, Dependency Inversion — на примерах React и Vue. Формулы для запоминания и когда не применять.

7 вопросов

Углубись в детали

MVC, MVP и MVVM в React и Vue

Три классических паттерна — MVC, MVP и MVVM — и их отражение в архитектуре современных фронтенд-фреймворков. React как компонентный подход, Vue как MVVM.

7 вопросов

Паттерны GoF в React и Vue

Как классические паттерны Gang of Four — фабрика, декоратор, синглтон, наблюдатель — адаптируются под реалии React и Vue: хуки, Context, composables, реактивность.

6 вопросов

Паттерны компонентов и файловая структура в React

Паттерны React-компонентов (Compound, Render Props, Custom Hooks, Container/Presentational) и подходы к организации файлов проекта на React и Next.js.

7 вопросов

Паттерны компонентов и файловая структура во Vue

Паттерны Vue-компонентов (слоты, provide/inject, scoped slots, composables, v-model) и подходы к организации файлов в проектах Vue и Nuxt 3.

7 вопросов

Монорепозитории: Turborepo, Nx и workspace'ы

Что такое монорепозиторий и когда он нужен, как работают workspace'ы, чем Turborepo и Nx ускоряют сборку, и как настроить CI/CD для затронутых пакетов.

8 вопросов

Микрофронтенды: композиция независимых приложений

Микрофронтенды: как разбить фронтенд на независимо деплоящиеся части — Module Federation, Web Components, iframes, композиция и подводные камни.

10 вопросов

Не будет лишним

Backend for Frontend (BFF)

Архитектурный паттерн BFF: отдельный backend под каждый клиент. Разбираем зачем нужен, как реализовать на Next.js, и решает ли проблему несоответствия данных.

7 вопросов