Push Based Architecture With RxJS Behavior Subject

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

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

shopping cart
shopping cart

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.

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

shopping cart
shopping cart

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

Below are 4 simple steps we will follow:

First Design the state that you wantWrap the state under Behavior SubjectWrite Pure Functions to change the stateCreate Selectors to subscribe change of state

👉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(“ 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);
}

state change
state change

👉 Creating Selectors to subscribe change of state | Cart Store | Step 4
const cartItemCount$ = cartStore.state$.pipe(
map(s => s.items.length),
distinctUntilChanged()
);

selector
selector

Thank you! 🐑

You can find me on

YouTube Channel Full Stack MasterGitHubTwitteror email me

Pluralsight Author, Developer and Trainer. I help students and professionals to become Full Stack Software Developer in less than a Year.