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

1️⃣ Как кратко ответить

В frontend-разработке часто используются следующие архитектурные паттерны: MVC (Model-View-Controller), MVVM (Model-View-ViewModel), Flux, Redux и Micro Frontends. Каждый из них помогает организовать код, улучшить его читаемость и поддерживаемость, а также управлять состоянием приложения.

2️⃣ Подробное объяснение темы

Архитектурные паттерны в frontend-разработке помогают структурировать код, делая его более организованным и легким для поддержки. Рассмотрим несколько популярных паттернов:

MVC (Model-View-Controller)

MVC разделяет приложение на три компонента:

• Model: управляет данными и бизнес-логикой. Например, в веб-приложении это может быть объект, который хранит данные пользователя.
• View: отвечает за отображение данных пользователю. Это может быть HTML-шаблон, который отображает данные из модели.
• Controller: обрабатывает пользовательский ввод, взаимодействует с моделью и обновляет представление. Например, контроллер может обрабатывать нажатие кнопки и обновлять данные в модели.

Пример:

// Model
class UserModel {
  constructor(name) {
    this.name = name;
  }
}
​
// View
class UserView {
  render(user) {
    console.log(`User: ${user.name}`);
  }
}
​
// Controller
class UserController {
  constructor(model, view) {
    this.model = model;
    this.view = view;
  }
​
  updateUserName(newName) {
    this.model.name = newName;
    this.view.render(this.model);
  }
}
​
const model = new UserModel('Alice');
const view = new UserView();
const controller = new UserController(model, view);
​
controller.updateUserName('Bob'); // Output: User: Bob

MVVM (Model-View-ViewModel)

MVVM расширяет MVC, добавляя ViewModel, который связывает данные модели с представлением:

• Model: аналогично MVC, управляет данными.
• View: отображает данные.
• ViewModel: посредник между моделью и представлением, который управляет состоянием представления и обрабатывает логику пользовательского интерфейса.

Пример:

// Model
class UserModel {
  constructor(name) {
    this.name = name;
  }
}
​
// ViewModel
class UserViewModel {
  constructor(model) {
    this.model = model;
  }
​
  get userName() {
    return this.model.name;
  }
​
  set userName(value) {
    this.model.name = value;
  }
}
​
// View
class UserView {
  constructor(viewModel) {
    this.viewModel = viewModel;
  }
​
  render() {
    console.log(`User: ${this.viewModel.userName}`);
  }
}
​
const model = new UserModel('Alice');
const viewModel = new UserViewModel(model);
const view = new UserView(viewModel);
​
view.render(); // Output: User: Alice
viewModel.userName = 'Bob';
view.render(); // Output: User: Bob

Flux

Flux — это архитектурный паттерн, предложенный Facebook для построения клиентских приложений. Он использует однонаправленный поток данных:

• Action: объект, описывающий, что произошло.
• Dispatcher: централизует обработку всех действий.
• Store: хранит состояние и логику приложения.
• View: обновляется при изменении состояния.

Пример:

// Action
const action = { type: 'UPDATE_NAME', payload: 'Bob' };
​
// Dispatcher
class Dispatcher {
  constructor() {
    this.isDispatching = false;
    this.callbacks = [];
  }
​
  register(callback) {
    this.callbacks.push(callback);
  }
​
  dispatch(action) {
    if (this.isDispatching) {
      throw new Error('Cannot dispatch in the middle of a dispatch.');
    }
    this.isDispatching = true;
    try {
      this.callbacks.forEach(callback => callback(action));
    } finally {
      this.isDispatching = false;
    }
  }
}
​
// Store
class Store {
  constructor(dispatcher) {
    this.dispatcher = dispatcher;
    this.state = { name: 'Alice' };
    this.dispatcher.register(this.handleAction.bind(this));
  }
​
  handleAction(action) {
    if (action.type === 'UPDATE_NAME') {
      this.state.name = action.payload;
      this.emitChange();
    }
  }
​
  emitChange() {
    console.log(`State changed: ${this.state.name}`);
  }
}
​
const dispatcher = new Dispatcher();
const store = new Store(dispatcher);
​
dispatcher.dispatch(action); // Output: State changed: Bob

Redux

Redux — это библиотека для управления состоянием, основанная на Flux, но с упрощенной концепцией:

• Store: единственное хранилище состояния приложения.
• Reducer: чистая функция, которая принимает текущее состояние и действие, возвращая новое состояние.
• Action: объект, описывающий изменение.

Пример:

const { createStore } = require('redux');
​
// Reducer
function userReducer(state = { name: 'Alice' }, action) {
  switch (action.type) {
    case 'UPDATE_NAME':
      return { ...state, name: action.payload };
    default:
      return state;
  }
}
​
// Store
const store = createStore(userReducer);
​
// Subscribe to store updates
store.subscribe(() => {
  console.log(`State changed: ${store.getState().name}`);
});
​
// Dispatch action
store.dispatch({ type: 'UPDATE_NAME', payload: 'Bob' }); // Output: State changed: Bob

Micro Frontends

Micro Frontends — это подход, который применяет принципы микросервисов к frontend-разработке. Он позволяет разбивать приложение на независимые модули, которые могут разрабатываться и разворачиваться отдельно.

Пример:

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

Архитектурные паттерны помогают разработчикам создавать более структурированные и поддерживаемые приложения, улучшая их масштабируемость и упрощая процесс разработки.