title: Push Based Architecture with RxJS tags: angular, rxjs, javascript, angularjs, tutorial, typescript, observables, rxjs observables, Push Based Architecture with RxJS, state management, behavior subject description: Make Reactive Applications
There are 2 types of architectures one is
Pull Basedthe second one isPush Based. I will explain you how can we leverageRxJS BehaviorSubjectto establishPush Based Architecture. In Design Patterns book we haveObserver Design Patternthat is exactly what I mean byPush 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.
- 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 ArchitectureState 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.
- 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 want
- Wrap the state under
Behavior Subject - Write
Pure Functionsto change the state - Create Selectors to subscribe change of state
interface CartItem {
name: string;
quantity: number;
id: number;
}Cart State
interface CartState {
items: [];
}Cart Initial State
const initialState: CartState = {
items: []
};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();
}
}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);
}
const cartItemCount$ = cartStore.state$.pipe(
map(s => s.items.length),
distinctUntilChanged()
);
You can find me on
- YouTube Channel Full Stack Master
- GitHub
- or email me
