---
title: Push Based Architecture with RxJS
tags: FSM, RxJS
description: Make Reactive Applications
---

# Push Based Architecture With Rxjs!

> There are 2 types of architectures one is `Pull Based` the second one is `Push Based`. I will explain you how can we leverage `RxJS BehaviorSubject` to establish `Push Based Architecture`. In Design Patterns book we have `Observer Design Pattern` that is exactly what I mean by `Push Based Architecture`.

---

<!-- Put the link to this slide here so people can follow -->

Source Code: https://codesandbox.io/embed/rt-rxjs-state-management-js941?fontsize=14

---

## 👮

## What is Pull Based Architecture

In order to get some data we call some service and service call server and return the data. Till that time the main UI thread is hung or blocked.

> Every time client has to call some method for state change and also seek eagerly for getting the new changed state to show in UI. This behavior is called as `Pull Based Architecture`.

### See below Online Shopping eCommerce Example


---

## 😞

## Disadvantages of Pull Based Architecture

- Framework is slow & hence application run slow. System is under performance and hence business is in loss.
- UI thread is blocked for every operation hence poor user experience.

If you are using `React`, `Angular` or `Vue` or `Knockout` then these framework will continue check is there any changes in the `View Model`. Whenever there is change on view model because of certain state change. These frameworks will re-render the view. This is how Angular works auto update UI on Model change.

However, this makes framework slow. Because, framework has to watch the changes continuously.

In Angular 2-8 there is `ChangeDetectionStrategy` which by default always create a list models which are bound to UI & keep running a timer to check if the model changed then show the changes in UI or Re-render the UI.

`ChangeDetectionStrategy` has `OnPush` Strategy which I will discuss later. However in detail I will explain `ChangeDetectionStrategy` in my some other article.

---

## 📌

## What is Push Based Architecture

> Client subscribes to an event and receives new state through the event only. It can be achieve by call back functions. This is called as `Push Based Architecture`
> State is pushed to client via call back functions.
> Therefore, here system is lazy, UI framework is not eagerly seeking for any view model state change. Rather waiting lazily for any new state to be pushed.

`Promise` or `Observables` are the model to achieve push based architecture in javascript apps.

You can also do this by using regular messaging by `amplify` library or some other messaging framework.

I personally like `RxJS` now a days for doing push based event driven architecture.

---

## 🛒

### Shopping eCommerce Example to Understand Push Based Design


---

## 🎉

## Advantages of PUSH Based Architecture

- Framework is Fast hence system performance is well & Business improves.
- UI is not blocked hence best user experience.

---

## 🍴

## How to Achieve Push Based Architecture

---

Below are 4 simple steps we will follow:

- First Design the state that you want
- Wrap the state under `Behavior Subject`
- Write `Pure Functions` to change the state
- Create Selectors to subscribe change of state

## Modeling Shopping Cart Using Push Based Architecture

---

### 👉Defining The State | Shopping Cart State | Step 1

interface CartItem {
  name: string;
  quantity: number;
  id: number;
}

**Cart State**

interface CartState {
  items: [];
}

**Cart Initial State**

const initialState: CartState = {
  items: []
};

---

### 👉 Creating BehaviorSubject | Cart Store | Step 2

export class CartStore {
  _cartState = new BehaviorSubject<CartState>(initialState);

  get state() {
    return this._cartState.getValue();
  }

  setState(newCartState: CartState) {
    this._cartState.next(newCartState);
  }

  get state$() {
    return this._cartState.asObservable();
  }
}

---

### 👉 Writing Pure Functions For State Change | Cart Store | Step 3

**Add Cart Item Method**

addCartItem(newCartItem: CartItem) {
    console.log("[cart Item] Add");
    logLine();
    logState("Previous", this.state);

    const newState = {
      ...this.state,

      items: [].concat(this.state.items, newCartItem)
    } as CartState;

    this.setState(newState);
    logState("Current", this.state);
    logLine();
  }


  function logLine() {
  console.log(`----------------------------------------`);
}

function logState(which, state) {
  console.log(`${which} State`, state);
}


### 👉 Creating Selectors to subscribe change of state | Cart Store | Step 4

const cartItemCount$ = cartStore.state$.pipe(
  map(s => s.items.length),
  distinctUntilChanged()
);


---

# :100: :muscle: :tada:

---
## Download or Play with Complete source code

[](https://codesandbox.io/s/rt-rxjs-state-management-js941?fontsize=14)

### Thank you! 🐑

You can find me on

- [YouTube Channel Full Stack Master](http://youtube.com/fullstackmaster)
- GitHub
- Twitter
- or email me