Improvements or additions to documentation

documentation

React

Next JS

Mastering the Compound Pattern in React: Building Declarative and Flexible Components with TypeScript

Next.js Server Actions provide a groundbreaking method for integrating server-side operations directly into React applications, enabling optimized workflows for server logic and enhancing Next.js server-side integration. While they simplify workflows for mutations and server logic, their use for data fetching can present significant performance challenges. This guide explores these challenges, provides benchmark comparisons, and offers actionable solutions to optimize performance.

## Understanding Next.js Server Actions

Next.js Server Actions have revolutionized server-side operations in React applications. Designed primarily for form handling and data mutations, they are increasingly used for data fetching—but not without challenges.

### What Are Server Actions?

Server Actions in Next.js 14+ enable direct server-side operations from components. Their primary use cases include:

* Form submissions
* Data mutations
* Server-side state management
* Database operations

Server Actions promise simplicity by integrating server logic seamlessly with React components. However, using them for data fetching introduces critical performance challenges.

Learn more about Server Actions in the official [Next.js documentation](https://nextjs.org/docs).

## Performance Problems with Server Actions

### HTTP Method Concerns

Server Actions exclusively use POST requests, leading to several challenges when applied to data fetching:

* REST Principle Violation: GET requests are conventionally used for retrieving data. Using POST disrupts standard practices.
* Caching Complexity: Caching mechanisms for GET requests, such as HTTP caching or CDN layers, are inherently easier to implement compared to POST.
* Reduced API Intuition: POST-based data fetching can make APIs less predictable and harder to document for team collaboration.

### Sequential Execution Problem

A significant performance bottleneck arises when multiple Server Actions are invoked concurrently. Here's a common scenario:

```typescript
'use server';

export async function fetchData({ id, delay }: { id: number; delay: number }) {
  await new Promise((resolve) => setTimeout(resolve, delay));
  return { id };
}
```

Executing this function for multiple requests:

```typescript
// These execute sequentially despite Promise.all
const results = await Promise.all([
  fetchData({ id: 1, delay: 1000 }),
  fetchData({ id: 2, delay: 1000 }),
  fetchData({ id: 3, delay: 1000 })
]);
```

The expectation is concurrent execution, but the reality is sequential processing, dramatically increasing response times.

### Benchmark Results

To quantify the performance of Server Actions, we conducted real-world testing with 10 concurrent requests, each with a 1000ms delay. The results:

| Approach | Execution Time | Performance Impact |
|----------|---------------|-------------------|
| API Routes | 1,195 ms | Best Performance |
| Concurrent Server Actions | 2,274 ms | 90% Improvement |
| Default Server Actions | 11,444 ms | Baseline (Sequential) |

Key Insights:
* API Routes: Demonstrated near-ideal concurrent execution.
* Concurrent Server Actions: Showed marked improvement over default Server Actions.
* Default Server Actions: Suffered from severe sequential bottlenecks, rendering them impractical for high-performance needs.

## Solutions and Best Practices

### 1. Use API Routes for Data Fetching

API Routes remain the gold standard for data fetching in Next.js. Here's a straightforward implementation:

```typescript
// app/api/route.ts
import { NextRequest } from 'next/server';

export async function GET(req: NextRequest) {
  const n = req.nextUrl.searchParams.get('n');
  const duration = Number(req.nextUrl.searchParams.get('duration'));
  await new Promise((resolve) => setTimeout(resolve, duration));
  return Response.json({ n });
}
```

Advantages:
* Leverages HTTP GET, simplifying caching and alignment with REST principles.
* Supports CDN optimizations out of the box.

### 2. Adopt the Concurrent Server Actions Pattern

The concurrent pattern addresses the sequential execution issue inherent in default Server Actions. Unlike standard sequential processing, this approach utilizes concurrency to execute multiple actions simultaneously, significantly reducing overall execution time.

#### How It Differs from Standard Approaches

Default Server Actions process tasks one after the other, even when wrapped in promises, due to the server's handling of individual requests. This leads to significant delays in scenarios requiring multiple actions. By contrast, the concurrent pattern ensures that all operations begin immediately, leveraging JavaScript's asynchronous capabilities to minimize delays.

This distinction is critical for developers aiming to optimize server actions in Next.js and ensure efficient handling of complex workflows. Implementing the concurrent pattern can dramatically enhance performance, particularly for applications requiring high-volume data interactions. A custom utility can enable concurrent execution of Server Actions.

Utility Implementation:

```typescript
export function createConcurrentAction<T, U extends unknown[]>(
  action: (...args: U) => Promise<T>
) {
  return async (...args: U) => [action(...args)] as const;
}

export async function runConcurrentAction<T>(
  result: Promise<readonly [Promise<T>]>
) {
  return (await result)[0];
}

export const nonBlockingFetch = createConcurrentAction(fetchData);
```

Client-Side Usage:

```typescript
const results = await Promise.all([
  runConcurrentAction(nonBlockingFetch({ id: 1, delay: 1000 })),
  runConcurrentAction(nonBlockingFetch({ id: 2, delay: 1000 })),
  runConcurrentAction(nonBlockingFetch({ id: 3, delay: 1000 }))
]);
```

Advantages:
* Minimizes execution time for concurrent operations.
* Maintains compatibility with Server Actions.

### Implementation Guide

#### Step 1: Define the Base Action

```typescript
'use server';

export async function processTask({ n, duration }: { n: number; duration: number }) {
  console.log(`Running action ${n}...`);
  await new Promise((resolve) => setTimeout(resolve, duration));
  return { n };
}
```

#### Step 2: Create a Concurrent Version

```typescript
export const nonBlockingProcessTask = createConcurrentAction(processTask);
```

#### Step 3: Execute Client-Side

```typescript
const results = await Promise.all([
  runConcurrentAction(nonBlockingProcessTask({ n: 1, duration: 1000 })),
  runConcurrentAction(nonBlockingProcessTask({ n: 2, duration: 1000 })),
  runConcurrentAction(nonBlockingProcessTask({ n: 3, duration: 1000 }))
]);
```

## Conclusion and Recommendations

Server Actions present a transformative opportunity for integrating server-side logic into React applications, offering efficiency and flexibility. However, leveraging them for data fetching requires a nuanced understanding of their benefits and limitations to maximize their potential in Next.js workflows.

### Best Practices

For Data Fetching:
* Prefer API Routes for optimal performance and simplicity.
* Use tools like React Query or SWR for client-side caching and revalidation.

When Using Server Actions:
* Apply the concurrent execution pattern to avoid sequential bottlenecks.
* Recognize the inherent overhead (~1,000ms) compared to API Routes.
* Consider batch operations for related requests.

For Sequential Operations:
* Default Server Actions may suffice.
* Explore batch endpoints for efficiency.

### Key Takeaways

* Mutations: Server Actions excel for data mutations but need optimization for fetching.
* Concurrency: The concurrent pattern delivers a 90% performance improvement.
* API Routes: Remain the go-to for data fetching due to their flexibility and speed.

Explore related resources:

[Github repository example](https://github.com/Pasquale-Favella/next-concurrent-server-actions)

[React Query Documentation](https://tanstack.com/query/latest)

[SWR Documentation](https://swr.vercel.app/)

[Server Actions Guide](https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations)

[Next.js Data Fetching Practices](https://nextjs.org/docs/app/building-your-application/data-fetching/fetching)

Happy coding!

Next.js Server Actions for Data Fetching: Performance Issues and Solutions

The Angular Resource API is an exciting new tool that simplifies state management in modern web applications. Paired with NgRx Signal Store, this powerful combination promises to revolutionize the way developers manage state, fetch data, and enhance performance in Angular applications. The integration of these tools provides businesses with a competitive advantage, streamlining workflows, reducing boilerplate code, and improving application performance.

In this article, we’ll walk through how to leverage the **Resource API** along with NgRx Signal Store to build a state management solution that is both declarative and powerful, with minimal boilerplate and excellent developer ergonomics.

## Why the Resource API?

For developers who have been managing state in Angular, the challenges are clear. From dealing with complex services, observables, and multiple action types, to handling data-fetching with external APIs, Angular developers often juggle many complexities. The **Resource API** is a leap forward by making asynchronous requests and state management simpler and more intuitive.

### What Makes This Solution Powerful

- **Declarative State Management**: Angular's new Resource API makes it easy to manage remote state and cache results with minimal configuration.
- **Minimal Boilerplate**: Less configuration means more productivity. The Resource API and NgRx Signal Store integration reduce the amount of code developers need to write, focusing more on business logic.
- **Type Safety**: Angular's modern tooling ensures that developers are working in a type-safe environment, reducing runtime errors.
- **Reactive by Design**: The combination of NgRx Signal Store and the Resource API offers a reactive paradigm, aligning perfectly with Angular’s change detection and reactivity model.

## Implementation Deep Dive

Now that we understand the power behind the **Resource API**, let’s see how we can combine it with **NgRx Signal Store** for an intuitive, scalable state management solution.

### Setting Up the Signal Store Feature with Resource API

```typescript
import {
  signalStoreFeature,
  withMethods,
  type EmptyFeatureResult,
  type SignalStoreFeature,
  type SignalStoreFeatureResult,
  type Prettify,
  type StateSignals,
  type WritableStateSource,
} from '@ngrx/signals';
import {
  ResourceOptions,
  ResourceRef,
  resource,
} from '@angular/core';

const lowerFirstLetter = <T extends string>(value: T): Uncapitalize<T> => {
  if (typeof value !== 'string') {
    return value;
  }

  const trimmed = value.trim();
  const first: string = trimmed.charAt(0).toLowerCase();
  const rest: string = trimmed.slice(1);

  return `${first}${rest}` as Uncapitalize<T>;
};

export type ResourceStore<Input extends SignalStoreFeatureResult> = Prettify<
  StateSignals<Input['state']> & Input['computed'] & Input['methods'] & WritableStateSource<Prettify<Input['state']>>
>;

export type CreateResourceFn<
  TDataFn = unknown,
  Input extends SignalStoreFeatureResult = SignalStoreFeatureResult,
> = (store: ResourceStore<Input>) => () => ResourceOptions<TDataFn, unknown>;

export type ResourceProp<Name extends string> = `${Uncapitalize<Name>}Resource`;

export type ResourceMethod<TData = unknown> = (() => ResourceRef<TData>) &
  ResourceRef<TData>;

export const withResourceFeature = <
  Name extends string,
  TDataFn = unknown,
  TData = TDataFn,
  Input extends SignalStoreFeatureResult = SignalStoreFeatureResult,
>(
  name: Name,
  createResourceFn: CreateResourceFn<TData, NoInfer<Input>>,
): SignalStoreFeature<
  Input,
  EmptyFeatureResult & { methods: Record<ResourceProp<NoInfer<Name>>, ResourceMethod<NoInfer<TData>>> }
> => {

  return signalStoreFeature(
    withMethods((store) => {

      const resourceOptions = createResourceFn(store as ResourceStore<NoInfer<Input>>)
      const resourceTarget = resource(resourceOptions());

      const prop: ResourceProp<NoInfer<Name>> = `${lowerFirstLetter(name)}Resource`;

      return {
        [prop]: new Proxy(() => resourceTarget, {
          get: (_, prop) => Reflect.get(resourceTarget, prop),
          has: (_, prop) => Reflect.has(resourceTarget, prop),
        }),
      } as Record<ResourceProp<NoInfer<Name>>, ResourceMethod<NoInfer<TData>>>;
    }),
  )
};
```

### Creating the Store with Resource Feature

Next, let’s create a store with the **Resource API** to manage remote data:

```typescript
import { patchState, signalStore, withMethods, withState } from '@ngrx/signals';
import { withResourceFeature } from '../store/with-resource.feature';
import { JsonPipe } from '@angular/common';

const PostStore = signalStore(
  withState({
    postId: 1,
  }),
  withMethods(store => ({
    nextPost : () => {
      patchState(store, (state) => ({
        postId: state.postId > 9 ? 1 : state.postId + 1
      }));
    }
  })),
  withResourceFeature('postId', (store) => {
    return () => {
      return {
        request: () => store.postId(),
        loader: async ({request: postId, abortSignal }) => {
          const API_URL = 'https://jsonplaceholder.typicode.com'

          const response = await fetch(`${API_URL}/posts/${postId}`, {
            signal: abortSignal,
          });

          if(!response.ok) throw new Error(`Error fetching post id: ${postId}`);

          const jsonResponse = await response.json();
          return jsonResponse as {
            userId: number;
            id: number;
            title: string;
            body: string;
          };
        }
      };
    };
  })
);
```

### Component Integration

Now, let’s wire everything up into a component where we display the fetched data:

```typescript
@Component({
  selector: 'app-post-details',
  standalone: true,
  providers: [PostStore],
  imports: [JsonPipe],
  template: `
    @let post = store.postIdResource();

    @if(post.isLoading()) {
      <div>Loading...</div>
    }
    @if(post.error()) {
      <div>Error</div>
    }
    @if(post.value()) {
      <pre>{{ post.value() | json }}</pre>
    }

    <button (click)="store.nextPost()">Fetch Next Post</button>
    <button (click)="post.reload()">Refetch Post</button>
  `,
})
export class ProductDetailsComponent {
  readonly store = inject(PostStore);
}
```

## Real-World Benefits

1. **Simplified State Logic**: Less code, more functionality.
2. **Optimized Performance**: Built-in caching and background updates.
3. **Easier Debugging**: Clear, predictable state transitions.
4. **Faster Development**: Focus on logic, not configuration.

## Potential Pitfalls to Watch

- Always use `inject()` for service dependencies.
- Leverage `ChangeDetectionStrategy.OnPush` religiously.
- Handle error states gracefully.

## Wrapping Up

With the **Resource API** in Angular, we are not just looking at a new feature—it's a paradigm shift for how we manage state and fetch data. Combining it with **NgRx Signal Store** enables developers to build more reactive, efficient, and maintainable applications with minimal effort. As Angular continues to innovate, tools like this will help shape the future of web development.

**Happy Coding!**


Angular

Rxjs

Angular NgRx Signal Store Resource: State Management Revolution

Enter NgRx Signal Store and Tanstack Query—a powerful integration that simplifies state management and data fetching while embracing Angular's reactive programming philosophy, allowing to streamline workflows, reduce boilerplate, and improve developer productivity—all while enhancing application performance.

## The State Management Dilemma

Frontend developers know the drill. You start with simple state management, and before you know it, you're drowning in complex reducers, endless action types, and convoluted data flows. RxJS simplifies reactivity, but it often adds its own layer of complexity.

### What Makes This Solution Powerful

- **Reactive Signals**: Angular's new primitive that changes the game
- **Declarative Data Fetching**: Say goodbye to async complexity
- **Minimal Boilerplate**: Write less, do more
- **Type Safety**: Catch issues before they become problems

## Implementation Deep Dive

I’ll walk you through how to implement this state management approach step by step.

### Creating a Powerful Query Integration Utility

Here's the code that bridges Signal Store and TanStack Query:

```typescript
import {
  type EmptyFeatureResult,
  signalStoreFeature,
  type SignalStoreFeature,
  type SignalStoreFeatureResult,
  withMethods,
  type Prettify,
  type StateSignals,
  type WritableStateSource,
} from '@ngrx/signals';

import {
  type CreateQueryOptions,
  type CreateQueryResult,
  injectQuery, type QueryKey 
} from '@tanstack/angular-query-experimental';

const lowerFirstLetter = <T extends string>(value: T): Uncapitalize<T> => {
  if (typeof value !== 'string') {
    return value;
  }

  const trimmed = value.trim();

  const first: string = trimmed.charAt(0).toLowerCase();
  const rest: string = trimmed.slice(1);

  return `${first}${rest}` as Uncapitalize<T>;
};

export type QueryStore<Input extends SignalStoreFeatureResult> = Prettify<
  StateSignals<Input['state']> & Input['computed'] & Input['methods'] & WritableStateSource<Prettify<Input['state']>>
>;

export type CreateQueryFn<
  TDataFn = unknown,
  TError = Error,
  TData = TDataFn,
  TQueryKey extends QueryKey = QueryKey,
  Input extends SignalStoreFeatureResult = SignalStoreFeatureResult,
> = (store: QueryStore<Input>) => () => CreateQueryOptions<TDataFn, TError, TData, TQueryKey>;

export type QueryProp<Name extends string> = `${Uncapitalize<Name>}TanstackQuery`;

export type QueryMethod<TData = unknown, TError = Error> = (() => CreateQueryResult<TData, TError>) &
  CreateQueryResult<TData, TError>;
export const withTanstackQuery = <
  Name extends string,
  TDataFn = unknown,
  TError = Error,
  TData = TDataFn,
  TQueryKey extends QueryKey = QueryKey,
  Input extends SignalStoreFeatureResult = SignalStoreFeatureResult,
>(
  name: Name,
  createQueryFn: CreateQueryFn<TDataFn, TError, TData, TQueryKey, NoInfer<Input>>,
): SignalStoreFeature<
  Input,
  EmptyFeatureResult & { methods: Record<QueryProp<NoInfer<Name>>, QueryMethod<NoInfer<TData>, NoInfer<TError>>> }
> => {
  const prop: QueryProp<NoInfer<Name>> = `${lowerFirstLetter(name)}TanstackQuery`;
  
  return signalStoreFeature(
    withMethods((store) => {
      const query = injectQuery(createQueryFn(store as QueryStore<NoInfer<Input>>));
      
      return {
        [prop]: new Proxy(() => query, {
          get: (_, prop) => Reflect.get(query, prop),
          has: (_, prop) => Reflect.has(query, prop),
        }),
      } as Record<QueryProp<NoInfer<Name>>, QueryMethod<NoInfer<TData>, NoInfer<TError>>>;
    }),
  );
};
```

### Crafting a Store with Integrated Queries

Check out how to structure the store:

```typescript
export const PostStore = signalStore(
  withState({ postId: 1}),
  withTanstackQuery('postId', (store) => {
    const apiService = inject(ApiPostService);
    
    return () => {
      const postId = store.postId();
      
      return {
        enabled: !!postId,
        queryKey: ['post', { id: postId }],
        queryFn: () => 
          lastValueFrom(apiService.getPost$(postId)).catch((error) => {
            console.error(error);
            return null;
          }),
      };
    };
  }),
);
```

### Seamless Component Integration

It's really simple:

```typescript
@Component({
  standalone: true,
  selector: 'app-example',
  template: `
    <pre>
      Loading: {{ store.postIdTanstackQuery.isLoading() }}
      Fetching: {{ store.postIdTanstackQuery.isFetching() }}
      Data:
      {{ store.postIdTanstackQuery.data() | json }}
    </pre>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [JsonPipe],
})
export class ExampleComponent {
  public readonly store = inject(PostStore);
}
```

## Real-World Benefits

1. **Simplified State Logic**: Less code, more functionality
2. **Optimized Performance**: Built-in caching and background updates
3. **Easier Debugging**: Clear, predictable state transitions
4. **Faster Development**: Focus on logic, not configuration

## Potential Pitfalls to Watch

- Always use `inject()` for service dependencies
- Leverage `ChangeDetectionStrategy.OnPush` religiously
- Handle error states gracefully
- Master query key strategies for caching and invalidation

## Useful Resources

- [TanStack Query for Angular](https://tanstack.com/query/latest/docs/framework/angular/overview)
- [NgRx Signal Store Documentation](https://ngrx.io/guide/signals/signal-store)

## Wrapping Up

As Angular continues to evolve, solutions like NgRx Signal Store and Tanstack Query highlight the potential of modern web development. By embracing these tools, we not only solve today’s challenges but also prepare ourselves for a future of more efficient and scalable applications.

**Happy Coding!**

Angular Signal Store Query: A Glimpse into the Future

In the ever-evolving world of Angular development, efficient state management is crucial for building robust and scalable applications. NgRx Component Store, a powerful library in the NgRx ecosystem, offers a streamlined approach to managing local state in Angular apps. This comprehensive guide will walk you through implementing NgRx Component Store in a real-world scenario: an e-commerce product catalog system.

## Getting Started with NgRx Component Store

Before diving into our e-commerce example, let's set up NgRx Component Store in your Angular project:

```bash
ng add @ngrx/component-store
```

This command adds the necessary dependencies to your project, setting the stage for efficient state management.

## Building a Product Catalog Store

Let's create a component store for our product catalog:

```typescript
import { Injectable } from '@angular/core';
import { ComponentStore } from '@ngrx/component-store';

interface Product {
  id: number;
  name: string;
  description: string;
  price: number;
  category: string;
  inStock: boolean;
}

interface ProductCatalogState {
  products: Product[];
  loading: boolean;
  error: string | null;
  selectedProductId: number | null;
  searchTerm: string;
  categoryFilter: string | null;
}

@Injectable()
export class ProductCatalogStore extends ComponentStore<ProductCatalogState> {
  constructor() {
    super({
      products: [],
      loading: false,
      error: null,
      selectedProductId: null,
      searchTerm: '',
      categoryFilter: null
    });
  }
}
```

This structure forms the foundation of our product catalog state management.

## Effective State Management Techniques

Efficient state management is key to a performant Angular application. Let's add selectors to our store:

```typescript
import { Observable } from 'rxjs';

@Injectable()
export class ProductCatalogStore extends ComponentStore<ProductCatalogState> {
  // ... previous code

  // Selectors
  readonly products$: Observable<Product[]> = this.select(state => state.products);
  readonly loading$: Observable<boolean> = this.select(state => state.loading);
  readonly error$: Observable<string | null> = this.select(state => state.error);
  readonly selectedProduct$: Observable<Product | undefined> = this.select(
    state => state.products.find(product => product.id === state.selectedProductId)
  );
  readonly filteredProducts$: Observable<Product[]> = this.select(
    this.products$,
    state => state.searchTerm,
    state => state.categoryFilter,
    (products, searchTerm, categoryFilter) => {
      return products
        .filter(product => product.name.toLowerCase().includes(searchTerm.toLowerCase()))
        .filter(product => !categoryFilter || product.category === categoryFilter);
    }
  );
}
```

These selectors provide a clean way to access and derive state in your components.

## Implementing CRUD Operations

CRUD (Create, Read, Update, Delete) operations are essential for any e-commerce platform. Let's implement these using updaters:

```typescript
@Injectable()
export class ProductCatalogStore extends ComponentStore<ProductCatalogState> {
  // ... previous code

  // Updaters
  readonly setProducts = this.updater((state, products: Product[]) => ({
    ...state,
    products
  }));

  readonly addProduct = this.updater((state, product: Product) => ({
    ...state,
    products: [...state.products, product]
  }));

  readonly updateProduct = this.updater((state, updatedProduct: Product) => ({
    ...state,
    products: state.products.map(product =>
      product.id === updatedProduct.id ? updatedProduct : product
    )
  }));

  readonly removeProduct = this.updater((state, productId: number) => ({
    ...state,
    products: state.products.filter(product => product.id !== productId)
  }));
}
```

These updaters provide a predictable way to modify the state of our product catalog.

## Optimizing Performance with Selectors

Selectors play a crucial role in optimizing the performance of your Angular application. They help in deriving complex state and preventing unnecessary re-renders:

```typescript
import { map } from 'rxjs/operators';

@Injectable()
export class ProductCatalogStore extends ComponentStore<ProductCatalogState> {
  // ... previous code

  readonly productsByCategory$ = this.select(
    this.products$,
    (products) => {
      const categorizedProducts: { [key: string]: Product[] } = {};
      products.forEach(product => {
        if (!categorizedProducts[product.category]) {
          categorizedProducts[product.category] = [];
        }
        categorizedProducts[product.category].push(product);
      });
      return categorizedProducts;
    }
  );

  readonly totalValue$ = this.select(
    this.products$,
    (products) => products.reduce((total, product) => total + product.price, 0)
  );
}
```

These advanced selectors demonstrate how to derive complex state efficiently.

## Handling Asynchronous Operations

In real-world applications, asynchronous operations like API calls are common. Let's implement effects to handle these:

```typescript
import { Injectable } from '@angular/core';
import { ComponentStore } from '@ngrx/component-store';
import { HttpClient } from '@angular/common/http';
import { Observable, catchError, switchMap, tap } from 'rxjs';

@Injectable()
export class ProductCatalogStore extends ComponentStore<ProductCatalogState> {
  constructor(private http: HttpClient) {
    super({
      products: [],
      loading: false,
      error: null,
      selectedProductId: null,
      searchTerm: '',
      categoryFilter: null
    });
  }

  // ... previous code

  // Effects
  readonly loadProducts = this.effect((trigger$: Observable<void>) => {
    return trigger$.pipe(
      tap(() => this.setLoading(true)),
      switchMap(() => this.http.get<Product[]>('https://api.example.com/products').pipe(
        tap({
          next: (products) => {
            this.setProducts(products);
            this.setLoading(false);
          },
          error: (error) => {
            this.setError('Failed to load products. Please try again later.');
            this.setLoading(false);
          }
        }),
        catchError(() => []) // Return empty array on error
      ))
    );
  });
}
```

This effect demonstrates how to handle API calls and manage loading states effectively.

## Advanced Features: Search and Filtering

Implementing search and filtering enhances user experience in an e-commerce application:

```typescript
@Injectable()
export class ProductCatalogStore extends ComponentStore<ProductCatalogState> {
  // ... previous code

  readonly search = this.effect((searchTerm$: Observable<string>) => {
    return searchTerm$.pipe(
      tap((searchTerm) => this.setSearchTerm(searchTerm)),
      switchMap((searchTerm) =>
        this.http.get<Product[]>(`https://api.example.com/products?search=${searchTerm}`).pipe(
          tap({
            next: (products) => this.setProducts(products),
            error: (error) => this.setError('Failed to search products. Please try again.')
          })
        )
      )
    );
  });

  readonly filterByCategory = this.effect((category$: Observable<string | null>) => {
    return category$.pipe(
      tap((category) => this.setCategoryFilter(category)),
      switchMap((category) =>
        this.http.get<Product[]>(`https://api.example.com/products${category ? `?category=${category}` : ''}`).pipe(
          tap({
            next: (products) => this.setProducts(products),
            error: (error) => this.setError('Failed to filter products. Please try again.')
          })
        )
      )
    );
  });
}
```

These effects demonstrate how to implement search and filtering functionality using NgRx Component Store.

## Best Practices for NgRx Component Store

To get the most out of NgRx Component Store, follow these best practices:

1. **Minimize State**: Keep your state as lean as possible. Derive complex state using selectors.
2. **Use Updaters for Synchronous Operations**: Prefer updaters for simple, synchronous state changes.
3. **Leverage Effects for Asynchronous Operations**: Use effects to handle side effects and asynchronous operations like API calls.
4. **Optimize Selectors**: Use the `distinctUntilChanged` operator on your selectors to prevent unnecessary re-renders.
5. **Handle Errors Gracefully**: Always include error handling in your effects and provide meaningful error messages to users.
6. **Test Your Store**: Write unit tests for your selectors, updaters, and effects to ensure they work as expected.

## Conclusion

NgRx Component Store offers a powerful and flexible approach to state management in Angular applications. By following the techniques and best practices outlined in this guide, you can build efficient, scalable, and maintainable e-commerce applications. Remember to keep your state focused, leverage RxJS operators for complex operations, and always prioritize performance and user experience.

As you continue to explore NgRx Component Store, you'll discover even more ways to optimize your Angular applications. 

Happy coding

Angular  NgRx Component Store: A Comprehensive Guide

In the ever-evolving landscape of Java development, optimizing application architecture is crucial for maintaining efficient, scalable, and maintainable codebases. One powerful feature that has gained significant traction in the Spring Boot ecosystem is the `@Aspect` annotation. This article explores how `@Aspect` can revolutionize your application's structure, leading to improved performance and code organization.

## Understanding @Aspect in Spring Boot

`@Aspect` is a key component of Aspect-Oriented Programming (AOP) in Spring Boot. AOP is a programming paradigm that allows developers to separate cross-cutting concerns from the main business logic of an application. This separation results in cleaner, more modular code that is easier to maintain and extend.

## Key Benefits of Using @Aspect

1. **Improved Code Organization**: By separating cross-cutting concerns, developers can focus on core business logic, resulting in cleaner and more maintainable code.

2. **Enhanced Performance**: `@Aspect` allows for efficient handling of repetitive tasks, such as logging and security checks, without cluttering the main codebase.

3. **Increased Productivity**: Developers can reuse aspect code across multiple parts of the application, reducing development time and increasing overall productivity.

4. **Better Resource Management**: Aspects can be used to optimize resource allocation and management, leading to improved application performance.

5. **Simplified Debugging and Monitoring**: Centralized handling of cross-cutting concerns makes it easier to debug issues and monitor application performance.

## Practical Applications with Code Examples

### 1. Logging and Auditing

Implementing comprehensive logging and auditing systems is crucial for maintaining security and compliance. With `@Aspect`, you can automatically log method entries and exits, track actions, and monitor performance metrics without modifying existing code.

Example of a logging aspect:

```java
import org.aspectj.lang.ProceedingJoinPoint;
import org.aspectj.lang.annotation.Around;
import org.aspectj.lang.annotation.Aspect;
import org.springframework.stereotype.Component;

@Aspect
@Component
public class LoggingAspect {

    @Around("execution(* com.yourcompany.*.service.*.*(..))")
    public Object logMethodExecution(ProceedingJoinPoint joinPoint) throws Throwable {
        String methodName = joinPoint.getSignature().getName();
        logger.info("Entering method: {}", methodName);
        
        long startTime = System.currentTimeMillis();
        Object result = joinPoint.proceed();
        long executionTime = System.currentTimeMillis() - startTime;
        
        logger.info("Exiting method: {}. Execution time: {}ms", methodName, executionTime);
        return result;
    }
}
```

This aspect will automatically log the entry and exit of all methods in your service layer, along with their execution time.

### 2. Security and Authentication

Enhancing application security is a top priority for any organization. `@Aspect` can be used to implement method-level security checks and validate user permissions before executing sensitive operations.

Example of a security aspect:

```java
import org.aspectj.lang.ProceedingJoinPoint;
import org.aspectj.lang.annotation.Around;
import org.aspectj.lang.annotation.Aspect;
import org.springframework.stereotype.Component;

@Aspect
@Component
public class SecurityAspect {

    @Around("@annotation(com.yourcompany.security.RequiresAdmin)")
    public Object checkAdminAccess(ProceedingJoinPoint joinPoint) throws Throwable {
        if (securityService.currentUserIsAdmin()) {
            return joinPoint.proceed();
        } else {
            throw new AccessDeniedException("Admin access required for this operation");
        }
    }
}
```

This aspect intercepts methods annotated with `@RequiresAdmin` and checks if the current user has admin privileges before allowing the method to execute.

### 3. Transaction Management

Ensuring data integrity in complex business operations is critical. `@Aspect` simplifies transaction management by automatically starting, committing, or rolling back transactions.

Example of a transaction management aspect:

```java
import org.aspectj.lang.ProceedingJoinPoint;
import org.aspectj.lang.annotation.Around;
import org.aspectj.lang.annotation.Aspect;
import org.springframework.stereotype.Component;
import org.springframework.transaction.TransactionStatus;
import org.springframework.transaction.support.TransactionTemplate;

@Aspect
@Component
public class TransactionAspect {

    private final TransactionTemplate transactionTemplate;

    public TransactionAspect(TransactionTemplate transactionTemplate) {
        this.transactionTemplate = transactionTemplate;
    }

    @Around("@annotation(com.yourcompany.transaction.Transactional)")
    public Object manageTransaction(ProceedingJoinPoint joinPoint) throws Throwable {
        return transactionTemplate.execute((TransactionStatus status) -> {
            try {
                return joinPoint.proceed();
            } catch (Throwable throwable) {
                status.setRollbackOnly();
                throw new RuntimeException("Transaction failed, rolling back", throwable);
            }
        });
    }
}
```

This aspect manages transactions for methods annotated with `@Transactional`, automatically committing successful operations and rolling back in case of exceptions.

### 4. Caching

Optimizing application performance often involves effective caching strategies. With `@Aspect`, you can implement method-level caching without modifying existing code.

Example of a caching aspect:

```java
import org.aspectj.lang.ProceedingJoinPoint;
import org.aspectj.lang.annotation.Around;
import org.aspectj.lang.annotation.Aspect;
import org.springframework.stereotype.Component;
import java.util.concurrent.ConcurrentHashMap;

@Aspect
@Component
public class CachingAspect {

    private final ConcurrentHashMap<String, Object> cache = new ConcurrentHashMap<>();

    @Around("@annotation(com.yourcompany.cache.Cacheable)")
    public Object cacheMethod(ProceedingJoinPoint joinPoint) throws Throwable {
        String cacheKey = generateCacheKey(joinPoint);
        
        if (cache.containsKey(cacheKey)) {
            return cache.get(cacheKey);
        }
        
        Object result = joinPoint.proceed();
        cache.put(cacheKey, result);
        return result;
    }

    private String generateCacheKey(ProceedingJoinPoint joinPoint) {
        // Implementation to generate a unique cache key based on method and parameters
        return joinPoint.getSignature().toString();
    }
}
```

This aspect implements a simple caching mechanism for methods annotated with `@Cacheable`, storing and retrieving results based on method signatures.

## Implementation Strategy

To successfully leverage `@Aspect` in your Spring Boot applications, consider the following strategy:

1. **Identify Cross-Cutting Concerns**: Work with your development team to identify common functionalities that span multiple parts of your application.

2. **Design Aspect Architecture**: Create a clear architecture for implementing aspects, ensuring they are modular and reusable.

3. **Implement Gradually**: Start by implementing aspects for non-critical functionalities, gradually expanding to more complex use cases.

4. **Monitor and Optimize**: Regularly review the performance impact of implemented aspects and optimize as necessary.

5. **Educate and Train**: Invest in training your development team to ensure they can effectively leverage `@Aspect` in their daily work.

## Conclusion

Incorporating `@Aspect` into your Spring Boot applications can significantly enhance your software development practices. By enabling cleaner code, improved performance, and increased developer productivity, `@Aspect` provides a powerful tool for modern Java applications.

As you explore the possibilities of Aspect-Oriented Programming in Spring Boot, remember that the key to successful implementation lies in careful planning, gradual adoption, and ongoing optimization. With the right approach, `@Aspect` can be a game-changer for your application's architecture and overall performance.

Happy coding!

Java

Spring Boot

Leveraging @Aspect in Spring Boot: Enhancing Application Architecture

Functional programming (FP) has become a core paradigm in modern software development, and with **Java 8**, the language adopted several functional constructs, such as **lambda expressions**, **streams**, and the **Optional** class. Although Java is primarily object-oriented, these new additions enable developers to write more declarative and concise code, enhancing productivity, readability, and maintainability.

In this guide, we will cover the basics of **functional programming in Java**, explore key concepts such as lambda expressions, method references, and the Stream API, and examine the advantages and potential pitfalls of functional programming. By the end, you will have a solid understanding of how to use functional programming constructs in Java to write more efficient and expressive code.

## What is Functional Programming?

**Functional programming** is a programming paradigm that treats computation as the evaluation of mathematical functions and avoids changing state and mutable data. In functional programming, **functions are first-class citizens**, meaning they can be passed around as arguments, returned from other functions, and stored in variables—just like any other object.

### Key Characteristics of Functional Programming:
- **First-class functions**: Functions are treated as values.
- **Immutability**: Data is immutable, meaning once created, its state cannot change.
- **Pure functions**: Functions do not have side effects, meaning they don’t alter any external state or data.
- **Declarative approach**: Focuses on **what** to do rather than **how** to do it.
- **Higher-order functions**: Functions can accept other functions as parameters or return them.

While **Java** is not a purely functional language like **Haskell** or **Scala**, it adopts many functional programming principles, making Java more flexible and powerful.

## Functional Programming Constructs in Java

### 1. Lambda Expressions

The introduction of **lambda expressions** in Java 8 was a game changer for simplifying the verbosity of anonymous classes and enabling functional programming. A **lambda expression** is essentially an anonymous function—short snippets of code that can be passed as arguments or stored in variables.

A typical lambda expression looks like this:

```java
(parameters) -> expression
```
Here’s an example of using a lambda expression to create a **Comparator** for sorting:

```java
List<String> names = Arrays.asList("Alice", "Bob", "Charlie");
Collections.sort(names, (s1, s2) -> s1.compareTo(s2));
```
In this case, `(s1, s2) -> s1.compareTo(s2)` is a lambda expression representing a `Comparator`.

#### Advantages of Lambda Expressions:
- **Concise code**: Reduces boilerplate code and makes the code more readable.
- **Declarative programming**: Focuses on what the function does rather than how it is implemented.

### 2. Method References

**Method references** are shorthand for lambda expressions that call an existing method. Java provides several types of method references:
- **Static method reference**: `ClassName::staticMethod`
- **Instance method reference**: `instance::method`
- **Constructor reference**: `ClassName::new`

Here’s an example using a method reference instead of a lambda expression:

```java
List<String> names = Arrays.asList("Alice", "Bob", "Charlie");
names.forEach(System.out::println);
```
In this case, `System.out::println` is a method reference pointing to the `println` method of `System.out`.

### 3. Functional Interfaces

A **functional interface** is an interface with a single abstract method but can have multiple default or static methods. Functional interfaces are used as the target types for lambda expressions and method references.

Java provides several built-in functional interfaces in the `java.util.function` package, such as:
- **Predicate<T>**: Takes one argument and returns a boolean.
- **Function<T, R>**: Takes one argument and returns a result.
- **Supplier<T>**: Returns a result and takes no arguments.
- **Consumer<T>**: Takes one argument and performs an action without returning any result.

Example of `Predicate` functional interface:

```java
Predicate<Integer> isEven = x -> x % 2 == 0;
System.out.println(isEven.test(4));  // true
```
### 4. The Stream API

The **Stream API** is one of the most powerful features introduced in Java 8, enabling functional-style operations on sequences of elements, such as collections, arrays, or input sources. Streams allow you to express complex data processing queries in a declarative way.

Streams support both **intermediate** operations, which are lazy and return a new stream (like `filter`, `map`, `sorted`), and **terminal** operations, which are eager and produce a result or a side-effect (like `forEach`, `collect`, `reduce`).

Here’s an example of filtering and transforming a list using the Stream API:

```java
List<String> names = Arrays.asList("Alice", "Bob", "Charlie", "David");
List<String> filteredNames = names.stream()
    .filter(name -> name.startsWith("A"))
    .map(String::toUpperCase)
    .collect(Collectors.toList());

System.out.println(filteredNames);  // [ALICE]
```
This code snippet demonstrates the power of streams to compose multiple operations in a clean, declarative manner.

### 5. Optional Class

The **Optional** class provides a way to handle null values more gracefully by encapsulating optional values and avoiding `NullPointerException`. Instead of using `null` to indicate the absence of a value, you can use `Optional` to explicitly state whether a value is present.

Example of using `Optional`:

```java
Optional<String> name = Optional.ofNullable("John");
name.ifPresent(System.out::println);  // John

Optional<String> emptyName = Optional.ofNullable(null);
System.out.println(emptyName.orElse("Unknown"));  // Unknown
```
The `Optional` class makes the code more readable and less prone to errors when dealing with potentially missing values.

## Benefits of Functional Programming in Java

1. **More Readable Code**: With lambda expressions and the Stream API, Java code can become much more declarative, making it easier to read and understand at a glance.
   
2. **Less Boilerplate**: Functional programming in Java reduces the verbosity typical of object-oriented programming by eliminating the need for anonymous classes, especially when dealing with simple tasks like sorting or filtering collections.

3. **Encourages Immutability**: Functional programming promotes immutability, which can lead to fewer bugs, especially in concurrent applications. Immutable objects are inherently thread-safe, avoiding issues related to shared state.

4. **Modular and Testable**: Pure functions are isolated from the outside world, which makes them easier to test and reuse. They rely only on their input and always produce the same output for the same input.

## Potential Pitfalls of Functional Programming in Java

1. **Learning Curve**: For developers unfamiliar with functional programming concepts, it may take time to adjust to writing and understanding lambda expressions, method references, and higher-order functions.

2. **Performance Considerations**: While functional-style code can be more expressive, it can also introduce performance overhead, especially when using streams and lambda expressions in scenarios where performance is critical. Lazy evaluation in streams can mitigate some of this, but it’s essential to profile and optimize if necessary.

3. **Overuse of `Optional`**: Although `Optional` helps to avoid null checks, overuse or inappropriate use (e.g., returning `Optional` in collections) can lead to performance issues and complicate the code.

## Best Practices for Functional Programming in Java

1. **Use Streams for Collection Processing**: Whenever you’re working with collections, consider using streams to filter, map, and reduce data rather than using traditional loops.

2. **Leverage Method References**: Use method references where possible to make your code cleaner and more readable.

3. **Use `Optional` Wisely**: Use `Optional` to represent optional return values but avoid overusing it in places like fields, method parameters, or collections.

4. **Keep Functions Pure**: Whenever possible, write pure functions to avoid unintended side effects. This makes your code easier to reason about and test.

## Conclusion

Functional programming has transformed the way developers write Java code. With the addition of lambda expressions, the Stream API, and the `Optional` class, Java has become much more expressive and powerful. While functional programming may initially seem foreign to Java developers who are used to object-oriented paradigms, embracing these new constructs can lead to more concise, maintainable, and testable code.

By understanding and applying functional programming principles in Java, you can write more efficient and elegant solutions to complex problems. However, as with any paradigm, it’s important to strike a balance between functional and object-oriented styles to avoid overcomplicating your code.

Happy coding!




Functional Programming in Java: A Comprehensive Guide

As a front-end developer, one common problem you may face is ensuring your application doesn't break when the API contract changes. Whether you're working with API responses, external data, or handling backend integration, it’s critical to have a solution that validates the data your front-end consumes. In this article, we’ll explore how using `Zod`, a popular data validation library, can help prevent front-end issues due to `API contract changes`.

## Common Problem: Front-End Breaks Due to API Contract Changes

Imagine you’re developing a feature for your project, and you agree on an `API contract` with the back-end team. You write your code, implement the feature, and even cover multiple test scenarios. Everything works perfectly. However, some time later, the feature stops working.

Upon investigation, you find that the `front-end code` is fine, and all your tests are passing. The issue? The `API response` has changed, and the `API contract` you initially agreed upon is no longer valid. As a result, the feature breaks, and these changes propagate through your entire application.

This is a common issue that many developers face when working with `API integrations`. The key question is: how can you prevent your application from breaking due to unexpected changes in external data?

## Solution: Using Zod for Data Validation

One of the best ways to prevent front-end issues caused by API changes is by validating the external data before using it in your application. This is where `Zod`, a lightweight and flexible data validation library, comes into play. [Zod](https://zod.dev/) allows you to define `schemas` for your data and validate it at runtime, ensuring that any incoming data adheres to the expected structure.

Let’s dive into how you can use Zod to solve this issue.

## Step-by-Step Guide: How to Use Zod for Data Validation

Zod supports various types of data validation. Let’s start with something simple: validating string data.

```javascript
import { z } from 'zod';

const StringSchema = z.string();
const EmailSchema = z.string().email();
const LengthSchema = z.string().min(3).max(15);
```
In the above example, we are defining schemas that validate the data type. Zod doesn’t just check if the value is a string but also ensures that the string matches certain conditions—such as validating an email format or checking if the string has a specific length.

Here’s how you can validate data with Zod:

```javascript
StringSchema.parse(456); // Throws an error because 456 is not a string
StringSchema.parse('hello'); // Passes validation because 'hello' is a string

const result = EmailSchema.safeParse('not-an-email'); 
// Returns { success: false, error: {...} }
```
You can also customize the error messages to be more informative:

```javascript
const CustomStringSchema = z.string().refine(val => val === 'expected', {
  message: 'This is not the expected value!',
});
```
## Using Zod to Validate API Responses

Let’s apply Zod to a more complex scenario: `validating API responses`. Imagine you’re working with an API that returns the following structure:

```typescript
interface ApiResponse {
  id: number;
  name: string;
  items: Item[];
}

interface Item {
  productId: string;
  quantity: number;
}
```
In a typical `Angular` application, you might fetch this data using the `HttpClient` service like this:

```typescript
@Injectable({ providedIn: 'root' })
export class ApiService {
  private readonly http = inject(HttpClient);

  fetchData(): Observable<ApiResponse> {
    return this.http.get<ApiResponse>('/api/data');
  }
}
```
Using `Zod`, you can define a schema that mirrors this structure and validates the API response:

```typescript
import { z } from 'zod';

const ApiResponseSchema = z.object({
  id: z.number(),
  name: z.string(),
  items: z.array(
    z.object({
      productId: z.string(),
      quantity: z.number(),
    })
  ),
});

type ApiResponse = z.infer<typeof ApiResponseSchema>;
```
Here’s how you can integrate this `schema` into your service to ensure the data is valid:

```typescript
@Injectable({ providedIn: 'root' })
export class ZodApiService {
  private readonly http = inject(HttpClient);

  fetchData(): Observable<ApiResponse> {
    return this.http.get('/api/data').pipe(
      map((response) => ApiResponseSchema.parse(response)) // Validates the response
    );
  }
}
```
Now, if the API changes unexpectedly—say the backend sends `itemId` instead of `productId`—Zod will throw an error, allowing you to catch the issue immediately. This proactive validation helps prevent bugs caused by inconsistent data structures.

## Advanced Usage: Creating Custom RxJs Operators for Validation

You can simplify the process even further by creating a custom `RxJs operator` to validate data throughout your application:

```typescript
export function validateWithZod<T extends z.ZodTypeAny>(schema: T) {
  return map((response: unknown) => schema.parse(response));
}

@Injectable({ providedIn: 'root' })
export class ZodApiService {
  private readonly http = inject(HttpClient);

  fetchData(): Observable<ApiResponse> {
    return this.http.get('/api/data').pipe(validateWithZod(ApiResponseSchema));
  }
}
```
Now, whenever the backend returns an invalid response, `Zod` will catch it and display a clear error message in your browser’s console.

For instance, if the backend sends the following response:
```json
{
  "id": 101,
  "name": "Example",
  "items": [
    { "productId": "abc", "quantity": 3 },
    { "productId": "def", "quantity": 2 }
  ]
}
```
Zod will validate the response. If the API structure is incorrect, Zod will notify you with an error message, making it clear where things went wrong.

## Why Data Validation is Crucial for Front-End Developers

In modern `front-end development`, applications often rely on data fetched from external APIs. Since this data is external, it falls outside the scope of TypeScript’s type-checking. This means that when the API response structure changes, your front-end application is at risk of breaking—unless you validate the data.

Using a data validation library like Zod allows you to:
- `Ensure data consistency` across your application
- `Catch errors early`, before they propagate through the system
- `Handle unexpected API changes` effectively
- Provide `better error messages` for debugging

## Conclusion

To sum up, `validating API responses` and other external data is a crucial step in ensuring your front-end application remains robust, even when external systems change. While you can generate types from the API, using a runtime validation tool like Zod provides an extra layer of protection. Zod not only helps you validate data but also allows you to catch and handle errors proactively, saving you time and preventing bugs in the long run.

By integrating Zod into your front-end development workflow, you can effectively mitigate the risks associated with changing API contracts and maintain a stable application.

Happy coding!

How to Prevent Angular Issues with API Contract Changes Using Zod

This article will delve into the seamless fusion of Angular Signals and RxJS, highlighting how these two technologies can effortlessly blend together, showcasing that RxJS continues to shine brightly in their combined usage. The combination of these two technologies can lead to a more efficient and streamlined development process, allowing developers to create more complex applications with ease. By leveraging the power of Angular Signals and RxJS, developers can create reactive applications that are both scalable and maintainable.

## Initial Setup
```html
 <input type="text" (keyup)="search($event)" />
```
*just an input with a keyup event.*
```typescript
 export class AppComponent {
  http = inject(HttpClient);

  search(event: Event) {
    const value = (event.target as HTMLInputElement).value;
  }
}
```
Inside our class has been injected `HttpClient` and created a search function which gets a value of the input but doesn't do anything else.

## Implementing API call

Now, the challenge lies in implementing the retrieval of data from the API both upon initialization and after entering text into the input. We aim to incorporate debouncing to prevent excessive API calls, ensuring that we don't overlook any submitted values already present.

> This is exactly the case where RxJS shines in comparison to signals.
What we are getting from signals is simply a state to read or update the value and computed which returns some value based on another signal. The last thing that we get from signals is effect which allows us to do something when our signal is changed.

This is not what we need for our case here. We have the case where RxJS can help us a lot.
```typescript
export class AppComponent {
  ...
  searchSig = signal<string>('');

  search(event: Event) {
    const value = (event.target as HTMLInputElement).value;
    this.searchSig.set(value);
  }
}
```
Our first step here is to create a `signal` which stores our search value. Now we can update this `signal` when we change the input with `set` function.

But it is not all. We want to make an API call every single time when we change our search. The main problem is that we can't write this code with signal effectively. Now we have a function in Angular which allows us to transform `signal` to the `observable`.
```typescript
import { toObservable, toSignal } from '@angular/core/rxjs-interop';

export class AppComponent {
  ...
  searchSig = signal<string>('');
  articles$ = toObservable(this.searchSig).pipe(
    debounceTime(300),
    distinctUntilChanged(),
    switchMap((searchTerm) =>
      this.http.get<Article[]>(
        `http://localhost:8080/articles?title=${searchTerm}`
      )
    )
  );
}
```
In this instance, we employed the `toObservable` function to convert our `signal` into an `observable`, enabling the application of `RxJS` functions. We incorporated `debounceTime` to prevent excessive API calls, `distinctUntilChanged` to avoid redundant API calls with identical data, and `switchMap` to execute an HTTP request
>So this code just creates an observable from the signal.

This doesn't signal a return to our previous less efficient practices, such as relying on async pipes or subscriptions. We're determined to steer clear of reverting to the digest cycle and the inherent issues it brings.
```typescript
export class AppComponent {
  ...
  articlesSig = toSignal(this.articles$);
}
```
This is why here we created one more property which is a `signal`. We used `toSignal` function to convert our RxJS `observable` to a signal. Now we can safely use it inside our markup is a normal signal.
```html
<div *ngFor="let article of articlesSig()">
  {{ article.title }}
</div>
```
*or with the new built-in for loop.*
```html
@for (article of articlesSig(); track article.title) {
  {{ article.title }}
} 
```
We can see that our API call is done and we rendered a list of article. When we type something it refetches the data with the rules that we wrote in RxJS.

## Conclusion

this article has explored the harmonious integration of Angular Signals and RxJS, demonstrating their synergistic collaboration. By showcasing the effective fusion of these two technologies, we've underscored the ongoing strength of RxJS within this combined usage.

Happy coding!

Angular Signals with RxJS - A practical example

Spring Boot is a popular Java framework that simplifies the process of building robust and scalable applications. One common requirement in enterprise applications is the need to work with multiple data sources. This could be due to various reasons, such as handling different databases, connecting to external services, or segregating data for performance and security purposes. In this article, we will explore how to set up and manage multiple data sources in a Spring Boot application.

## 1. Why Use Multiple Data Sources?

Before diving into the technical details, it's essential to understand why you might need multiple data sources in a Spring Boot application:

- **Data Isolation**: Separate data sources can be used to isolate sensitive data from the main application database. For example, you may store user credentials in a separate database for added security.

- **Performance Optimization**: By segregating data, you can optimize the performance of your application. For instance, storing frequently accessed data in a dedicated database can improve response times.

- **Integration with External Services**: You might need to connect to external services or databases that are not part of your main application database.

- **Legacy Systems**: In enterprise environments, you may need to interact with legacy systems that use different data sources.

## 2. Configuration and Dependency Setup

To set up multiple data sources in a Spring Boot application, you need to follow these steps:

### 2.1. Adding Dependencies

In your `pom.xml` file, include the necessary dependencies:

```xml

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter</artifactId>
</dependency>


<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>


<dependency>
    <groupId>com.zaxxer</groupId>
    <artifactId>HikariCP</artifactId>
</dependency>


<dependency>
    <groupId>com.mysql.cj</groupId>
    <artifactId>mysql-connector-java</artifactId>
</dependency>



```
Ensure you include the JDBC driver for your primary database and any additional dependencies required for your secondary data sources.

### 2.2. Creating Configuration Properties

Create configuration properties for your data sources in `application.properties` or `application.yml`. Define properties for the primary and secondary data sources, such as URL, username, password, and driver class. For example:

```properties
# Primary DataSource
spring.datasource.primary.url=jdbc:mysql://localhost:3306/primary_db
spring.datasource.primary.username=root
spring.datasource.primary.password=root
spring.datasource.primary.driver-class-name=com.mysql.cj.jdbc.Driver

# Secondary DataSource
spring.datasource.secondary.url=jdbc:mysql://localhost:3306/secondary_db
spring.datasource.secondary.username=root
spring.datasource.secondary.password=root
spring.datasource.secondary.driver-class-name=com.mysql.cj.jdbc.Driver
```

## 3. Configuring Multiple Data Sources

In this section, we will configure multiple data sources and create beans for them.

### 3.1. Defining Data Source Beans

In your Spring Boot application, define multiple `DataSource` beans in a configuration class. For example:

```java
@Configuration
@EnableTransactionManagement
public class DataSourceConfig {

    @Primary
    @Bean(name = "primaryDataSource")
    @ConfigurationProperties(prefix = "spring.datasource.primary")
    public DataSource primaryDataSource() {
        return DataSourceBuilder.create().build();
    }

    @Bean(name = "secondaryDataSource")
    @ConfigurationProperties(prefix = "spring.datasource.secondary")
    public DataSource secondaryDataSource() {
        return DataSourceBuilder.create().build();
    }
}
```

In the code above, we use `@ConfigurationProperties` to bind the properties from `application.properties` to the respective `DataSource` beans.

### 3.2. Creating JdbcTemplate Beans

To interact with the databases, create `JdbcTemplate` beans for each data source. These `JdbcTemplate` beans are responsible for executing SQL queries.

```java
@Configuration
public class JdbcTemplateConfig {

    @Primary
    @Bean(name = "primaryJdbcTemplate")
    public JdbcTemplate primaryJdbcTemplate(@Qualifier("primaryDataSource") DataSource dataSource) {
        return new JdbcTemplate(dataSource);
    }

    @Bean(name = "secondaryJdbcTemplate")
    public JdbcTemplate secondaryJdbcTemplate(@Qualifier("secondaryDataSource") DataSource dataSource) {
        return new JdbcTemplate(dataSource);
    }
}
```

## 4. Implementing Repository and Service Layers

Now that you have configured multiple data sources, you can create repository and service layers to interact with each data source independently.

### 4.1. Creating Entity Classes

Define entity classes for each data source. These classes represent the database tables and their relationships. Annotate them with `@Entity` and define the appropriate mappings.

```java
@Entity
@Table(name = "primary_table")
public class PrimaryEntity {
    // Define entity properties and relationships
}

@Entity
@Table(name = "secondary_table")
public class SecondaryEntity {
    // Define entity properties and relationships
}
```

### 4.2. Building Repository Interfaces

Create repository interfaces for each entity using Spring Data JPA. These interfaces will provide CRUD (Create, Read, Update, Delete) operations.

```java
public interface PrimaryRepository extends JpaRepository<PrimaryEntity, Long> {
    // Define custom query methods if needed
}

public interface SecondaryRepository extends JpaRepository<SecondaryEntity, Long> {
    // Define custom query methods if needed
}
```

### 4.3. Developing Service Classes

Build service classes that encapsulate business logic and interact with the repositories. These services will use the respective `JdbcTemplate`  beans to execute queries on the correct data source.

```java
@Service
public class PrimaryService {

    private final JdbcTemplate primaryJdbcTemplate;

    @Autowired
    public PrimaryService(@Qualifier("primaryJdbcTemplate") JdbcTemplate primaryJdbcTemplate) {
        this.primaryJdbcTemplate = primaryJdbcTemplate;
    }

    // Implement service methods using primaryJdbcTemplate
}

@Service
public class SecondaryService {

    private final JdbcTemplate secondaryJdbcTemplate;

    @Autowired
    public SecondaryService(@Qualifier("secondaryJdbcTemplate") JdbcTemplate secondaryJdbcTemplate) {
        this.secondaryJdbcTemplate = secondaryJdbcTemplate;
    }

    // Implement service methods using secondaryJdbcTemplate
}
```

## 5. Transaction Management

When working with multiple data sources, it's crucial to manage transactions correctly. Spring Boot provides transaction management capabilities that you can leverage.

### 5.1. Configuring Transaction Managers

Configure transaction managers for each data source in your configuration class:

```java
@Configuration
@EnableTransactionManagement
public class TransactionManagerConfig {

    @Primary
    @Bean(name = "primaryTransactionManager")
    public PlatformTransactionManager primaryTransactionManager(
            @Qualifier("primaryDataSource") DataSource primaryDataSource) {
        return new DataSourceTransactionManager(primaryDataSource);
    }

    @Bean(name = "secondaryTransactionManager")
    public PlatformTransactionManager secondaryTransactionManager(
            @Qualifier("secondaryDataSource") DataSource secondaryDataSource) {
        return new DataSourceTransactionManager(secondaryDataSource);
    }
}
```

In the code above, we define `PlatformTransactionManager` beans for both data sources.

### 5.2. Transactional Annotations

Use the `@Transactional` annotation to specify transaction boundaries in your service methods. You can indicate which transaction manager to use for each method.

```java
@Service
public class PrimaryService {

    private final JdbcTemplate primaryJdbcTemplate;

    @Autowired
    public PrimaryService(@Qualifier("primaryJdbcTemplate") JdbcTemplate primaryJdbcTemplate) {
        this.primaryJdbcTemplate = primaryJdbcTemplate;
    }

    @Transactional(transactionManager = "primaryTransactionManager")
    public void performPrimaryDataOperation() {
        // Perform database operations using primaryJdbcTemplate
    }
}

@Service
public class SecondaryService {

    private final JdbcTemplate secondaryJdbcTemplate;

    @Autowired
    public SecondaryService(@Qualifier("secondaryJdbcTemplate") JdbcTemplate secondaryJdbcTemplate) {
        this.secondaryJdbcTemplate = secondaryJdbcTemplate;
    }

    @Transactional(transactionManager = "secondaryTransactionManager")
    public void performSecondaryDataOperation() {
        // Perform database operations using secondaryJdbcTemplate
    }
}
```

By specifying the `transactionManager` attribute in the `@Transactional` annotation, you ensure that each method operates within the correct transaction context.

## 6. Testing Multiple Data Sources

To ensure the reliability and correctness of your multiple data source setup, you need to create comprehensive tests.

### 6.1. Unit Testing

For unit testing, you can use tools like JUnit and Mockito to mock the data source interactions. Create test cases for your service methods and validate their behavior.

```java
@RunWith(MockitoJUnitRunner.class)
public class PrimaryServiceTest {

    @InjectMocks
    private PrimaryService primaryService;

    @Mock
    private JdbcTemplate primaryJdbcTemplate;

    @Test
    public void testPerformPrimaryDataOperation() {
        // Mock database interaction and test the service method
    }
}

@RunWith(MockitoJUnitRunner.class)
public class SecondaryServiceTest {

    @InjectMocks
    private SecondaryService secondaryService;

    @Mock
    private JdbcTemplate secondaryJdbcTemplate;

    @Test
    public void testPerformSecondaryDataOperation() {
        // Mock database interaction and test the service method
    }
}
```

### 6.2. Integration Testing

For integration testing, you can use Spring's `@SpringBootTest` annotation to create test configurations that mimic your production environment. You can also use an embedded database like H2 for testing.

```java
@SpringBootTest
public class MultipleDataSourceIntegrationTest {

    @Autowired
    private PrimaryService primaryService;

    @Autowired
    private SecondaryService secondaryService;

    @Test
    public void testMultipleDataSources() {
        // Write integration tests to validate interactions between services
    }
}
```

## 7. Conclusion
Setting up and managing multiple data sources in a Spring Boot application can be a challenging but necessary task for many enterprise applications. By following the steps outlined in this article, you can achieve data isolation, optimize performance, and integrate seamlessly with various data sources.

Remember to configure the necessary dependencies, create and configure data source beans and JdbcTemplate beans, implement repository and service layers, and manage transactions correctly. Comprehensive unit and integration testing are crucial to ensure the reliability and correctness of your multiple data source setup.

With the right design and careful implementation, Spring Boot makes it possible to work with multiple data sources efficiently, enabling you to build robust and scalable applications that meet the complex data requirements of modern enterprise systems.

Setting Up Multiple Data Sources in a Spring Boot Application

React is a popular JavaScript library for building user interfaces, and Next is a powerful framework built on top of React, designed for server-side rendering and static site generation. With the continuous improvement of React and Next, new features have been introduced to enhance performance and user experience. Two such features are Lazy and Suspense.

## Lazy Loading

Lazy loading is a technique that allows you to load components only when they are needed. This can significantly improve the initial load time of your application by reducing the size of the initial JavaScript bundle.

In React, you can use the `React.lazy` function to create a lazy-loaded component. The `React.lazy` function takes a function that returns a dynamic import. This means you can use dynamic imports to load the component's module only when it's required.

```jsx
import React, { lazy, Suspense } from 'react';

const LazyComponent = lazy(() => import('./LazyComponent'));

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}
```
In the code above, the `LazyComponent` is imported lazily using `React.lazy`. The `Suspense` component is used to wrap the lazy component and specify a fallback to display while the lazy component is being loaded. The fallback will be shown until the lazy component is fully loaded and ready to render.

## Suspense for Data Fetching

React's Suspense feature goes beyond lazy loading and also allows you to handle asynchronous data fetching in a more elegant way. Before Suspense, handling asynchronous data fetching involved using various libraries and complex state management. With Suspense, you can easily handle data fetching and error handling using a more declarative approach.

To use `Suspense` for data fetching, you can use the `React.Suspense` component along with the `React.lazy` function. Here's an example of fetching data from an API and displaying it with Suspense:

```jsx
import React, { lazy, Suspense } from 'react';

const fetchData = () => {
  return fetch('https://api.example.com/data')
    .then((response) => response.json());
};

const LazyComponentWithData = lazy(() => import('./LazyComponentWithData'));

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponentWithData data={fetchData()} />
      </Suspense>
    </div>
  );
}
```
## Error Handling with Suspense

Another advantage of using Suspense is its built-in error handling. If the lazy component or the data fetching encounters an error, Suspense will automatically catch the error and display the fallback UI.

To handle errors with Suspense, you can use the `ErrorBoundary` component provided by React:

```jsx
import React, { lazy, Suspense } from 'react';

const fetchData = () => {
  return fetch('https://api.example.com/data')
    .then((response) => response.json());
};

const LazyComponentWithData = lazy(() => import('./LazyComponentWithData'));

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) {
      return <div>Something went wrong.</div>;
    }

    return this.props.children;
  }
}

function App() {
  return (
    <div>
      <ErrorBoundary>
        <Suspense fallback={<div>Loading...</div>}>
          <LazyComponentWithData data={fetchData()} />
        </Suspense>
      </ErrorBoundary>
    </div>
  );
}
```

In this example, we've created an `ErrorBoundary` component that catches any errors that occur within its children. If an error occurs, it will display an error message. By wrapping the `Suspense` component with the `ErrorBoundary`, you can handle errors that may happen during lazy loading or data fetching gracefully.

## Using Lazy and Suspense in Next.js

Next.js extends the capabilities of React by adding server-side rendering (SSR) and static site generation (SSG). The good news is that you can also use Lazy and Suspense in your Next.js applications to improve the performance and user experience.

To use Lazy and Suspense in Next.js, you can follow the same approach as in regular React applications. Simply use the `React.lazy` function to create lazy-loaded components and wrap them with the `React.Suspense` component for data fetching, just like we did earlier.

However, there is one additional step you need to consider in Next.js. Since Next.js supports server-side rendering and static site generation, you need to make sure that dynamic imports are used only on the client-side to avoid any server-side conflicts.

To achieve this, you can use the `dynamic` function from Next.js instead of the `React.lazy` function. The `dynamic` function allows you to specify options, such as whether the component should be loaded on the server-side or the client-side.

Here's an example of using `dynamic` in Next.js:

```jsx
import React, { Suspense } from 'react';
import dynamic from 'next/dynamic';

const DynamicComponent = dynamic(() => import('./DynamicComponent'), {
  loading: () => <div>Loading...</div>,
  ssr: false, // Set to true if you want to load the component on the server-side
});

function NextApp() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <DynamicComponent />
      </Suspense>
    </div>
  );
}
```

In this example, we import the `dynamic` function from Next.js and use it to load the `DynamicComponent`. We set `ssr` to `false` to ensure that the component is only loaded on the client-side.

## Conclusion

Lazy and Suspense are powerful features introduced in React to enhance the performance and user experience of your applications. By leveraging lazy loading and Suspense for data fetching, you can significantly improve the loading time and handle asynchronous data fetching with ease. Additionally, when using Next.js, make sure to use the `dynamic` function to ensure proper handling of server-side rendering and static site generation. So, consider using Lazy and Suspense in your React and Next.js applications to take advantage of these powerful features and create faster and more efficient web applications.

Happy coding!

Using Lazy and Suspense in React.js and Next.js

In the world of web development, delivering high-performance and dynamic websites is crucial for providing an exceptional user experience. Static Generation (SG) has been a go-to approach for generating static pages in Next.js, ensuring fast load times and server efficiency. However, as applications become more dynamic, maintaining up-to-date content can be challenging. That's where Incremental Static Generation (ISG) steps in, bridging the gap between static pages and real-time updates.

Next.js, a popular React framework, introduces ISG as an advanced feature that takes the benefits of Static Generation and augments them with the ability to update pages at runtime. It offers developers the power to seamlessly blend pre-rendered pages with dynamic content, resulting in fast-loading websites that display the latest data.

## Static Generation (SG) in Next.js
Static Generation is a feature in Next.js that allows you to pre-render pages at build time. This means that the HTML for each page is generated once and then served to clients as static files, greatly improving performance and reducing server load.

However, there are cases where Static Generation alone may not be sufficient. For example, if you have dynamic content that frequently changes or data that needs to be fetched from an external API, static pages generated during build time won't reflect the latest data.

## Enter Incremental Static Generation (ISG)
Incremental Static Generation (ISG) is an advanced feature introduced in Next.js 10.2 that combines the benefits of Static Generation with the ability to update static pages at runtime. It allows you to re-generate static pages on-demand or in the background, ensuring that your website or application always displays up-to-date information.

## How does ISG work?
ISG leverages Next.js's hybrid approach to rendering. It initially generates static pages during the build process but leaves certain parts of the page as "unfilled" or "unstable." These unfilled parts act as placeholders for dynamic content that will be generated or updated later.

When a user visits a page with unfilled parts, Next.js loads the static content immediately and then fetches the dynamic data in the background. Once the data is available, Next.js regenerates the page with the updated content and caches it for subsequent requests.

## Benefits of ISG
1. **Improved performance**: ISG allows you to have the best of both worlds by serving static content for fast initial page loads while still updating and re-rendering dynamic parts as needed. This approach strikes a balance between performance and up-to-date information.

2. **Real-time data**: With ISG, you can fetch data from APIs or databases at runtime, ensuring that your pages are always displaying the latest information. This is particularly useful for frequently changing data, such as social media feeds or stock prices.

3. **Lower server load**: By generating and caching static pages, ISG reduces the load on your server. It can handle more traffic and decreases the need for frequent API calls or database queries for every page request.

4. **Better user experience**: ISG allows you to show meaningful content to users immediately, even if some parts are still loading. This reduces the time spent waiting for the page to load, leading to a better user experience and increased engagement.

## Implementing ISG in Next.js
To illustrate how Incremental Static Generation works in Next.js, let's consider an example of a blog application.

Suppose you're building a blog application with Next.js, and you want to display a list of blog posts on the homepage. The blog posts are dynamic and can change frequently, so you want to ensure that the latest posts are always displayed.

To implement ISG in Next.js for this example:

1. Create a new Next.js project and set up the necessary files and folder structure.

2. In your pages directory, create a file called `index.js`. This will be the homepage of your blog application.

3. Inside `index.js`, define a functional component called `HomePage` that will render the blog post list.

4. Use the `getStaticProps` function to fetch the blog posts data during the build process. In this example, let's assume the blog posts are fetched from an API endpoint.

```jsx
import React from 'react';

function HomePage({ posts }) {
  return (
    <div>
      <h1>Welcome to My Blog</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();

  return {
    props: {
      posts,
    },
    revalidate: 60,
  };
}

export default HomePage;
```

In this example, we're using the `getStaticProps` function to fetch the blog posts data during the build process. The fetched data is passed as a prop (`posts`) to the `HomePage` component. Additionally, we set the `revalidate` option to 60 seconds, indicating that Next.js should attempt to re-generate the page and fetch updated data every 60 seconds.

5. Run the Next.js development server and navigate to the homepage. You should see the list of blog posts rendered.

6. If a new blog post is published after the initial build, Next.js will attempt to re-generate the page and fetch the latest blog posts after the revalidation interval (60 seconds in this example).

7. When a user visits the homepage again after the revalidation interval, Next.js will serve the previously generated static page. However, in the background, Next.js will make an API request to fetch the latest blog posts.

8. Once the API request is complete, Next.js will re-render the `HomePage` component with the updated data and cache it for subsequent requests.

By utilizing ISG in this example, you ensure that the blog post list on the homepage remains up-to-date while still providing the benefits of static page generation for improved performance.

Remember to customize the example to suit your specific needs, such as integrating with your own API or database to fetch the blog posts data.

## Conclusion
Incremental Static Generation (ISG) is a powerful feature in Next.js that combines the benefits of Static Generation with the ability to update static pages at runtime. It allows you to have fast-loading, pre-rendered pages while still delivering real-time data to users. By implementing ISG, you can achieve better performance, improved user experience, and reduced server load. Next.js continues to innovate and provide developers with the tools they need to build modern, scalable web applications.

Introduction to Incremental Static Generation (ISG) in Next.js

React, a popular JavaScript library for building user interfaces, provides developers with a range of powerful tools and hooks to manage state, handle side effects, and perform other critical tasks. Two commonly used hooks in React are `useEffect` and `useLayoutEffect`. While they may seem similar at first glance, they have distinct differences that developers should be aware of in order to use them effectively.

## Purpose of the Hooks

Both `useEffect` and `useLayoutEffect` allow you to perform side effects in your React components. Side effects typically include tasks such as fetching data from an API, manipulating the DOM, subscribing to events, or cleaning up resources. The main difference between the two hooks lies in the timing of when they are executed.

### `useEffect`

`useEffect` is a hook that is executed after the rendering is complete and the browser has painted the screen. It's a post-rendering hook that ensures the side effect is performed asynchronously, without blocking the rendering process. This makes it suitable for most scenarios, as it doesn't interfere with the user interface updates and helps maintain a smooth user experience.

Here's an example of using `useEffect` to fetch data asynchronously:

```jsx
import React, { useState, useEffect } from 'react';

const ExampleComponent = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    // Fetch data asynchronously
    fetchData()
      .then((response) => setData(response))
      .catch((error) => console.error(error));
  }, []);

  return (
    <div>
      <p>Data: {data}</p>
    </div>
  );
};

// Mock fetch data function
const fetchData = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('Mock Data');
    }, 2000);
  });
};
```

In this example, the `useEffect` hook is used to fetch data asynchronously. It runs once when the component mounts, thanks to the empty dependency array `[]`. The fetched data is stored in the `data` state using the `setData` function. This way, the component renders initially without any data and updates once the asynchronous data fetching is complete.

### `useLayoutEffect`

`useLayoutEffect` is similar to `useEffect` in that it allows you to perform side effects. However, it is executed synchronously, immediately after the rendering phase, but before the browser has painted the screen. This means that the side effect performed inside `useLayoutEffect` will block the painting and layout of the UI until it is finished. Consequently, using `useLayoutEffect` can lead to performance issues and should be used with caution.

Here's an example of using `useLayoutEffect` to measure an element's dimensions synchronously:

```jsx
import React, { useState, useLayoutEffect } from 'react';

const ExampleComponent = () => {
  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });

  useLayoutEffect(() => {
    // Measure element dimensions synchronously
    const element = document.getElementById('myElement');
    const { width, height } = element.getBoundingClientRect();
    setDimensions({ width, height });
  }, []);

  return (
    <div>
      <div id="myElement">Example Element</div>
      <p>Dimensions: {dimensions.width} x {dimensions.height}</p>
    </div>
  );
};
```

In this example, the `useLayoutEffect` hook is used to measure the dimensions of the element with the ID `myElement`. It runs once when the component mounts, as indicated by the empty dependency array `[]`. The dimensions are obtained synchronously using `getBoundingClientRect()`, and the width and height values are stored in the `dimensions` state using the `setDimensions` function. This ensures that the latest DOM layout data is available for further calculations or rendering.

## Choosing the Right Hook

It's important to choose the appropriate hook based on your specific requirements. Here's a summary of the differences between `useEffect` and `useLayoutEffect`:

1. Timing: `useEffect` is executed asynchronously after the rendering and painting phase, while `useLayoutEffect` is executed synchronously before the painting phase.
2. Blocking: `useEffect` doesn't block the rendering or painting process, whereas `useLayoutEffect` can introduce delays as it blocks the UI updates until the side effect is complete.
3. Use cases: `useEffect` is suitable for most scenarios where you need to perform side effects, while `useLayoutEffect` is more appropriate when you need to read or manipulate the DOM immediately after a component update.

In most cases, using `useEffect` will be sufficient for handling side effects in React components. It ensures a smooth user experience by performing asynchronous side effects after rendering. However, when you require synchronous access to the DOM layout, `useLayoutEffect` can be a valuable tool.

Remember to use `useLayoutEffect` judiciously, as it can potentially impact performance by blocking rendering. Only utilize it when you genuinely need to read or manipulate the DOM layout synchronously.

By understanding the differences between `useEffect` and `useLayoutEffect`, you can make informed decisions and write more efficient and performant React components that fulfill your specific requirements.

Hooks

Decoding useLayoutEffect vs. useEffect

Spring Boot, a widely used Java framework, provides developers with a simplified and opinionated approach to building Java applications. Spring Boot seamlessly integrates with Spring Batch, a lightweight framework for developing scalable and robust batch processing applications. In this article, we will delve into the intricacies of Spring Boot StepLet and explore how it revolutionizes the development of batch processing tasks.

## Understanding Spring Boot StepLet
In Spring Batch, a step represents a self-contained unit of work within a batch job, encompassing tasks such as reading data, processing it, and writing the results. Spring Boot StepLet builds upon this concept and introduces a modular and reusable approach.

A StepLet is a self-contained and reusable component that encapsulates a single step of a batch job. It allows developers to define and configure individual steps as independent modules, promoting code reusability. Multiple StepLets can be combined to create complex batch processes, providing flexibility and maintainability.

## Benefits of Spring Boot StepLet
### Reusability
> StepLets encapsulate individual steps as independent modules, enabling code reuse across multiple batch processes. This reduces code duplication and promotes a modular design, making development and maintenance tasks more manageable.
### Testability
> StepLets can be easily tested in isolation, facilitating unit tests for each step. This ensures better code quality, simplifies debugging, and aids troubleshooting. Testing individual StepLets guarantees the correctness of each module before composing them into a batch job.
### Maintainability
> StepLets promote writing and maintaining small, self-contained modules, improving codebase maintainability. Changes to one StepLet have minimal impact on other parts of the batch process, making the application easier to understand and extend.
### Scalability
> StepLets can be combined to create complex batch processes, enabling scalability. Developers can add or remove StepLets as required without affecting the rest of the workflow. This flexibility allows batch jobs to adapt and expand effortlessly.

## Creating a Spring Boot StepLet
To create a StepLet in Spring Boot, follow these steps:

1. Define the StepLet:
```java
public class MyStepLet implements Step {

    @Override
    public void execute(StepExecutionContext context) throws StepExecutionException {
        // Step logic
        // Read data, process it, and write the results
    }
}
```
2.Configure the StepLet:
```java
@Configuration
public class BatchConfig {

    @Autowired
    private JobBuilderFactory jobBuilderFactory;

    @Autowired
    private StepBuilderFactory stepBuilderFactory;

    @Bean
    public Step myStepLet() {
        return stepBuilderFactory.get("myStepLet")
                .tasklet(new MyStepLet())
                .build();
    }

    @Bean
    public Job myJob(Step myStepLet) {
        return jobBuilderFactory.get("myJob")
                .start(myStepLet)
                .build();
    }
}
```
3.Compose StepLets:
```java
@Configuration
public class BatchConfig {

    // ...

    @Bean
    public Step step1() {
        return stepBuilderFactory.get("step1")
                .tasklet(new Step1Tasklet())
                .build();
    }

    @Bean
    public Step step2() {
        return stepBuilderFactory.get("step2")
                .tasklet(new Step2Tasklet())
                .build();
    }

    @Bean
    public Job myJob(Step step1, Step step2) {
        return jobBuilderFactory.get("myJob")
                .start(step1)
                .next(step2)
                .build();
    }
}
```
4.Run the Batch Job:
```java
@SpringBootApplication
public class Application {

    public static void main(String[] args) {
        SpringApplication.run(Application.class, args);
    }

    @Bean
    public CommandLineRunner run(JobLauncher jobLauncher, Job myJob) {
        return args -> jobLauncher.run(myJob, new JobParameters());
    }
}
```
## Conclusion
Spring Boot StepLet significantly enhances the Spring Batch framework, empowering developers to create modular and reusable components for batch processing tasks. By leveraging StepLets, developers achieve code reusability, testability, maintainability, and scalability in their batch jobs. Spring Batch, in conjunction with Spring Boot, remains a powerful choice for developing robust and efficient batch processing applications.

Enhancing Batch Processing with Spring Boot StepLet

When developing Angular applications, it's important to have a clear separation of concerns between the UI and the data layer. One way to achieve this is by using the View-Model (VM) pattern, where the VM acts as an intermediary between the UI and the data layer.

In this article, we'll explore how to use the VM pattern with the `combineLatest` operator in Angular to efficiently manage complex UI interactions.

## The VM Pattern

The VM pattern is a design pattern that separates the concerns of the UI and the data layer. The VM acts as a mediator between the two layers, handling data requests and updates on behalf of the UI.

In Angular, the VM is typically implemented as a component class that contains the UI state and logic. The VM class interacts with the data layer through services and provides data to the UI through observables.

One of the key benefits of using the VM pattern is that it enables developers to decouple the UI from the data layer, making it easier to test and maintain the codebase.

## Using combineLatest

The `combineLatest` operator is a powerful tool in the RxJS library that enables developers to combine multiple observables into a single observable. This can be especially useful in the context of the VM pattern, where multiple data streams need to be combined to update the UI state.

Consider a scenario where we have a component that displays a list of posts for a selected user. To implement this functionality using the VM pattern, we would create a VM class that contains two observables: one for the selected user and one for the posts.

We can use the `combineLatest` operator to combine these two observables into a single observable that emits the posts for the selected user. Here's an example:

```js
import { Component, OnInit } from '@angular/core';
import { combineLatest, Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { Post } from './post';
import { PostService } from './post.service';
import { User } from './user';
import { UserService } from './user.service';

@Component({
  selector: 'app-post-list',
  template: `
    <h2>Posts by {{ selectedUser?.name }}</h2>
    <ul>
      <li *ngFor="let post of posts$ | async">
        {{ post.title }}
      </li>
    </ul>
  `
})
export class PostListComponent implements OnInit {
  selectedUser: User | undefined;
  posts$: Observable<Post[]> | undefined;

  constructor(
    private userService: UserService,
    private postService: PostService
  ) {}

  ngOnInit() {
    // Combine the selected user and posts observables using combineLatest
    this.posts$ = combineLatest([
      this.userService.selectedUser$,
      this.postService.posts$
    ]).pipe(
      // Map the combined observables to only return posts by the selected user
      map(([selectedUser, posts]) =>
        selectedUser ? posts.filter(post => post.userId === selectedUser.id) : []
      )
    );
  }

  onSelectUser(user: User) {
    // Set the selected user
    this.userService.setSelectedUser(user);
  }
}
```
In this example, we have a `PostListComponent` that displays a list of posts for a selected user.

The `ngOnInit` method of the component sets up the `posts$` observable by combining the `selectedUser$` observable from the `UserService` and the `posts$` observable from the `PostService` using `combineLatest`. The `map` operator is used to filter the posts to only include those by the selected user.

The `onSelectUser` method is used to update the selected user in the `UserService`.

By using `combineLatest` in this way, we are able to efficiently manage complex UI interactions while maintaining a separation of concerns between the UI and the data layer.

## Conclusion

In this article, we explored how to use the VM pattern with the `combineLatest` operator in Angular to efficiently manage complex UI interactions. By decoupling the UI from the data layer and using reactive programming techniques, we can create more maintainable and testable codebases.

As with any design pattern or library, it's important to use these tools in a way that makes sense for your specific application. By understanding the principles behind the VM pattern and `combineLatest`, we can make informed decisions about when and how to use them in our own projects.

Angular View-Model (VM) Pattern with combineLatest

Mongo JPA, or the Java Persistence API, is a powerful tool that allows developers to interact with MongoDB databases using the standard JPA interface. JPA is a specification for object-relational mapping in Java, which means that it allows developers to map Java classes to database tables and perform CRUD (Create, Read, Update, Delete) operations on those tables using standard Java methods.

MongoDB is a popular NoSQL database that is widely used in modern web applications due to its flexibility and scalability. With the rise of microservices architecture, many developers are turning to MongoDB as a preferred database solution. However, working with MongoDB can be challenging for developers who are not familiar with NoSQL concepts and query languages.

That's where Mongo JPA comes in. It provides a simple and intuitive way to work with MongoDB databases, allowing developers to focus on their business logic rather than database implementation details. By using Mongo JPA, developers can take advantage of the powerful features of MongoDB, such as schemaless data modeling, dynamic queries, and horizontal scaling.

One of the key benefits of using Mongo JPA is that it provides a consistent API for working with different types of databases, including relational databases and NoSQL databases. This means that developers can use the same Java code to interact with MongoDB and other databases, which can simplify their codebase and reduce the learning curve for new developers.

Another advantage of using Mongo JPA is that it supports the JPA Criteria API, which allows developers to create type-safe queries using Java code. This can help prevent errors and make code easier to maintain, especially for larger projects. Additionally, Mongo JPA supports advanced query features such as aggregation, sorting, and pagination, which can be challenging to implement using raw MongoDB queries.

To use Mongo JPA, developers can add the necessary dependencies to their project and create entity classes that map to MongoDB collections. They can then use standard JPA methods to interact with the database, such as `find` , `persist` , `merge` , and `remove`. Mongo JPA also provides annotations that can be used to define indexes, map embedded objects, and specify other database-related details.
Here an example
``` java
@Entity
public class User {
    
    @Id
    private String id;
    
    @Column(name = "username")
    private String username;
    
    @Column(name = "password")
    private String password;
    
    @Embedded
    private Address address;
    
    // Getters and setters
    
    public String getId() {
        return id;
    }
    
    public void setId(String id) {
        this.id = id;
    }
    
    public String getUsername() {
        return username;
    }
    
    public void setUsername(String username) {
        this.username = username;
    }
    
    public String getPassword() {
        return password;
    }
    
    public void setPassword(String password) {
        this.password = password;
    }
    
    public Address getAddress() {
        return address;
    }
    
    public void setAddress(Address address) {
        this.address = address;
    }
    
    // Embedded class
    
    @Embeddable
    public static class Address {
        
        @Column(name = "street")
        private String street;
        
        @Column(name = "city")
        private String city;
        
        @Column(name = "state")
        private String state;
        
        @Column(name = "zip")
        private String zip;
        
        // Getters and setters
        
        public String getStreet() {
            return street;
        }
        
        public void setStreet(String street) {
            this.street = street;
        }
        
        public String getCity() {
            return city;
        }
        
        public void setCity(String city) {
            this.city = city;
        }
        
        public String getState() {
            return state;
        }
        
        public void setState(String state) {
            this.state = state;
        }
        
        public String getZip() {
            return zip;
        }
        
        public void setZip(String zip) {
            this.zip = zip;
        }
    }
}
```
In this example, the `User` class is annotated with `@Entity`, which tells Mongo JPA that it should be mapped to a MongoDB collection. The `@Id` annotation is used to indicate that the `id` field is the primary key for the collection. The `@Column` annotation is used to specify the names of the fields in the collection.
The `Address` class is embedded in the `User` class using the `@Embedded` annotation. It is also annotated with `@Embeddable`, which indicates that it should be stored as part of the `User` document in the MongoDB collection.

The class above can be used to build a `MongoRepository`
``` java
@Repository
public interface UserRepository extends MongoRepository<User, String> {
    
    User findByUsername(String username);
    
    List<User> findByAddressCity(String city);
    
    @Query("{ 'address.state' : ?0 }")
    List<User> findByAddressState(String state);
    
    List<User> findByAddressStateAndAddressCity(String state, String city);
    
    default List<User> findUsersByCriteria(String state, String city) {
        Criteria criteria = new Criteria();
        
        if (state != null && !state.isEmpty()) {
            criteria = criteria.and("address.state").is(state);
        }
        
        if (city != null && !city.isEmpty()) {
            criteria = criteria.and("address.city").is(city);
        }
        
        Query query = new Query(criteria);
        return mongoTemplate.find(query, User.class);
    }
}
```
In this example, the `findUsersByCriteria` method is a custom query that uses `Criteria` to build a dynamic query. `Criteria` is a flexible way to build complex queries with conditions that can change at runtime.
The method takes two parameters, `state` and `city`, which are used to build the `Criteria` object. The method first creates a new `Criteria` object and then adds conditions based on the values of `state` and `city`. If the `state` parameter is not null and not empty, it adds a condition to match the `state` field in the `address` object. If the `city` parameter is not null and not empty, it adds a condition to match the `city` field in the `address` object.
Finally, the method creates a new `Query` object with the `Criteria` object and uses `MongoTemplate` to execute the query and return a list of `User` objects.

In conclusion, Mongo JPA is a valuable tool for developers who want to work with MongoDB databases using standard Java methods. It provides a consistent and intuitive API that can simplify code and reduce the learning curve for new developers. By leveraging the powerful features of MongoDB, developers can build scalable and flexible applications that can meet the demands of modern web development.

Spring Mongo JPA - the basics

Reactive programming is a programming paradigm that deals with data streams and the propagation of change. Reactive eXtensions for JavaScript (RxJS) is a library for reactive programming using observables in JavaScript. It can be used with React, a JavaScript library for building user interfaces, to handle asynchronous data and user interactions in a more efficient and elegant way.

In this article, we will explore how to use RxJS with React to handle asynchronous data and user interactions.

First, let's understand what observables are. An observable is a stream of data that can be observed and acted upon. It is similar to a promise, but it can emit multiple values over time. An observer is an object that subscribes to an observable and receives notifications when the observable emits values.

To use RxJS with React, we first need to install it using npm or yarn:

```
npm install rxjs
```

or

```
yarn add rxjs
```

Next, we can create an observable in a React component using the `of` method from the `rxjs` library. This method creates an observable that emits a single value. For example, we can create an observable that emits the current date and time every second:

``` js
import { of, interval } from 'rxjs';
import { useEffect, useState } from 'react';

const Clock = () => {
  const [time, setTime] = useState(new Date());
  useEffect(() => {
    const subscription = of(new Date())
      .pipe(interval(1000))
      .subscribe(time => setTime(time));
    return () => {
      subscription.unsubscribe();
    }
  }, []);
  return <div>{time.toString()}</div>;
}
```

In this example, we use the `interval` operator from the `rxjs/operators` library to emit the current date and time every second. We also subscribe to the observable in the `useEffect` hook method and unsubscribe from it in the `useEffect` clean up function to prevent memory leaks.

We can also use observables to handle user interactions in React. For example, we can create an observable that emits events from a text input and use the `map` operator to transform the events into the current value of the input:

``` js
import { fromEvent } from 'rxjs';
import { map } from 'rxjs/operators';
import { useEffect, useState, useRef } from 'react';

const SearchInput = () => {
  const [value, setValue] = useState('');
  const inputRef = useRef(null);

  useEffect(() => {
    const subscription = fromEvent(inputRef.current, 'input')
      .pipe(map(event => event.target.value))
      .subscribe(value => setValue(value));
    return () => {
      subscription.unsubscribe();
    }
  }, []);

  return (
    <div>
      <input ref={inputRef} />
      <div>{value}</div>
    </div>
  );
}


```

use the `map` operator to transform the events into the current value of the input and update the component's state accordingly.

Another useful operator for handling user interactions is the `debounceTime` operator. This operator delays the emission of values from an observable for a specified amount of time. This can be useful for implementing a search feature, for example, where we only want to perform the search after the user has stopped typing for a certain amount of time.
``` js
import { fromEvent } from 'rxjs';
import { map, debounceTime } from 'rxjs/operators';
import { useEffect, useRef, useState } from 'react';
import axios from 'axios';

const SearchInput = () => {
  const inputRef = useRef(null);
  const [searchResults, setSearchResults] = useState([]);

  useEffect(() => {
    const subscription = fromEvent(inputRef.current, 'input')
      .pipe(
        map(event => event.target.value),
        debounceTime(500)
      )
      .subscribe(value => search(value));
    return () => {
      subscription.unsubscribe();
    }
  }, []);

  const search = async (value) => {
    try {
      const response = await axios.get(`https://jsonplaceholder.typicode.com/posts?title_like=${value}`);
      setSearchResults(response.data);
    } catch (error) {
      console.error(error);
    }
  }

  return (
    <div>
      <input ref={inputRef} />
      <div>
        {searchResults.map(result => <div key={result.id}>{result.title}</div>)}
      </div>
    </div>
  );
}

```

In this example, we use the `debounceTime` operator to delay the emission of values from the input event observable by 500 milliseconds. This means that the search function will only be called when the user stops typing for half a second.

RxJS also allows us to compose multiple observables together using operators like `merge`, `concat`, and `zip`. This can be useful for handling multiple asynchronous data sources or user interactions in a single component.

In conclusion, RxJS is a powerful library for reactive programming in JavaScript and can be used with React to handle asynchronous data and user interactions in a more efficient and elegant way. It provides a wide range of operators for transforming, filtering, and composing observables, making it a valuable tool for building complex and responsive user interfaces.

React with RXJS

NGRX vs RXJS

The useReducer hook in React is a way to manage the state of a component using a reducer function. A reducer function is a pure function that takes the current state and an action, and returns the next state.

To use the useReducer hook, you need to import it from the react library and pass it two arguments: a reducer function and an initial state. The reducer function should take the current state and an action as arguments, and return the next state.

Here is an example of how to use the useReducer hook to manage the state of a counter component:

``` js
import { useReducer } from 'react';

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <div>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
      <span>{state.count}</span>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
    </div>
  );
}

```
In this example, the useReducer hook is used to manage the state of a counter component. The reducer function takes the current state and an action, and returns the next state based on the action type.

The initial state of the counter is passed to the useReducer hook as the second argument. In this case, the initial state is an object with a count property set to 0.

The useReducer hook returns an array with two elements: the current state, and a dispatch function. The dispatch function is used to update the state by passing an action to the reducer function.

In the example above, the dispatch function is passed to the onClick handlers of the + and - buttons. When the + button is clicked, the dispatch function is called with an action of type increment, which causes the reducer function to increment the count by 1. Similarly, when the - button is clicked, the dispatch function is called with an action of type decrement, which causes the reducer function to decrement the count by 1.

The useReducer hook is a powerful way to manage the state of a component, as it allows you to separate the logic for updating the state from the component's render function. It also provides a predictable and consistent way to update the state, which can make debugging and testing easier.





React Hooks - useReducer()

React Query is a powerful library for managing the caching and fetching of data in a React application. It provides a set of hooks that can be used to easily fetch and cache data, as well as automatically manage the stale-while-revalidate caching strategy.

One of the main features of React Query is its caching functionality. By default, React Query will cache the data for each unique query that is made and automatically serve the cached data if the same query is made again. Additionally, React Query will automatically check for updates to the data and refresh the cache if necessary.

To use React Query in a React application, you first need to install the library.

```
npm install react-query
```
Then you can use the useQuery hook to fetch and cache data.

``` js
import { useQuery } from 'react-query'

function MyComponent() {
  const { data, status } = useQuery('users', async () => {
    const response = await fetch('https://jsonplaceholder.typicode.com/users')
    return response.json()
  })

  if (status === 'loading') {
    return <div>Loading...</div>
  }

  return (
    <ul>
      {data.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  )
}
```
In this example, the useQuery hook is used to fetch a list of users from a JSON placeholder API. The first argument passed to useQuery is the key of the query, and the second argument is a function that returns a promise that resolves with the data.

React Query also provides a way to manually update the cache using the refetch function.

``` js
function MyComponent() {
  const { data, status, refetch } = useQuery('users', async () => {
    const response = await fetch('https://jsonplaceholder.typicode.com/users')
    return response.json()
  })

  return (
    <div>
      <button onClick={() => refetch()}>Refetch</button>
      ...
    </div>
  )
}
```
In this example, the refetch function is passed to a button's onClick, which will allow the user to manually refresh the data.

React Query also provides a lot of other functionality such as manual invalidation of cache, setting custom cache policies etc. With React Query, it becomes easy to handle caching and fetching of data in a React application, resulting in better performance and user experience.

React Query - The basics

An Observable in Angular is a powerful way to handle asynchronous data streams. It is a part of the RxJS library, which is a collection of libraries for reactive programming in JavaScript.

An Observable is a stream of data that can emit multiple values over time. It is similar to a Promise, but it can emit multiple values over time, rather than just a single value like a Promise does.

In Angular, an Observable can be used to handle HTTP requests, WebSockets, and other asynchronous data streams. For example, an Observable can be used to subscribe to a data stream from an API and receive new data as it becomes available.

To create an Observable in Angular, you can use the of() or from() methods provided by the RxJS library. These methods take an array or a promise as an argument and return an Observable that will emit the values of the array or the resolved value of the promise.

Here is an example of how to create an Observable that emits an array of values:

``` js
import { of } from 'rxjs';
```

const myObservable = of([1, 2, 3]);
You can then subscribe to the Observable using the subscribe() method. This method takes a callback function as an argument, which will be called every time a new value is emitted by the Observable.

Here is an example of how to subscribe to the myObservable Observable and log the emitted values to the console:

``` js
myObservable.subscribe(val => console.log(val));
```
You can also use the pipe() method to apply operators to the Observable. Operators are functions that can be used to transform, filter, or aggregate the data emitted by the Observable.

Here is an example of how to use the map() operator to transform the emitted values:

``` js
import { map } from 'rxjs/operators';

myObservable.pipe(map(val => val * 2)).subscribe(val => console.log(val));
```
In this example, the map() operator is used to multiply each emitted value by 2 before it is passed to the subscribe() method.

Overall, Observables in Angular provide a powerful and flexible way to handle asynchronous data streams, and can be used to handle a wide variety of use cases, from simple event handling to complex data processing.