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

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

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

Введите реактивное программирование.

Реактивное программирование - это подход, который моделирует данные, которые меняются с течением времени. Эту парадигму легко проиллюстрировать на простом примере. Давайте сначала посмотрим на нереактивную версию в каком-нибудь псевдокоде:

Нереактивный пример

a = 1;
b = a + 1;

a = 2;
 
print a; ---> 2
print b; ---> 2

В этом примере мы сначала определяем a как 1, затем устанавливаем b равным a + 1. Когда a изменяется позже, b не знает об изменении в a и сохраняет его значение, определенное во время выполнения. Теперь реактивная версия:

Реактивный пример

a = 1;
b = a + 1;

a = 2;
 
print a; ---> 2
print b; ---> 3

В реактивной версии b обновляется как изменение a. Разница в том, что b определяется как производное от a. Это значение, которое изменяется с течением времени в зависимости от его источника, изменяющегося с течением времени, а не значение, объявленное один раз.

Скорее всего, вы уже выполнили реактивное программирование, как в предыдущем примере. Вы даже можете делать это ежедневно. Как? Оказывается, Microsoft Excel - это интерфейс реактивного программирования!

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

Визуализация с помощью шариков

Чтобы понять логику, определяющую эти изменяющиеся значения с течением времени, реактивные программисты часто используют так называемые мраморные диаграммы, чтобы показать, как значение изменяется с течением времени на основе других значений. Каждая переменная со временем получает свой «поток» значений. Каждый шарик представляет собой новую ценность, произведенную в этом потоке. Наконец, показано преобразование между потоками, чтобы показать отношения. Наш b = a + 1 пример на мраморной диаграмме может выглядеть так:

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

document.addEventListener("click", function(evt) {
	console.log("nice click!");
});

Этот фрагмент моделирует серию точек данных (щелчков) с течением времени с функцией, которая выполняется для каждой новой точки данных. Мы можем проиллюстрировать этот процесс на мраморной диаграмме:

Терминология

На наших мраморных диаграммах мы смоделировали изменение данных в потоках с некоторыми возможными преобразованиями для создания новых потоков и возможных побочных эффектов этих потоков. В реактивном программировании эти различные концепции классифицируются как Observables, Operators и Observers. Каждый из них делает следующее:

  • Наблюдаемые производят значения
  • Операторы берут 1 или более Observable и создают новый Observable на основе значений исходных Observables.
  • Наблюдатели потребляют или слушают значения из Observables
  • Таким образом, наблюдатели подписываются на Observable

Давайте рассмотрим эти определения на реальном примере. Представьте, что вы ведете машину и приближаетесь к светофору. Светофор укажет вам на одно из трех: зеленый, желтый или красный. Это значение со временем будет меняться. Тогда светофор - производитель ценностей. Это наблюдаемое. Как водитель, вы интерпретируете эти значения и реагируете на них. Если горит красный свет, вы можете сбавить скорость. Если он станет зеленым, вы можете ускориться. Вы потребляете значения из Observable и реагируете; таким образом, вы Наблюдатель.

Вот две наши предыдущие мраморные диаграммы, аннотированные, чтобы показать наблюдаемые, операторы и наблюдатели:

Следующие шаги

Паттерн Observable реализован на многих языках, включая JavaScript. Из нескольких реализаций я предлагаю начать с RxJS, который имеет прочную основу и сообщество в сети.

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

Приятного реагирования!

Сперос Кокенес

Сперос - директор практики визуальной аналитики Axis Group.