Declarative Programming in Angular with Async Pipe and shareReplay

A declarative approach is a way that focuses on writing code that specifies what the application should do, rather than detailing how it should be done. For example, with the async pipe in Angular, we don’t need to write code to manually subscribe to an Observable, handle its data, and update the view. Instead, we simply specify in the template that we want the data from the Observable using the async pipe. Angular handles all the underlying processes to retrieve and display the data

It's often used in reactive programming with RxJS and Angular's built-in features, such as the async pipe.

export class ProductComponent {

  product$ = this.productService.getProduct();
  
  constructor(private productService: ProductService) {}
}

The product observable will hold the product data and the async pipe in the template will automatically subscribe and unsubscribe observable

<div *ngIf="product$ | async as product">
  <h1>{{ product.name }}</h1>
  <p>{{ product.description }}</p>
</div>

Benefit of declarative approach:

• Reduces boilerplate code, making the codebase cleaner and more maintainable.
• Automates state management, minimizing the risk of errors related to manual state management and keeping data in sync between components.
• Improves performance through Angular's change detection strategy using OnPush, which triggers only when a component is marked as dirty.
• Helps manage complexity in larger applications by keeping the codebase clean and modular.

shareReplay

To improve performance and network load we can cach the emissions from observables. Caching/storing data locally can:

• Improve responsiveness
• Reduce bandwidth and network consumption
• Lower backend server load
• Decrease redundant computations

One approach to cach the data is to use shareReplay(bufferSize?: number). 

ShareReplay is an operator in RxJS that caches and shares/replays the defined number of emissions subscribers. This is useful in situations where we want multiple subscribers to receive the same values without resubscribing to the source Observable or re-executing expensive operations.

      this.data$ = this.http.get('https://api.example.com/data').pipe(
        // Cache the response and share it with new subscribers
        shareReplay(1)
      );

bufferSize: This parameter specifies the maximum number of values to store in the buffer. When a new subscriber joins, it will receive the last bufferSize values emitted by the source observable. If not provided, the buffer size is unlimited.

Note: The location of the shareReplay operator is crucial. Before using shareReplay, all data processing happens prior to caching. However, once shareReplay is applied, the code below shareReplay is executed during each subscription.