Why Reactive Programming Beats MVVM and Redux in Frontend and Real‑Time Computing

What Frontend Development Actually Builds

Frontend development is fundamentally about making web views respond correctly to related events such as clicks, mouse moves, timers, and server requests. In formula form: View = reactionFn(Event).

Classifying Events

User actions (click, mousemove, etc.)

Remote API interactions (fetch, websocket)

Local asynchronous events (setTimeout, setInterval)

Thus the view can be expressed as View = reactionFn(UserEvent | Timer | Remote API).

Applying the Idea to a News Site

The example requires three refresh mechanisms:

Click refresh: click → fetch Checkbox auto‑refresh: change → (setInterval / clearInterval) → fetch Pull‑down refresh:

touchstart + touchmove + touchend → fetch

Reactive Programming vs. MVVM and Redux

MVVM abstracts view and data layers but scatters reaction functions, making precise tracking difficult. Redux maps events to actions and reducers, yet state only describes intermediate snapshots and actions do not correspond one‑to‑one with events, hindering traceability.

Reactive Programming with RxJS

RxJS lets us define event streams directly:

click$ = fromEvent<MouseEvent>(document.querySelector('button'), 'click');

change$ = fromEvent(document.querySelector('input'), 'change');

touchstart$ = fromEvent<TouchEvent>(document, 'touchstart');</code><code>touchmove$ = fromEvent<TouchEvent>(document, 'touchmove');</code><code>touchend$ = fromEvent<TouchEvent>(document, 'touchend');

interval$ = interval(5000);

fetch$ = fromFetch('https://randomapi.azurewebsites.net/api/users');

Combining streams:

clickRefresh$ = this.click$.pipe(debounceTime(300));

autoRefresh$ = change$.pipe(switchMap(enabled => (enabled ? interval$ : EMPTY)));

pullRefresh$ = touchstart$.pipe(
  switchMap(start =>
    touchmove$.pipe(
      map(move => move.touches[0].pageY - start.touches[0].pageY),
      takeUntil(touchend$)
    )
  ),
  filter(pos => pos >= 300),
  take(1),
  repeat()
);

refresh$ = merge(clickRefresh$, autoRefresh$, pullRefresh$);

Consuming the stream to update the view:

<div *ngFor="let user of view$ | async"></div>

Or in other frameworks, subscribe to the observable and manually update the DOM.

Extending the Model to Real‑Time Computing

The same source → transform → subscribe → consume pattern applies to streaming platforms like Apache Flink. For example, calculating hourly sales during a Double‑11 event involves a data flow: user order stream → transformation → hourly sales stream → write to DB and cache.

Flink introduces watermarks to handle out‑of‑order events, ensuring windows close only after late events are accounted for.

It also provides back‑pressure mechanisms and checkpointing to guarantee fault‑tolerant state recovery.

Key Takeaways

Source data stream → transformation → intermediate stream → subscription → consumption

This data‑flow model unifies reactive frontend development and real‑time stream processing, offering precise event tracing, composable transformations, and reliable state management.