Паттерны
October 9, 2023

Архитектура web-приложений

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

Задача архитектуры — обеспечить высокий уровень связности при низком уровне зацепления модулей.

Архитектура не должна быть привязана к фреймворку, языку или библиотеке.

Потоки данных

Так же архитектура занимается организацией потоков данных между компонентами. Чаще всего встречается два вида потоков:

Однонаправленный (one-way)

В однонаправленном потоке модуль может либо получить данные, либо передавать. Направление такого потока не меняется.

Самый известный пример архитектуры с однонаправленным потоком данных — это Flux

Двунаправленный (two-way)

Данные в двунаправленном потоке могут передаваться между модулями в обе стороны.

Используется для связывания модели и представления, чтобы обновление, например, текста в поле ввода сразу обновило данные в модели — это называется двунаправленным связыванием данных.

Плюсы:

  • Меньше кода, потому что не надо писать экшен и обработчик для него.
  • Работает как магия, если фреймворк делает всё автоматически за разработчиков.

Минусы:

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

Архитектурные подходы:

Устаревшие:

  • Нативная
  • Модульная
  • MVC
    • Минусы:
      • Двунаправленный поток данных трудно поддерживать по мере роста сложности приложения, становится сложно определить где и из-за кого происходит изменение
  • MVVM

Современные:

Распределенные:

  • Микрофронтенд
  • Монорепозиторий