DEV Community: WireFuture

Asynchronous Programming in C#: Async/Await Patterns

Tapesh Mehta — Wed, 03 Jul 2024 09:15:20 +0000

Asynchronous programming is nowadays common in modern software development and allows applications to do work without stalling the main thread. The async and await keywords in C# provide a much cleaner method for creating asynchronous code. This article explores the internals of asynchronous programming in C# including error handling and performance optimization.

Understanding Async and Await

The Basics of Async and Await

The async keyword is used to declare a method as asynchronous. This means the method can perform its work asynchronously without blocking the calling thread. The await keyword is used to pause the execution of an async method until the awaited task completes.

public async Task<int> FetchDataAsync()
{
    await Task.Delay(1000); // Simulate an asynchronous operation
    return 42;
}

public async Task MainAsync()
{
    int result = await FetchDataAsync();
    Console.WriteLine(result);
}

In this example, FetchDataAsync is an asynchronous method that simulates a delay before returning a result. The await keyword in MainAsync ensures that the method waits for FetchDataAsync to complete before proceeding.

How Async and Await Work Under the Hood

When the compiler encounters the await keyword, it breaks the method into two parts: the part before the await and the part after it. The part before the await runs synchronously. When the awaited task completes, the part after the await resumes execution.

The compiler generates a state machine to handle this asynchronous behavior. This state machine maintains the state of the method and the context in which it runs. This allows the method to pause and resume without blocking the main thread.

Task vs. ValueTask

In addition to Task, C# 7.0 introduced ValueTask. While Task is a reference type, ValueTask is a value type that can reduce heap allocations, making it more efficient for scenarios where performance is critical, and the operation completes synchronously most of the time.

Here’s an example using ValueTask:

public async ValueTask<int> FetchDataValueTaskAsync()
{
    await Task.Delay(1000);
    return 42;
}

public async Task MainValueTaskAsync()
{
    int result = await FetchDataValueTaskAsync();
    Console.WriteLine(result);
}

Best Practices for Error Handling

Error handling in asynchronous methods can be challenging. Here are some best practices to ensure robust error handling in your async code:

Use Try-Catch Blocks

Wrap your await statements in try-catch blocks to handle exceptions gracefully.

public async Task MainWithErrorHandlingAsync()
{
    try
    {
        int result = await FetchDataAsync();
        Console.WriteLine(result);
    }
    catch (Exception ex)
    {
        Console.WriteLine($"An error occurred: {ex.Message}");
    }
}

Use Cancellation Tokens

Cancellation tokens allow you to cancel asynchronous operations gracefully. This is particularly useful for long-running tasks.

public async Task<int> FetchDataWithCancellationAsync(CancellationToken cancellationToken)
{
    await Task.Delay(1000, cancellationToken);
    return 42;
}

public async Task MainWithCancellationAsync(CancellationToken cancellationToken)
{
    try
    {
        int result = await FetchDataWithCancellationAsync(cancellationToken);
        Console.WriteLine(result);
    }
    catch (OperationCanceledException)
    {
        Console.WriteLine("Operation was canceled.");
    }
}

Handle AggregateException

When multiple tasks are awaited using Task.WhenAll, exceptions are wrapped in an AggregateException. Use a try-catch block to handle these exceptions.

public async Task MainWithAggregateExceptionHandlingAsync()
{
    var tasks = new List<Task<int>>
    {
        FetchDataAsync(),
        FetchDataAsync()
    };

    try
    {
        int[] results = await Task.WhenAll(tasks);
        Console.WriteLine($"Results: {string.Join(", ", results)}");
    }
    catch (AggregateException ex)
    {
        foreach (var innerException in ex.InnerExceptions)
        {
            Console.WriteLine($"An error occurred: {innerException.Message}");
        }
    }
}

Performance Optimization Techniques

Optimizing the performance of asynchronous code involves understanding how the runtime handles async/await and employing best practices to minimize overhead.

Avoid Unnecessary Async

If a method does not perform any asynchronous operations, avoid marking it as async. This can save the overhead of the state machine.

public Task<int> FetchDataWithoutAsync()
{
    return Task.FromResult(42);
}

public async Task MainWithoutUnnecessaryAsync()
{
    int result = await FetchDataWithoutAsync();
    Console.WriteLine(result);
}

Use ConfigureAwait(False)

By default, await captures the current synchronization context and uses it to resume execution. This can lead to performance issues, especially in UI applications. Using ConfigureAwait(false) avoids capturing the context, improving performance.

public async Task<int> FetchDataWithConfigureAwaitAsync()
{
    await Task.Delay(1000).ConfigureAwait(false);
    return 42;
}

public async Task MainWithConfigureAwaitAsync()
{
    int result = await FetchDataWithConfigureAwaitAsync();
    Console.WriteLine(result);
}

Parallelize Independent Tasks

If you have multiple independent tasks, you can run them in parallel to improve performance using Task.WhenAll.

public async Task MainWithParallelTasksAsync()
{
    var tasks = new List<Task<int>>
    {
        FetchDataAsync(),
        FetchDataAsync()
    };

    int[] results = await Task.WhenAll(tasks);
    Console.WriteLine($"Results: {string.Join(", ", results)}");
}

Use ValueTask for Performance-Critical Paths

As mentioned earlier, ValueTask can be more efficient than Task for performance-critical paths where most operations complete synchronously.

public ValueTask<int> FetchDataWithValueTask()
{
    return new ValueTask<int>(42);
}

public async Task MainWithValueTaskAsync()
{
    int result = await FetchDataWithValueTask();
    Console.WriteLine(result);
}

Debugging Asynchronous Code

Debugging asynchronous code can be challenging due to the state machine and context switching. Here are some tips to make debugging easier:

Use Task.Exception Property

Check the Exception property of a task to inspect the exception without causing the application to crash.

public async Task MainWithTaskExceptionAsync()
{
    Task<int> task = FetchDataAsync();

    try
    {
        int result = await task;
        Console.WriteLine(result);
    }
    catch
    {
        if (task.Exception != null)
        {
            Console.WriteLine($"Task failed: {task.Exception.Message}");
        }
    }
}

Use Debugger Attributes

Use the DebuggerStepThrough and DebuggerHidden attributes to control how the debugger steps through async methods.

[DebuggerStepThrough]
public async Task<int> FetchDataWithDebuggerStepThroughAsync()
{
    await Task.Delay(1000);
    return 42;
}

[DebuggerHidden]
public async Task<int> FetchDataWithDebuggerHiddenAsync()
{
    await Task.Delay(1000);
    return 42;
}

Use Logging

Implement logging to track the flow of asynchronous operations and capture exceptions.

public async Task<int> FetchDataWithLoggingAsync(ILogger logger)
{
    logger.LogInformation("Fetching data...");
    try
    {
        await Task.Delay(1000);
        logger.LogInformation("Data fetched successfully.");
        return 42;
    }
    catch (Exception ex)
    {
        logger.LogError($"An error occurred: {ex.Message}");
        throw;
    }
}

public async Task MainWithLoggingAsync(ILogger logger)
{
    int result = await FetchDataWithLoggingAsync(logger);
    Console.WriteLine(result);
}

Conclusion

Asynchronous programming with async and await in C# is a powerful tool to write responsive, scalable applications. Asynchronous programming requires knowing async/await internals, following best practices for error handling and optimizing performance. Using techniques like using ValueTask, avoiding unnecessary async and running tasks in parallel can improve the performance and reliability of your applications. Also, debugging and logging practices are important to maintain and troubleshoot asynchronous code.

Boost Your Angular App's Speed: Code Splitting Strategies

Tapesh Mehta — Sun, 30 Jun 2024 02:39:57 +0000

Introduction

In today's blog post we'll learn how can you boost your Angular app's speed. In Angular, performance optimization is a crucial factor for a great user experience. The most powerful technique in your toolkit is code splitting. This strategy involves breaking your application into smaller, much more manageable chunks that load only as and when required. By implementing code splitting based on routes, modules and lazy loading you can reduce initial loading times and improve performance.

What is Code Splitting?

In Angular development, code splitting is about loading parts of your application on demand rather than all at once. This not only speeds up the initial load but also conserves resources by loading only what's necessary for the current view or feature.

Tip 1: Route-Based Code Splitting

Angular's routing mechanism supports lazy loading of modules based on routes. This means modules are loaded only when the user navigates to a corresponding route. Here's how you can set it up:

const routes: Routes = [
  { 
    path: 'dashboard',
    loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule)
  },
  { 
    path: 'profile',
    loadChildren: () => import('./profile/profile.module').then(m => m.ProfileModule)
  },
  { 
    path: 'settings',
    loadChildren: () => import('./settings/settings.module').then(m => m.SettingsModule)
  }
];

In this example, each route (dashboard, profile, settings) loads its module (DashboardModule, ProfileModule, SettingsModule) only when the user navigates to that specific route, keeping initial bundle size small.

Tip 2: Component-Based Code Splitting

For more granular control, you can implement component-based code splitting using Angular's ComponentFactoryResolver. This approach allows you to dynamically load components when they are needed, rather than loading them upfront. Here's a simplified example:

import { Component, ComponentFactoryResolver, ViewContainerRef } from '@angular/core';

@Component({
  selector: 'app-dynamic-component',
  template: '<ng-template #dynamicComponentContainer></ng-template>'
})
export class DynamicComponentComponent {
  constructor(private resolver: ComponentFactoryResolver, private container: ViewContainerRef) {}

  loadComponent() {
    import('./path/to/your/dynamic-component').then(({ DynamicComponent }) => {
      const factory = this.resolver.resolveComponentFactory(DynamicComponent);
      this.container.createComponent(factory);
    });
  }
}

This method loads components dynamically, enhancing performance by loading only the necessary components at runtime.

Tip 3: Preloading Strategies

To strike a balance between immediate and deferred loading, Angular offers preloading strategies. These strategies allow you to load critical modules in the background after the initial content has loaded, ensuring a seamless user experience during navigation. Here's how you can configure it in your routing module:

import { NgModule, PreloadAllModules } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  // your routes here
];

@NgModule({
  imports: [RouterModule.forRoot(routes, {
    preloadingStrategy: PreloadAllModules
  })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

By specifying PreloadAllModules, Angular preloads all lazy-loaded modules in the background after the main content has loaded, optimizing subsequent navigation.

Tip 4: Bundle Analysis and Optimization

To make sure your code splitting efforts deliver maximum performance benefits, use tools like Angular CLI's bundle analyzer. These tools analyze your application's bundle size, identify areas for further optimization, and recommend effective code splitting strategies.

Conclusion

Code splitting in Angular is a game changer for optimizing your application performance. Whether through route-based lazy loading, component-based splitting, preloading strategies or bundle optimization, these techniques let you build faster, more responsive Angular applications. Try out these strategies, track performance metrics and refine your approach to stay ahead of the curve in Angular development.

Exploring the Internals of Dictionary in C#

Tapesh Mehta — Sat, 29 Jun 2024 04:16:06 +0000

Introduction

Dictionaries in C# are a fundamental data structure that stores key-value pairs. They support lookup, insertion and deletion operations which are required by many applications. But learning how dictionaries work internally may help you use them better and write more efficient software. This article will demonstrate how dictionaries work in C#, including hashing, collision resolution, and bucket management.

A dictionary is a collection of distinct key-value pairs. The benefit of a dictionary is the ability to quickly find values by key. This is done by hashing, which transforms keys into indices in an array called buckets. Knowing the internal workings of exactly how this works will help you optimize your usage of dictionaries and stay away from common pitfalls.

Why Understanding Internals Matters

Knowing how dictionaries work internally can help you:

Optimize Performance: By understanding how hashing and buckets work, you can choose appropriate keys and manage dictionary size more effectively.
Debug Issues: When things go wrong, a deeper understanding can help you identify and fix issues related to dictionary usage.
Write Efficient Code: Leveraging internal mechanisms can lead to more efficient and scalable applications.

How Dictionaries Work

A dictionary in C# uses an array of buckets to store entries. Each bucket can hold multiple entries in case of collisions. Let's explore how keys are converted to indices, how collisions are handled, and how entries are stored in buckets.

Hashing

Hashing is the process of converting a key into an integer, which can then be used as an index in the array of buckets. In C#, the GetHashCode method is used to generate a hash code for a key.

Example: Basic Hashing

Here's a simple example to illustrate hashing:

public class HashingExample
{
    public static void Main(string[] args)
    {
        string key = "exampleKey";
        int hashCode = key.GetHashCode();
        Console.WriteLine($"Hash Code for '{key}': {hashCode}");
    }
}

When you run this code, it will generate a hash code for the string exampleKey. This hash code is then used to determine the bucket index.

Buckets

Buckets are an array of linked lists where each list contains entries that have the same hash code (i.e., collisions). The index in the bucket array is calculated using the modulus operation on the hash code.

Example: Bucket Index Calculation

public class BucketExample
{
    private const int BucketCount = 16;

    public static void Main(string[] args)
    {
        string key = "exampleKey";
        int hashCode = key.GetHashCode();
        int bucketIndex = hashCode % BucketCount;
        Console.WriteLine($"Bucket Index for '{key}': {bucketIndex}");
    }
}

In this example, the bucket index is calculated by taking the modulus of the hash code with the bucket count (16 in this case).

Collision Resolution

Collisions occur when multiple keys produce the same bucket index. C# dictionaries handle collisions using linked lists within each bucket. When a collision occurs, the new entry is added to the linked list at the corresponding bucket index.

Example: Collision Handling

Consider the following example where multiple keys result in the same bucket index:

public class CollisionExample
{
    private const int BucketCount = 16;
    private static List<KeyValuePair<string, int>>[] buckets;

    public static void Main(string[] args)
    {
        buckets = new List<KeyValuePair<string, int>>[BucketCount];
        AddToDictionary("key1", 1);
        AddToDictionary("key2", 2);
        AddToDictionary("key1", 3); // Collision

        PrintBuckets();
    }

    private static void AddToDictionary(string key, int value)
    {
        int hashCode = key.GetHashCode();
        int bucketIndex = hashCode % BucketCount;

        if (buckets[bucketIndex] == null)
        {
            buckets[bucketIndex] = new List<KeyValuePair<string, int>>();
        }

        buckets[bucketIndex].Add(new KeyValuePair<string, int>(key, value));
    }

    private static void PrintBuckets()
    {
        for (int i = 0; i < buckets.Length; i++)
        {
            Console.WriteLine($"Bucket {i}:");
            if (buckets[i] != null)
            {
                foreach (var kvp in buckets[i])
                {
                    Console.WriteLine($"  {kvp.Key}: {kvp.Value}");
                }
            }
        }
    }
}

In this example, when a collision occurs (i.e., key1 is added twice), both entries are stored in the same bucket's linked list.

Optimizing Collisions

To minimize collisions, it's important to choose a good hash function and an appropriate number of buckets. C# uses a default hash function, but you can implement custom hash functions if needed.

Managing Buckets

Managing buckets effectively is crucial for the performance of a dictionary. The number of buckets can dynamically grow as the dictionary size increases to maintain efficient lookups.

Resizing Buckets

When the number of entries exceeds a certain threshold, the dictionary resizes its buckets array to reduce the load factor. This involves rehashing all existing keys and redistributing them into the new buckets array.

Example: Resizing Buckets

public class ResizingExample
{
    private const int InitialBucketCount = 4;
    private List<KeyValuePair<string, int>>[] buckets;
    private int count;
    private int bucketCount;

    public ResizingExample()
    {
        bucketCount = InitialBucketCount;
        buckets = new List<KeyValuePair<string, int>>[bucketCount];
        count = 0;
    }

    public void Add(string key, int value)
    {
        if (count >= bucketCount * 0.75)
        {
            ResizeBuckets();
        }

        int hashCode = key.GetHashCode();
        int bucketIndex = hashCode % bucketCount;

        if (buckets[bucketIndex] == null)
        {
            buckets[bucketIndex] = new List<KeyValuePair<string, int>>();
        }

        buckets[bucketIndex].Add(new KeyValuePair<string, int>(key, value));
        count++;
    }

    private void ResizeBuckets()
    {
        bucketCount *= 2;
        var newBuckets = new List<KeyValuePair<string, int>>[bucketCount];

        foreach (var bucket in buckets)
        {
            if (bucket != null)
            {
                foreach (var kvp in bucket)
                {
                    int newBucketIndex = kvp.Key.GetHashCode() % bucketCount;
                    if (newBuckets[newBucketIndex] == null)
                    {
                        newBuckets[newBucketIndex] = new List<KeyValuePair<string, int>>();
                    }
                    newBuckets[newBucketIndex].Add(kvp);
                }
            }
        }

        buckets = newBuckets;
    }

    public void PrintBuckets()
    {
        for (int i = 0; i < buckets.Length; i++)
        {
            Console.WriteLine($"Bucket {i}:");
            if (buckets[i] != null)
            {
                foreach (var kvp in buckets[i])
                {
                    Console.WriteLine($"  {kvp.Key}: {kvp.Value}");
                }
            }
        }
    }
}

In this example, the Add method checks if the load factor exceeds 75% and triggers resizing if necessary. The ResizeBuckets method doubles the number of buckets and rehashes all existing entries.

Conclusion

Understanding the internals of how dictionaries work in C# (hashing, collision resolution, bucket management) can help you write robust code. Optimizing hashing functions, handling collisions efficiently, and managing buckets dynamically improves the performance of your applications. In the context of .NET development, this knowledge becomes even more valuable as it allows you to leverage the full power of the framework for building high-performance, scalable applications.

Next time you use a dictionary, take a moment to consider how these internal mechanisms are working to provide you with fast and efficient data access. This knowledge can help you enhance your code and solve complex problems confidently.

What challenges have you had using dictionaries in your applications? Share your experiences and learn together!

Reach out in case you have questions or require further help. Your feedback and experiences help make this journey a much better one for everybody. Have fun coding!

How To Build RESTful APIs With ASP.NET Core 8

Tapesh Mehta — Fri, 28 Jun 2024 14:57:10 +0000

Introduction

Modern software development often requires building RESTful APIs. With the release of ASP.NET Core 8, building robust scalable APIs has never been easier. In this blog post, we'll explore how to build RESTful APIs using ASP.NET Core 8, including in-depth points, code samples, and personal insights. Whether you are a veteran developer or just starting out, you will find valuable information here to enhance your development experience.

RESTful APIs (Representational State Transfer) have become the standard for web services. They provide a simple, scalable way to expose data and functionality over HTTP. ASP.NET Core, a cross-platform, high-performance framework, is an excellent choice for building these APIs. With the release of ASP.NET Core 8, we get even more features and improvements to enhance our development experience.

For those interested in learning more about .NET development, check out our .NET Development blogs. Stay updated with the latest insights and best practices!

Why RESTful APIs?

Before diving into the technical details, let's take a moment to understand why RESTful APIs are so popular. RESTful APIs:

Are easy to understand and use: They use standard HTTP methods and status codes, making them accessible to developers of all levels.
Support a wide range of clients: From web applications to mobile apps and IoT devices, RESTful APIs can be consumed by virtually any client that can make HTTP requests.
Promote stateless communication: Each request from a client contains all the information needed to process it, allowing for scalable and resilient systems.
Encourage good design practices: Using REST principles, you can design clean, intuitive APIs that are easy to maintain and evolve.

Getting Started with ASP.NET Core 8

To start building a RESTful API with ASP.NET Core 8, you'll need to set up your development environment. Make sure you have the following installed:

.NET 8 SDK
Visual Studio or Visual Studio Code
A modern web browser for testing

Creating a New ASP.NET Core Project

Open your terminal or command prompt and run the following command to create a new ASP.NET Core project:

dotnet new webapi -n MyApi
cd MyApi

This command creates a new ASP.NET Core Web API project named MyApi and navigates into the project directory. Open the project in your preferred IDE.

Project Structure

Your project will have the following structure:

MyApi
├── Controllers
│   └── WeatherForecastController.cs
├── Program.cs
├── Startup.cs
└── MyApi.csproj

The Controllers folder contains the default WeatherForecastController. We'll create our own controllers shortly.

Building Your First API Endpoint

Let's create a simple API endpoint that returns a list of products. Start by defining a Product model.

Defining the Product Model

Create a new folder named Models and add a Product.cs file with the following content:

namespace MyApi.Models
{
    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public decimal Price { get; set; }
    }
}

Creating the Products Controller

Next, create a Controllers folder if it doesn't exist and add a ProductsController.cs file:

using Microsoft.AspNetCore.Mvc;
using MyApi.Models;
using System.Collections.Generic;
using System.Linq;

namespace MyApi.Controllers
{
    [ApiController]
    [Route("api/[controller]")]
    public class ProductsController : ControllerBase
    {
        private static readonly List<Product> Products = new List<Product>
        {
            new Product { Id = 1, Name = "Laptop", Price = 999.99M },
            new Product { Id = 2, Name = "Smartphone", Price = 499.99M }
        };

        [HttpGet]
        public ActionResult<IEnumerable<Product>> GetProducts()
        {
            return Ok(Products);
        }

        [HttpGet("{id}")]
        public ActionResult<Product> GetProduct(int id)
        {
            var product = Products.FirstOrDefault(p => p.Id == id);
            if (product == null)
            {
                return NotFound();
            }
            return Ok(product);
        }

        [HttpPost]
        public ActionResult<Product> CreateProduct(Product product)
        {
            product.Id = Products.Count + 1;
            Products.Add(product);
            return CreatedAtAction(nameof(GetProduct), new { id = product.Id }, product);
        }

        [HttpPut("{id}")]
        public IActionResult UpdateProduct(int id, Product updatedProduct)
        {
            var product = Products.FirstOrDefault(p => p.Id == id);
            if (product == null)
            {
                return NotFound();
            }

            product.Name = updatedProduct.Name;
            product.Price = updatedProduct.Price;
            return NoContent();
        }

        [HttpDelete("{id}")]
        public IActionResult DeleteProduct(int id)
        {
            var product = Products.FirstOrDefault(p => p.Id == id);
            if (product == null)
            {
                return NotFound();
            }

            Products.Remove(product);
            return NoContent();
        }
    }
}

Explanation

[ApiController] and [Route] Attributes: These attributes specify that this class is an API controller and define the base route for all actions in the controller.
GET /api/products: Returns a list of all products.
GET /api/products/{id}: Returns a single product by ID.
POST /api/products: Creates a new product.
PUT /api/products/{id}: Updates an existing product.
DELETE /api/products/{id}: Deletes a product by ID.

Running the API

To run your API, use the following command:

dotnet run

Open your browser and navigate to https://localhost:5001/api/products to see the list of products.

Advanced Features and Best Practices

Now that we have a basic API, let's explore some advanced features and best practices to make it more robust and maintainable.

Using Entity Framework Core

For real-world applications, you'll typically use a database to store data. Entity Framework Core (EF Core) is an excellent ORM (Object-Relational Mapper) for working with databases in .NET.

Setting Up EF Core

First, add EF Core packages to your project:

dotnet add package Microsoft.EntityFrameworkCore
dotnet add package Microsoft.EntityFrameworkCore.SqlServer

Configuring the DbContext

Create a Data folder and add an AppDbContext.cs file:

using Microsoft.EntityFrameworkCore;
using MyApi.Models;

namespace MyApi.Data
{
    public class AppDbContext : DbContext
    {
        public AppDbContext(DbContextOptions<AppDbContext> options) : base(options) { }

        public DbSet<Product> Products { get; set; }
    }
}

Update Program.cs to configure the DbContext:

using Microsoft.EntityFrameworkCore;
using MyApi.Data;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddControllers();
builder.Services.AddDbContext<AppDbContext>(options =>
    options.UseSqlServer(builder.Configuration.GetConnectionString("DefaultConnection")));

var app = builder.Build();

app.UseHttpsRedirection();

app.UseAuthorization();

app.MapControllers();

app.Run();

Add a connection string to appsettings.json:

{
  "ConnectionStrings": {
    "DefaultConnection": "Server=(localdb)\\mssqllocaldb;Database=MyApiDb;Trusted_Connection=True;"
  },
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "AllowedHosts": "*"
}

Updating the Products Controller

Update the ProductsController to use EF Core:

using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;
using MyApi.Data;
using MyApi.Models;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace MyApi.Controllers
{
    [ApiController]
    [Route("api/[controller]")]
    public class ProductsController : ControllerBase
    {
        private readonly AppDbContext _context;

        public ProductsController(AppDbContext context)
        {
            _context = context;
        }

        [HttpGet]
        public async Task<ActionResult<IEnumerable<Product>>> GetProducts()
        {
            return await _context.Products.ToListAsync();
        }

        [HttpGet("{id}")]
        public async Task<ActionResult<Product>> GetProduct(int id)
        {
            var product = await _context.Products.FindAsync(id);
            if (product == null)
            {
                return NotFound();
            }
            return product;
        }

        [HttpPost]
        public async Task<ActionResult<Product>> CreateProduct(Product product)
        {
            _context.Products.Add(product);
            await _context.SaveChangesAsync();

            return CreatedAtAction(nameof(GetProduct), new { id = product.Id }, product);
        }

        [HttpPut("{id}")]
        public async Task<IActionResult> UpdateProduct(int id, Product updatedProduct)
        {
            if (id != updatedProduct.Id)
            {
                return BadRequest();
            }

            _context.Entry(updatedProduct).State = EntityState.Modified;

            try
            {
                await _context.SaveChangesAsync();
            }
            catch (DbUpdateConcurrencyException)
            {
                if (!_context.Products.Any(e => e.Id == id))
                {
                    return NotFound();
                }
                else
                {
                    throw;
                }
            }

            return NoContent();
        }

        [HttpDelete("{id}")]
        public async Task<IActionResult> DeleteProduct(int id)
        {
            var product = await _context.Products.FindAsync(id);
            if (product == null)
            {
                return NotFound();
            }

            _context.Products.Remove(product);
            await _context.SaveChangesAsync();

            return NoContent();
        }
    }
}

Implementing Validation

To ensure data integrity, it's important to validate input. ASP.NET Core provides built-in validation mechanisms.

Add data annotations to the Product model:

using System.ComponentModel.DataAnnotations;

namespace MyApi.Models
{
    public class Product
    {
        public int Id { get; set; }

        [Required]
        [StringLength(100)]
        public string Name { get; set; }

        [Range(0.01, 10000.00)]
        public decimal Price { get; set; }
    }
}

Validation errors are automatically handled by ASP.NET Core and returned to the client.

Conclusion

Building RESTful APIs with ASP.NET Core 8 is a rewarding experience. With all the latest features and improvements, you can make powerful and scalable APIs for todays applications. From setting up your project and defining endpoints to leveraging Entity Framework Core and implementing validation, we've covered the basics to get you started.

And remember, the journey doesn't end here. Continue to learn and enhance your skills and ask questions or even get assistance from the community. Have fun coding!

What challenges have you faced while building APIs? Share your experiences and learn together!

Reach out in case you have questions or require further help. Your feedback and experiences help make this journey a much better one for everybody.

For those interested in learning more about .NET development, check out our .NET Development blogs. Stay updated with the latest insights and best practices!

How to Make React Applications SEO Friendly?

Tapesh Mehta — Fri, 28 Jun 2024 08:47:30 +0000

Introduction

Search Engine Optimization (SEO) is a necessity for the visibility and success of any web application. SEO friendliness is a challenge for React applications due to the single-page application nature of the app. However with the proper tools and techniques, you can make your React app perform better on SEO. In this article, we will explore various strategies to make your React applications SEO friendly, ensuring better search engine rankings and improved user experience.

React, developed by Facebook, is a JavaScript library used to create web pages. It is ideally suited to developing dynamic and interactive web applications, but its default configuration can be problematic for SEO. This is because React applications often use client-side rendering, which makes crawling and indexing content difficult for search engines. Techniques include server-side rendering (SSR), static site generation (SSG), meta tag management, URL structure optimization, etc. By the end of this guide, you will have a comprehensive understanding of how to optimize your React application for better SEO performance.

Recommended Read on SSR: How to Implement Server Side Rendering in React

Server-Side Rendering (SSR)

Server-side rendering (SSR) is a powerful technique to improve the SEO of React applications. With SSR, the server renders the initial HTML content before sending it to the client's browser. This approach allows search engines to crawl the pre-rendered HTML, improving the chances of indexing your content.

Implementing SSR with Next.js

Next.js is a popular React framework that supports SSR out of the box. To get started with Next.js:

Install Next.js:

npx create-next-app my-seo-friendly-app
cd my-seo-friendly-app

Create Pages:

Next.js uses a file-based routing system. Create pages by adding files to the pages directory.

For example, create an index.js file:

// pages/index.js
import React from 'react';

const HomePage = () => (
  <div>
    <h1>Welcome to My SEO Friendly React App</h1>
    <p>This is a server-side rendered page.</p>
  </div>
);

export default HomePage;

Start the Development Server:

npm run dev

Static Site Generation (SSG)

Static Site Generation (SSG) is another effective method to enhance SEO. SSG generates static HTML files at build time, which can be served quickly and efficiently. This approach is ideal for content-heavy websites, such as blogs and marketing sites.

Implementing SSG with Next.js

Next.js also supports SSG. To generate static pages:

Create Static Pages:

// pages/index.js
import React from 'react';

export async function getStaticProps() {
  // Fetch data at build time
  const data = await fetch('https://api.example.com/data');
  const jsonData = await data.json();

  return {
    props: {
      data: jsonData,
    },
  };
}

const HomePage = ({ data }) => (
  <div>
    <h1>Welcome to My SEO Friendly React App</h1>
    <p>{data.message}</p>
  </div>
);

export default HomePage;

Build the Application:

npm run build
npm run start

Next.js will generate static HTML files for each page, making them easily crawlable by search engines.

Meta Tag Management

Meta tags are essential for providing search engines with information about your web pages. Properly managing meta tags can significantly impact your SEO performance.

Using React Helmet

React Helmet is a library that helps manage meta tags in React applications. To use React Helmet:

Install React Helmet:

npm install react-helmet

Add Meta Tags:

// pages/index.js
import React from 'react';
import { Helmet } from 'react-helmet';

const HomePage = () => (
  <div>
    <Helmet>
      <title>My SEO Friendly React App</title>
      <meta name="description" content="Learn how to make React applications SEO friendly." />
      <meta name="keywords" content="React, SEO, Server-Side Rendering, Static Site Generation" />
    </Helmet>
    <h1>Welcome to My SEO Friendly React App</h1>
    <p>This is a server-side rendered page.</p>
  </div>
);

export default HomePage;

React Helmet allows you to dynamically manage meta tags, ensuring search engines receive the correct information.

URL Structure Optimization

A clean and descriptive URL structure is crucial for SEO. Avoid using query parameters and instead use descriptive, hyphenated URLs.

Implementing Clean URLs

1. Use Next.js for Routing:
Next.js automatically creates clean URLs based on the file names in the pages directory. For example, a file named about.js in the pages directory will be accessible at /about.

2. Dynamic Routes:
For dynamic routes, use square brackets. For example, to create a dynamic route for blog posts:

// pages/posts/[id].js
import React from 'react';
import { useRouter } from 'next/router';

const Post = () => {
  const router = useRouter();
  const { id } = router.query;

  return (
    <div>
      <h1>Post {id}</h1>
      <p>This is a dynamic route.</p>
    </div>
  );
};

export default Post;

Structured Data

Structured data helps search engines understand the content of your web pages better. Using JSON-LD, you can add structured data to your React application.

Adding Structured Data

Use React Helmet:

// pages/index.js
import React from 'react';
import { Helmet } from 'react-helmet';

const HomePage = () => (
  <div>
    <Helmet>
      <script type="application/ld+json">
        {`
          {
            "@context": "http://schema.org",
            "@type": "WebSite",
            "name": "My SEO Friendly React App",
            "url": "https://www.myseofriendlyreactapp.com"
          }
        `}
      </script>
    </Helmet>
    <h1>Welcome to My SEO Friendly React App</h1>
    <p>This is a server-side rendered page.</p>
  </div>
);

export default HomePage;

Adding structured data can improve your website’s visibility in search results, enhancing the overall SEO performance.

Lazy Loading Images

Lazy loading images can improve page load times, enhancing both user experience and SEO.

Use the loading Attribute:

const HomePage = () => (
  <div>
    <h1>Welcome to My SEO Friendly React App</h1>
    <img src="path/to/image.jpg" alt="Description" loading="lazy" />
  </div>
);

export default HomePage;

Lazy loading images ensure that only the images currently in the viewport are loaded, reducing initial page load times.

Conclusion

SEO friendly React applications requires a combination of server-side rendering, static site generation, proper meta tag management, clean URL structures, structured data and lazy loading images. With these strategies, you can improve the SEO of your React apps for more visibility and higher search engine ranks. Adopting tools such as Next.js and React Helmet can make it easier to develop SEO-friendly React apps. With these best practices in place, you can make your React application performant and search engines friendly.

Next.js will handle the server-side rendering, providing a fully rendered HTML page to search engines.

Data Access with Dapper: A Lightweight ORM for .NET Apps

Tapesh Mehta — Thu, 27 Jun 2024 15:49:55 +0000

Introduction

In this blog article, we'll cover how to efficiently access data using Dapper, a lightweight ORM for .NET applications. We'll discuss its key features and compare it with Entity Framework along the way.

Data access is a crucial aspect of any application. The selection of the best tool for the job will impact performance, maintainability, and development ease. Dapper is a lightweight Object Relational Mapper (ORM) for .NET that will compete with standard ORMs like Entity Framework. This article will introduce Dapper, compare it with Entity Framework, and demonstrate real-world examples with performance benchmarks.

For those interested in learning more about .NET development, check out our .NET Development blogs. Stay updated with the latest insights and best practices!

Introduction to Dapper

Dapper is a micro-ORM developed by the team at Stack Exchange. Unlike full-fledged ORMs like Entity Framework, Dapper focuses on being simple and performant. It does this by providing a straightforward API for executing SQL queries and mapping results to strongly-typed objects.

Key Features of Dapper

Lightweight and Fast: Dapper is designed to be minimalistic and efficient, with minimal overhead.
Simple API: The API is intuitive and easy to use, allowing developers to execute SQL queries directly and map results to objects.
Flexibility: It allows you to write raw SQL queries, giving you full control over your database interactions.
Extension Methods: Dapper extends the IDbConnection interface, making it easy to integrate with existing ADO.NET code.

To get started with Dapper, you need to install the Dapper package from NuGet. You can do this using the Package Manager Console:

Install-Package Dapper

Comparing Dapper with Entity Framework

Entity Framework (EF) is a popular ORM for .NET that provides a high level of abstraction over database interactions. It uses a model-first or code-first approach to generate database schemas and manage data access.

Key Differences:

Performance: Dapper is significantly faster than Entity Framework because it generates minimal overhead. EF, on the other hand, offers rich features but at the cost of performance.
Complexity: EF provides a higher level of abstraction and includes features like change tracking, lazy loading, and navigation properties. Dapper is more lightweight and requires you to write SQL queries manually.
Flexibility: Dapper offers more control and flexibility as it allows direct SQL execution. EF abstracts much of the SQL away, which can be a limitation in some scenarios.
Learning Curve: EF has a steeper learning curve due to its rich feature set. Dapper is easier to learn and use for developers familiar with SQL.

Real-world Examples

Let's explore some real-world examples to see how Dapper can be used for common data access tasks.

Example 1: Basic CRUD Operations

First, we need to set up a database connection. Assume we have a Product table in our database.

CREATE TABLE Product (
    Id INT PRIMARY KEY IDENTITY,
    Name NVARCHAR(100),
    Price DECIMAL(18, 2)
);

Now, let's perform basic CRUD operations using Dapper.

Create:

using System.Data.SqlClient;
using Dapper;

string connectionString = "your_connection_string";
using (var connection = new SqlConnection(connectionString))
{
    string insertQuery = "INSERT INTO Product (Name, Price) VALUES (@Name, @Price)";
    var result = connection.Execute(insertQuery, new { Name = "Laptop", Price = 999.99m });
    Console.WriteLine($"{result} row(s) inserted.");
}

Read:

using (var connection = new SqlConnection(connectionString))
{
    string selectQuery = "SELECT * FROM Product WHERE Id = @Id";
    var product = connection.QuerySingleOrDefault<Product>(selectQuery, new { Id = 1 });
    Console.WriteLine($"Product: {product.Name}, Price: {product.Price}");
}

Update:

using (var connection = new SqlConnection(connectionString))
{
    string updateQuery = "UPDATE Product SET Price = @Price WHERE Id = @Id";
    var result = connection.Execute(updateQuery, new { Id = 1, Price = 1099.99m });
    Console.WriteLine($"{result} row(s) updated.");
}

Delete:

using (var connection = new SqlConnection(connectionString))
{
    string deleteQuery = "DELETE FROM Product WHERE Id = @Id";
    var result = connection.Execute(deleteQuery, new { Id = 1 });
    Console.WriteLine($"{result} row(s) deleted.");
}

Example 2: Using Stored Procedures

Dapper also supports executing stored procedures.

CREATE PROCEDURE GetProductById
    @Id INT
AS
BEGIN
    SELECT * FROM Product WHERE Id = @Id
END

using (var connection = new SqlConnection(connectionString))
{
    var product = connection.QuerySingleOrDefault<Product>(
        "GetProductById",
        new { Id = 1 },
        commandType: CommandType.StoredProcedure);
    Console.WriteLine($"Product: {product.Name}, Price: {product.Price}");
}

Example 3: Mapping Complex Types

Dapper can map complex types and relationships.

CREATE TABLE Category (
    Id INT PRIMARY KEY IDENTITY,
    Name NVARCHAR(100)
);

ALTER TABLE Product ADD CategoryId INT;
ALTER TABLE Product ADD CONSTRAINT FK_Product_Category FOREIGN KEY (CategoryId) REFERENCES Category(Id);

public class Product
{
    public int Id { get; set; }
    public string Name { get; set; }
    public decimal Price { get; set; }
    public Category Category { get; set; }
}

public class Category
{
    public int Id { get; set; }
    public string Name { get; set; }
}

using (var connection = new SqlConnection(connectionString))
{
    string sql = @"
        SELECT p.*, c.* 
        FROM Product p 
        INNER JOIN Category c ON p.CategoryId = c.Id
        WHERE p.Id = @Id";

    var product = connection.Query<Product, Category, Product>(
        sql,
        (product, category) => {
            product.Category = category;
            return product;
        },
        new { Id = 1 },
        splitOn: "Id").FirstOrDefault();

    Console.WriteLine($"Product: {product.Name}, Price: {product.Price}, Category: {product.Category.Name}");
}

Performance Benchmarks

To illustrate the performance differences, let's compare Dapper and Entity Framework in terms of query execution time. Below are some benchmark results (in milliseconds) for retrieving 1000 records from a Product table.

The benchmark results show that Dapper performs significantly better than Entity Framework for this specific use case. While EF offers more features, Dapper's performance advantage can be crucial for high-load applications.

ORM	Query Execution Time (ms)
Dapper	15
Entity Framework	45

Conclusion

Dapper is an excellent choice for developers who need a lightweight, fast and flexible ORM for .NET applications. Its simplicity and performance make it suitable for many data access situations, whenever you want complete control over SQL queries. Though Entity Framework offers additional features, Dapper is more efficient and simpler to use compared to a lot of programs.

Adding Dapper to your .NET projects will help you optimize data access, improve performance, and maintain flexibility in your database interactions. Whether you are developing a small application or a large enterprise system, Dapper enables you to develop a maintainable data access code.

For those interested in learning more about .NET development, check out our .NET Development blogs. Stay updated with the latest insights and best practices!

Advanced Logging in ASP.NET Core with Serilog

Tapesh Mehta — Thu, 27 Jun 2024 15:16:42 +0000

Introduction

In today's blog post we'll learn how to do advanced logging in ASP.NET Core with Serilog. Logging is a vital part of any business application and offers visibility into application behaviour, performance and possible issues. Among the logging frameworks available for .NET, Serilog offers a flexible, structured logging and multiple sink integration. This article will explain why you should use Serilog, how to configure it for different sinks and enrichers, and best practices for structured logging in enterprise applications.

For those interested in learning more about .NET development, check out our .NET Development blogs. Stay updated with the latest insights and best practices!

Why Use Serilog for Logging?

Structured Logging: Serilog's primary strength is its support for structured logging, which allows you to capture detailed, queryable log data.
Flexibility: Serilog is highly configurable and supports numerous sinks (outputs) and enrichers (additional data in logs).
Ease of Use: With a simple and fluent configuration API, setting up Serilog in your application is straightforward.
Performance: Serilog is designed for high-performance logging, ensuring minimal overhead on your application.

Configuring Serilog for Various Sinks and Enrichers

Let's dive into configuring Serilog in an ASP.NET Core application, focusing on different sinks and enrichers.

Step 1: Setting Up Serilog

First, add the necessary Serilog packages to your project. You can do this via NuGet Package Manager or by running the following commands in the Package Manager Console:

Install-Package Serilog.AspNetCore
Install-Package Serilog.Sinks.Console
Install-Package Serilog.Sinks.File
Install-Package Serilog.Sinks.MSSqlServer
Install-Package Serilog.Sinks.Datadog
Install-Package Serilog.Enrichers.Environment
Install-Package Serilog.Enrichers.Thread

Step 2: Configuring Serilog in Program.cs

In the Program.cs file, configure Serilog as the logging provider for your ASP.NET Core application:

using Serilog;

public class Program
{
    public static void Main(string[] args)
    {
        Log.Logger = new LoggerConfiguration()
            .MinimumLevel.Debug()
            .Enrich.WithEnvironmentName()
            .Enrich.WithThreadId()
            .WriteTo.Console()
            .WriteTo.File("logs/log.txt", rollingInterval: RollingInterval.Day)
            .WriteTo.MSSqlServer(
                connectionString: "YourConnectionString",
                sinkOptions: new Serilog.Sinks.MSSqlServer.MSSqlServerSinkOptions { TableName = "Logs" })
            .WriteTo.DatadogLogs(
                apiKey: "YourDatadogApiKey",
                source: "YourApplicationName")
            .CreateLogger();

        try
        {
            Log.Information("Starting up");
            CreateHostBuilder(args).Build().Run();
        }
        catch (Exception ex)
        {
            Log.Fatal(ex, "Application start-up failed");
            throw;
        }
        finally
        {
            Log.CloseAndFlush();
        }
    }

    public static IHostBuilder CreateHostBuilder(string[] args) =>
        Host.CreateDefaultBuilder(args)
            .UseSerilog()
            .ConfigureWebHostDefaults(webBuilder =>
            {
                webBuilder.UseStartup<Startup>();
            });
}

Step 3: Enriching Logs

Enrichers add valuable context to your log entries. Here, we've used environment and thread ID enrichers. You can add more enrichers as needed:

.Enrich.WithEnvironmentName()
.Enrich.WithThreadId()

Step 4: Detailed Configuration for Various Sinks

Console Sink

The console sink outputs logs to the console, which is useful during development:

.WriteTo.Console()

File Sink

The file sink writes logs to a file, with options for rolling logs daily:

.WriteTo.File("logs/log.txt", rollingInterval: RollingInterval.Day)

SQL Server Sink

The SQL Server sink stores logs in a database, allowing for robust querying and analysis:

.WriteTo.MSSqlServer(
    connectionString: "YourConnectionString",
    sinkOptions: new Serilog.Sinks.MSSqlServer.MSSqlServerSinkOptions { TableName = "Logs" })

Ensure you have a table in your database to store the logs. You can create it using the following SQL script:

CREATE TABLE Logs (
    Id INT IDENTITY(1,1) PRIMARY KEY,
    Message NVARCHAR(MAX),
    MessageTemplate NVARCHAR(MAX),
    Level NVARCHAR(128),
    TimeStamp DATETIMEOFFSET,
    Exception NVARCHAR(MAX),
    Properties NVARCHAR(MAX)
);

Datadog Sink

The Datadog sink sends logs to Datadog, a popular monitoring and analytics platform:

.WriteTo.DatadogLogs(
    apiKey: "YourDatadogApiKey",
    source: "YourApplicationName")

Replace "YourDatadogApiKey" with your actual Datadog API key and set an appropriate source name for your application.

Best Practices for Structured Logging in Enterprise Applications

Use Structured Logging: Capture logs in a structured format to enable advanced querying and analysis.
Log at Appropriate Levels: Use different log levels (e.g., Debug, Information, Warning, Error, Fatal) to capture the right amount of detail.
Avoid Sensitive Information: Ensure that sensitive data (e.g., passwords, personal information) is not logged.
Use Enrichers: Add contextual information to your logs using enrichers to make them more informative.
Centralize Logging: Store logs in a central location (e.g., SQL Server, Datadog) to facilitate monitoring and troubleshooting.
Monitor Log Size and Performance: Regularly monitor the size and performance impact of your logs, and configure log rotation or retention policies as needed.

Comparison of Serilog, NLog, and log4net for ASP.NET Core Logging

NLog and log4net are other popular logging libraries used in the .NET ecosystem. Both have a strong user base and offer extensive features for various logging needs. However, Serilog stands out with its advanced structured logging capabilities, flexible configuration, and a wide range of built-in enrichers and sinks. The table below provides a detailed comparison of these three logging frameworks, highlighting their strengths and differences to help you choose the best option for your ASP.NET Core application.

Feature	Serilog	NLog	log4net
Structured Logging	Yes	Limited	Limited
Performance	High performance	High performance	Moderate performance
Enrichers	Extensive support for enrichers	Basic support	Basic support
Sinks/Appenders	Extensive (Console, File, SQL, Datadog, etc.)	Extensive (Console, File, Database, etc.)	Extensive (Console, File, Database, etc.)
Asynchronous Logging	Yes	Yes	Yes
Community and Support	Strong community and active development	Strong community and active development	Strong community but less active development
Documentation	Excellent documentation and examples	Good documentation	Good documentation
Flexibility	Highly flexible and easily extendable	Highly flexible and easily extendable	Highly flexible and easily extendable
Built-in Enrichers	Yes (e.g., Environment, Thread, Machine Name)	No built-in enrichers, custom development needed	No built-in enrichers, custom development needed
Log Event Properties	Structured properties with rich data types	Structured properties, but less emphasis on richness	Structured properties, but less emphasis on richness
Library Size	Lightweight	Lightweight	Lightweight
Configuration Format	Code-based, JSON, XML	XML, JSON, code-based	XML, code-based
Support for .NET Core	Excellent support for .NET Core	Excellent support for .NET Core	Excellent support for .NET Core
Custom Sinks/Appenders	Easy to create custom sinks	Easy to create custom targets	Easy to create custom appenders

Conclusion

Serilog is a powerful logging framework supporting structured logging in ASP.NET Core applications. By configuring Serilog with different sinks and enrichers, you can analyze your application's behavior and performance. Best practices for structured logging help you make your logs informative, manageable, and useful for diagnosing issues in your enterprise applications.

By following the steps outlined in this article, you can set up a robust logging system that enhances your application's observability and helps you maintain high reliability and performance.

Hope you find this blog post helpful. Happy coding and exploring with Serilog!

For those interested in learning more about .NET development, check out our .NET Development blogs. Stay updated with the latest insights and best practices!

Advanced Angular Forms: Dynamic Fields & Custom Validators

Tapesh Mehta — Wed, 26 Jun 2024 16:19:05 +0000

Introduction

Forms are a fundamental part of web applications, allowing users to input and submit data. Form handling in Angular is robust and flexible using reactive forms. More complex and dynamic forms of applications require advanced techniques to handle them. In this article, we'll delve into advanced Angular form handling, focusing on dynamic forms and custom validators. We'll use Angular 18.0.3 for this and leverage the new features and improvements. This guide will help developers of any Angular Development Company to improve their form handling capabilities.

Setting Up the Angular Project

First, let's set up a new Angular project. Ensure you have Angular CLI installed, then create a new project:

ng new advanced-angular-forms
cd advanced-angular-forms
ng add @angular/forms

This setup provides the basic structure and dependencies needed for our application. The Angular CLI facilitates a smooth development experience by scaffolding the project structure and managing dependencies.

Creating Dynamic Forms

Dynamic forms are forms whose structure can change at runtime. This is useful when form fields need to be added or removed based on user interactions or data retrieved from a server. These forms provide flexibility and adaptability, crucial for applications with variable data input requirements.

Step 1: Define the Form Model

Start by defining a form model using FormGroup and FormControl in your component. Create a new component for our form:

ng generate component dynamic-form

In dynamic-form.component.ts, define the form model:

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, Validators } from '@angular/forms';

@Component({
  selector: 'app-dynamic-form',
  templateUrl: './dynamic-form.component.html',
  styleUrls: ['./dynamic-form.component.css']
})
export class DynamicFormComponent implements OnInit {
  dynamicForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.dynamicForm = this.fb.group({
      name: ['', Validators.required],
      items: this.fb.array([])
    });
  }

  ngOnInit(): void { }

  get items(): FormArray {
    return this.dynamicForm.get('items') as FormArray;
  }

  addItem(): void {
    this.items.push(this.fb.control('', Validators.required));
  }

  removeItem(index: number): void {
    this.items.removeAt(index);
  }

  onSubmit(): void {
    console.log(this.dynamicForm.value);
  }
}

In this code, we use FormBuilder to simplify the creation of our form model. The form consists of a name control and an items form array. The items array will hold dynamically added form controls.

Step 2: Build the Template

In dynamic-form.component.html, create a form template that allows adding and removing form controls dynamically:

<form [formGroup]="dynamicForm" (ngSubmit)="onSubmit()">
  <div>
    <label for="name">Name</label>
    <input id="name" formControlName="name">
  </div>

  <div formArrayName="items">
    <div *ngFor="let item of items.controls; let i = index">
      <label for="item-{{ i }}">Item {{ i + 1 }}</label>
      <input [id]="'item-' + i" [formControlName]="i">
      <button type="button" (click)="removeItem(i)">Remove</button>
    </div>
  </div>

  <button type="button" (click)="addItem()">Add Item</button>
  <button type="submit" [disabled]="!dynamicForm.valid">Submit</button>
</form>

This template uses Angular's form directives to bind the form model to the view. The *ngFor directive iterates over the items array, creating form controls dynamically. The formArrayName directive binds the form array to the template, ensuring synchronization between the model and view.

Implementing Custom Validators

Custom validators are necessary for complex validation logic that goes beyond Angular's built-in validators. Validators ensure that the data entered by users meets specific criteria, enhancing data integrity and user experience. Let's implement a custom validator that ensures no duplicate items are added to the dynamic form.

Step 1: Create the Validator Function

In dynamic-form.component.ts, add a custom validator function:

import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';

export function uniqueItemsValidator(): ValidatorFn {
  return (formArray: AbstractControl): ValidationErrors | null => {
    const items = formArray.value;
    const uniqueItems = new Set(items);
    return items.length !== uniqueItems.size ? { duplicateItems: true } : null;
  };
}

This function checks for duplicate items by comparing the length of the items array with the length of a Set created from the items array. If they differ, it means there are duplicates, and the validator returns an error object.

Step 2: Apply the Validator to the Form Array

Update the form group definition to include the custom validator:

this.dynamicForm = this.fb.group({
  name: ['', Validators.required],
  items: this.fb.array([], uniqueItemsValidator())
});

Here, we attach the uniqueItemsValidator to the items form array, ensuring that our custom validation logic is applied whenever the form array changes.

Step 3: Display Validation Errors

Update the template to display validation errors:

<div formArrayName="items">
  <div *ngFor="let item of items.controls; let i = index">
    <label for="item-{{ i }}">Item {{ i + 1 }}</label>
    <input [id]="'item-' + i" [formControlName]="i">
    <button type="button" (click)="removeItem(i)">Remove</button>
  </div>
  <div *ngIf="items.hasError('duplicateItems')">
    Duplicate items are not allowed.
  </div>
</div>

This ensures that users receive immediate feedback when they attempt to add duplicate items, enhancing the form's usability and data integrity.

Performance Considerations

When dealing with dynamic forms, performance can be a concern, especially if forms are large or complex. Here are some tips to keep performance in check:

Debounce Input Changes: Use debounceTime with valueChanges to reduce the frequency of form updates. This can prevent performance degradation in forms with many controls.

this.dynamicForm.valueChanges.pipe(
  debounceTime(300)
).subscribe(value => {
  console.log(value);
});

OnPush Change Detection: Use ChangeDetectionStrategy.OnPush to reduce unnecessary change detection cycles. This strategy tells Angular to check the component's view only when its input properties change.

@Component({
  selector: 'app-dynamic-form',
  templateUrl: './dynamic-form.component.html',
  styleUrls: ['./dynamic-form.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class DynamicFormComponent { /*...*/ }

Lazy Loading Form Controls: Load form controls only when necessary, such as when a user interacts with a particular section of the form. This can significantly reduce initial load times and improve performance.

Conclusion

Advanced form scenarios in Angular require creating dynamic forms and using custom validators to validate data integrity. Using Angular's reactive forms, we build flexible, robust forms that respond to changing requirements. Taking performance into account, these techniques can be used to produce fast and friendly forms in any Angular app.

This article demonstrated how to create dynamic forms and custom validators, from which more complex form-based features can be built in Angular. Exploring these concepts will help you to fully utilize Angular's form management capabilities. As you continue to create applications, these advanced form handling methods will prove invaluable for producing user-friendly, responsive, and dynamic forms.