papers/astle-reactive-sdk/sections/02-background.tex

\section{Background}


\subsection{State Management Evolution}

JavaScript application state management has progressed through several paradigms:

\textbf{jQuery era (2006--2012).} State scattered across DOM elements and global variables. Event handlers mutate state imperatively. Testing requires DOM simulation.

\textbf{MVC/MVVM era (2010--2014).} Backbone.js, Angular 1.x, and Knockout introduce structured patterns. Two-way data binding simplifies UI synchronization but complicates debugging—changes propagate bidirectionally, making causality difficult to trace.

\textbf{Unidirectional flow era (2014--present).} Flux, Redux, and similar architectures enforce unidirectional data flow: actions describe intent, reducers compute new state, views render state. This pattern enables predictable state transitions and time-travel debugging.

\subsection{Reactive Programming}

Reactive programming treats data as streams that propagate changes automatically. Key concepts include:

\begin{itemize}
\item \textbf{Observables}: Values that change over time and notify subscribers.
\item \textbf{Operators}: Transformations on streams (map, filter, combine).
\item \textbf{Subscriptions}: Connections between observables and side effects.
\end{itemize}

Libraries such as RxJS \cite{rxjs2015} provide comprehensive reactive primitives. Astle.js builds upon these foundations while providing commerce-specific abstractions.

\subsection{E-Commerce State Complexity}

Commerce applications present unique state challenges:

\begin{itemize}
\item \textbf{Distributed truth}: Cart state exists on client and server; synchronization is required.
\item \textbf{Temporal coupling}: Inventory availability changes during user sessions.
\item \textbf{External dependencies}: Payment processors, shipping calculators, and tax services introduce latency and failure modes.
\item \textbf{Promotional logic}: Discounts depend on cart contents, customer segment, and time.
\end{itemize}