Какие знаешь архитектурные паттерны?

Архитектурные паттерны во Frontend-разработке

В современной фронтенд-разработке архитектурные паттерны играют критическую роль для создания масштабируемых, поддерживаемых и тестируемых приложений. Вот ключевые паттерны, которые я использую в своей практике:

MV* (Model-View- Controller/Presenter/ViewModel)

Это семейство паттернов составляет основу большинства фронтенд-фреймворков:

MVC (Model-View-Controller)

// Model
class UserModel {
  constructor(data) {
    this.name = data.name;
    this.email = data.email;
  }
  
  save() {
    // логика сохранения данных
  }
}

// View
class UserView {
  render(user) {
    return `<div>${user.name} (${user.email})</div>`;
  }
}

// Controller
class UserController {
  constructor(model, view) {
    this.model = model;
    this.view = view;
  }
  
  updateUser(data) {
    this.model.name = data.name;
    const html = this.view.render(this.model);
    document.getElementById('user-container').innerHTML = html;
  }
}

MVVM (Model-View-ViewModel) - особенно популярен в React, Vue и Angular:

• Model: Бизнес-логика и данные
• View: Отображение данных и обработка пользовательского ввода
• ViewModel: Слой, связывающий Model и View, часто с реактивными свойствами

Flux и его реализация (Redux)

Flux - это архитектурный паттерн, созданный Facebook для одностороннего потока данных:

// Redux реализация Flux
import { createStore } from 'redux';

// Action types
const ADD_TODO = 'ADD_TODO';

// Action creator
const addTodo = (text) => ({
  type: ADD_TODO,
  payload: { text }
});

// Reducer (чистая функция)
const todosReducer = (state = [], action) => {
  switch(action.type) {
    case ADD_TODO:
      return [...state, action.payload];
    default:
      return state;
  }
};

// Store
const store = createStore(todosReducer);

// Подписка на изменения
store.subscribe(() => {
  console.log('State updated:', store.getState());
});

// Диспатч действия
store.dispatch(addTodo('Изучить архитектурные паттерны'));

Компонентная архитектура

Современный фронтенд строится на компонентно-ориентированном подходе:

// React компонент с разделением ответственности
const UserProfile = ({ user, onUpdate }) => {
  // Presentational компонент
  return (
    <div className="profile">
      <UserInfo user={user} />
      <UserActions onUpdate={onUpdate} />
    </div>
  );
};

// Container компонент
class UserProfileContainer extends React.Component {
  state = { user: null };
  
  async componentDidMount() {
    const user = await fetchUser(this.props.userId);
    this.setState({ user });
  }
  
  handleUpdate = async (updates) => {
    await updateUser(this.state.user.id, updates);
    // обновление состояния
  };
  
  render() {
    return <UserProfile 
      user={this.state.user} 
      onUpdate={this.handleUpdate} 
    />;
  }
}

Другие важные паттерны:

Atomic Design - методология создания дизайн-систем:

• Атомы (кнопки, инпуты)
• Молекулы (форма поиска = инпут + кнопка)
• Организмы (шапка сайта)
• Шаблоны
• Страницы

Feature-Sliced Design - относительно новый подход для масштабируемых приложений:

src/
├── app/           # Инициализация приложения
├── processes/     # Сложные бизнес-процессы
├── pages/        # Страницы приложения
├── widgets/      # Самостоятельные виджеты
├── features/     # Фичи пользователя
├── entities/     # Бизнес-сущности
└── shared/       # Переиспользуемый код

Микросервисная архитектура на фронтенде (Micro Frontends):

• Разделение монолита на независимые части
• Независимое развертывание
• Использование Module Federation в Webpack
• Разные технологии в разных частях приложения

Паттерны управления состоянием:

• Singleton для глобальных сервисов
• Observer/Pub-Sub для событийной системы
• Factory для создания сложных объектов
• Proxy для перехвата операций

Критерии выбора паттерна:

При выборе архитектурного подхода я учитываю:

1. Масштаб приложения - маленький проект vs корпоративная система
2. Командные соглашения и имеющийся экспертиз
3. Требования к производительности
4. Необходимость тестируемости
5. Интеграция с бэкендом и API
6. Долгосрочная поддержка проекта

Современный тренд - это комбинация паттернов: компонентная архитектура + управление состоянием (Redux/MobX) + функциональное программирование. Например, в React-приложениях я часто сочетаю:

• Container/Presentational компоненты
• Redux для глобального состояния
• React Hooks для локального состояния
• Context API для передачи данных
• Custom Hooks для повторной логики

Ключевая цель применения архитектурных паттернов - снижение связности (coupling) и увеличение связности (cohesion) кода, что в итоге приводит к более предсказуемому и поддерживаемому приложению.