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.

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()
);

Image Not Showing Possible Reasons

• The image file may be corrupted
• The server hosting the image is unavailable
• The image path is incorrect
• The image format is not supported

Learn More →

Image Not Showing Possible Reasons

• The image file may be corrupted
• The server hosting the image is unavailable
• The image path is incorrect
• The image format is not supported

Learn More →

Image Not Showing Possible Reasons

• The image file may be corrupted
• The server hosting the image is unavailable
• The image path is incorrect
• The image format is not supported

Learn More →

Download or Play with Complete source code

Thank you! 🐑

You can find me on

• YouTube Channel Full Stack Master
• GitHub
• Twitter
• or email me