JavaScript Unscripted

The Problem: The one big problem all the frameworks are trying to solve: The browser's real DOM operations are expensive because they trigger reflows (layout recalculations) and repaints. When a user types in an input field, the browser processes updates in four main stages : JavaScript Execution: when an event like oninput triggers, JavaScript modifies the DOM (e.g., updating an <input> field's value). Style Calculation:  If styles depend on the modified element, they might need recalculating for related elements. Layout (Reflow):   If the change affects an element’s size or position, the browser recalculates the layout of affected elements (e.g., increasing a <div> size). Painting & Compositing:  If elements were moved, resized, or changed visually, the browser re-renders them. How React’s Virtual DOM Optimizes This Instead of immediately modifying the real DOM, React follows an optimized approach : JavaScript Execution: Just like before, the input ...

Github links: shell-app find-hotels account-mgmt Create 3 Angular apps as usual: ng new hotel-reservation-system --routing --style=scss ng new find-hotels --routing --style=scss ng new account-management --routing --style=scss Here hotel-reservation-system is the shell app that hosts find-hotels and account-management Go inside each of the apps and run: ng add @angular-architects/module-federation --project hotel-reservation-system ng add @angular-architects/module-federation --project find-hotels ng add @angular-architects/module-federation --project account-management Select different default ports if needed. I am selecting hotel-reservation-system: 4200 find-hotels: 63402 account-management: 63414 In each of the apps, navigate to: <app>\webpack.config.js update this: const { shareAll , withModuleFederationPlugin } = require ( '@angular-architects/module-federation/webpack' ); module . exports = withModuleFederationPlugin ({   name : 'hotel-reservation-system...

When it comes to streams, there are 2 types: 1.        Data Stream: Mostly HTTP calls where you get a response to a request. And its complete!                 2.        Action stream: button clicks, drop down selections, check box selections etc where values are emitted continuously, you keep getting new values into a stream           Stackblitz links:           https://stackblitz.com/edit/angular-ivy-o41hzu           https://stackblitz.com/edit/angular-ivy-pdkt1s              https://stackblitz.com/edit/angular-ivy-hlt1u1  (get posts for user name entered) Consider you have 2 components: 1.        List Component: One to display the list of emails 2.        Detail Component: ...

Consider a parent & child component. Child receives “data” Object as Input from parent. Parent Child <div> <child [data]=”name”></child> </div>   name = { someKey: “someVal” }   <h1> {{ data.someKey }} </h1>   @Input data = {someKey: null}   Now if a button is introduced in Parent element to change the data of the @Input object present in child, Parent:   Parent   <div>   <child [data]=”name”></child>   <button (click)=”editData()”> edit </button> </div>   editData() { this.name.someKey = “new Value!” } Output:   New Value!   Edit      .       Using OnPush in child selector: ‘child’, template: `{{ data.someKey }}` changeDetection: changeDetectionStrategy.OnPu...

  Bridge pattern  decouple an abstraction from its implementation so that the two  can  vary independently. It is  used  mainly for implementing platform independence feature. It adds one more method level redirection  to  achieve the objective It enables the separation of implementation from the interface. It improves the extensibility. It allows the hiding of implementation details from the client. This approach simplifies code maintenance and minimizes the risk of breaking existing code. THE PROBLEM ·          Card-wrapper contains a common header and <ng-content> ·          Savings component has a refresh button [refresh() ] and loadSavingsData() <card-wrapper> <savings> </savings> </card-wrapper> ·          Similarly, Deposits component has a refresh button [refresh() ] and loadDepos...