DEV Community: Leonardo

Agile and Modular Development with Vertical Slice Architecture and MediatR in C# Projects

Leonardo — Sat, 02 Sep 2023 14:51:54 +0000

Developing software in an agile and efficient manner is essential to meet the growing demands of modern software projects. The combination of Vertical Slice Architecture with the MediatR library in C# projects offers a powerful approach to creating modular, decoupled, and high-quality software. In this article, we will delve into Vertical Slice Architecture, show how MediatR seamlessly integrates with this approach.

Understanding Vertical Slice Architecture

Vertical Slice Architecture is a software design methodology that emphasizes the development of complete and independent functionalities, as opposed to traditional layer-based organization. Instead of structuring code into layers such as presentation, business logic, and data access, Vertical Slice Architecture organizes code into "vertical slices," where each slice represents a complete system functionality. This includes not only the user interface but also the business logic and data access related to that specific functionality.

Introduction to MediatR

MediatR is a popular library in .NET that simplifies the implementation of request mediation patterns. It allows separating business logic into request handlers, making the code more organized, decoupled, and easy to maintain. MediatR aligns perfectly with Vertical Slice Architecture as it helps orchestrate actions within a vertical slice.

Folder Structure for Vertical Slice Architecture Projects

A well-organized folder structure is essential for maintaining code clarity and manageability in projects following Vertical Slice Architecture. Below is a suggested folder structure:

MyProject/
|-- MyApiProject/
|   |-- Controllers/
|   |   |-- CartController.cs
|   |   |-- UserController.cs
|-- MyApplicationProject/
|   |-- Modules/
|   |   |-- Cart/
|   |   |   |-- AddToCart/
|   |   |   |   |-- Requests/
|   |   |   |   |   |-- AddToCartRequest.cs
|   |   |   |   |-- Handlers/
|   |   |   |   |   |-- AddToCartHandler.cs
|   |   |   |   |-- Validators/ (optional)
|   |   |   |   |   |-- AddToCartValidator.cs
|   |-- User/
|   |   |   |-- CreateUser/
|   |   |   |   |-- Requests/
|   |   |   |   |   |-- CreateUserRequest.cs
|   |   |   |   |-- Handlers/
|   |   |   |   |   |-- CreateUserHandler.cs
|   |   |   |   |-- Validators/ (optional)
|   |   |   |   |   |-- CreateUserValidator.cs
|-- MySharedProject/
|   |-- Infrastructure/
|   |   |-- Persistence/
|   |   |   |-- DbContext.cs
|   |   |-- Services/
|   |   |   |-- EmailService.cs
|-- MyProject.sln

Suggested Folder Structure:

Modules: This folder is the core of Vertical Slice Architecture. It houses subfolders for each module that represents a specific system functionality. For example, you may have a module called "Cart" for shopping cart-related functionalities and another module called "User" for user-related functionalities.
Controllers: Within each module, you can find the "Controllers" folder. This is the user interface layer where controllers reside. Controllers are responsible for handling user interface interactions related to a specific module.
Requests and Handlers: For each module, there are separate subfolders called "Requests" and "Handlers." Requests are structured to define the data needed to perform an action within the module. On the other hand, request handlers are responsible for implementing the corresponding business logic for these requests. This keeps the module's business logic encapsulated and well-organized.
Validators (optional): The "Validators" folder is an optional but valuable addition. Here, you can include validators that ensure input data is valid before being processed by request handlers. This contributes to data integrity and system security.
Shared: Finally, the "Shared" folder is the place for shared code between modules. This includes infrastructure services, general configurations, and any functionality used by multiple modules. This organization promotes code reuse and ease of maintenance.

This folder structure provides a clear division of responsibilities in your project, following Vertical Slice Architecture guidelines. Each module is an independent and cohesive unit of functionality, making your code more modular, scalable, and manageable.

Implementation with MediatR in Detail

Now, let's delve deeper into our understanding of Vertical Slice Architecture and MediatR with a practical example of implementation in a specific module, such as "Cart."

Step 1: Identifying the Functionality

Let's assume we want to implement the "Add a product to the shopping cart" functionality.

Step 2: Developing the Vertical Slice

Defining a Request

First, we create a AddToCartRequest class that contains information about the product to be added to the cart.

public class AddToCartRequest : IRequest<Result>
{
    public int ProductId { get; set; }
    public int Quantity { get; set; }
}

Creating a Request Handler

Next, we implement a request handler AddToCartHandler that processes the request and adds the product to the cart.

public class AddToCartHandler : IRequestHandler<AddToCartRequest, Result>
{
    private readonly ICartService _cartService;

    public AddToCartHandler(ICartService cartService)
    {
        _cartService = cartService;
    }

    public async Task<Result> Handle(AddToCartRequest request, CancellationToken cancellationToken)
    {
        // Logic to add the product to the cart using the cart service
        bool addToCartResult = await _cartService.AddToCart(request.ProductId, request.Quantity);

        bool isAddToCartSuccessful = addToCartResult; // Check if adding the product to the cart was successful.
        return Result.SuccessIf(isAddToCartSuccessful, "Failed to add the product to the cart."); // Return failure if adding to cart fails.
    }
}

Using MediatR in the Controller

In the control or application layer, we use MediatR to process the request.

public class CartController : ControllerBase
{
    private readonly IMediator _mediator;

    public CartController(IMediator mediator)
    {
        _mediator = mediator;
    }

    [HttpPost]
    public async Task<IActionResult> AddToCart([FromBody] AddToCartRequest request)
    {
        var result = await _mediator.Send(request);

        if (result.IsSuccess)
        {
            return Ok("Product added to the cart successfully.");
        }
        else
        {
            return BadRequest(result.ErrorMessage);
        }
    }
}

Step 3: Testing and Validation

After implementing the vertical slice, we perform comprehensive testing to ensure that the functionality works as expected. We test both success cases and error scenarios, verifying that the product is added correctly to the cart.

Benefits of Vertical Slice Architecture with MediatR

Adopting Vertical Slice Architecture with MediatR offers several benefits:

Rapid Development: It enables rapid development of independent functionalities.
Decoupling: The use of MediatR promotes a high degree of decoupling between parts of the system, facilitating maintenance and scalability.
Testability: The MediatR structure makes it easier to write unit tests for request handlers.
Scalability: As the system grows, new vertical slices can be added without affecting existing ones, making the system highly scalable.

Conclusion

The combination of Vertical Slice Architecture and MediatR is a powerful approach to agile development in C# projects. It allows the creation of independent and decoupled functionalities, accelerating development and easing code maintenance. By implementing this approach in your team, you will be well-prepared to confidently tackle the complex challenges of software development.

In this article, we have delved into Vertical Slice Architecture and MediatR. Now, it's time to apply these concepts to your own projects and reap the benefits of more efficient and modular development. As you embrace these practices, you will be better equipped to meet the dynamic needs of the software development world.

Security in Angular Applications: Protecting Your Data and Users

Leonardo — Thu, 24 Aug 2023 12:45:48 +0000

In an increasingly digital and interconnected world, security is more critical than ever. As the number of cyber threats continues to grow, protecting sensitive data and user trust have become non-negotiable priorities. This article is a dive into the vast ocean of security in Angular applications, where we will explore strategies and practical examples to ensure the integrity and confidentiality of your users' data.

Advanced Authentication and Authorization

Using Angular JWT for Authentication

Authentication is the first line of defense against cyber threats. For robust authentication, Angular JWT (JSON Web Token) is a valuable tool. Let's take a detailed look at the configuration:

// Angular JWT Configuration
import { JwtModule } from '@auth0/angular-jwt';

export function tokenGetter() {
  return localStorage.getItem('access_token');
}

@NgModule({
  imports: [
    // ...
    JwtModule.forRoot({
      config: {
        tokenGetter: tokenGetter,
        allowedDomains: ['example.com'], // Allowed domains for authentication
        disallowedRoutes: ['example.com/api/login'] // Routes excluded from authentication
      }
    })
  ],
  declarations: [
    // ...
  ],
  providers: [
    // ...
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Creating Custom Guards

Authorization is equally important to control who can access critical parts of your application. Let's create custom guards to ensure that only authorized users have access:

import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { AuthService } from './auth.service';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard {
  constructor(private authService: AuthService, private router: Router) {}

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): boolean {
    if (this.authService.isLoggedIn()) {
      // Authenticated user, allow access to the route
      return true;
    } else {
      // Unauthenticated user, redirect to the login page
      this.router.navigate(['/login']);
      return false;
    }
  }
}

Protection Against Attacks

Defending Against XSS (Cross-Site Scripting)

XSS is a common threat that can expose your application to attacks. Implementing input data validation and sanitization is essential:

<!-- Angular Template -->
<div [innerHTML]="userInput | sanitizeHtml"></div>

// Custom Pipe for sanitization
import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Pipe({
  name: 'sanitizeHtml'
})
export class SanitizeHtmlPipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {}

  transform(value: string): SafeHtml {
    return this.sanitizer.bypassSecurityTrustHtml(value);
  }
}

Combating CSRF (Cross-Site Request Forgery)

Protecting your application against CSRF is crucial. Introduce anti-CSRF tokens in your HTTP requests:

// Angular HttpClient with anti-CSRF token
import { HttpClient, HttpHeaders } from '@angular/common/http';

const headers = new HttpHeaders({
  'Content-Type': 'application/json',
  'X-CSRF-Token': 'token-generated-on-server'
});

const options = { headers: headers };

this.http.post('your-api-url', data, options)
  .subscribe(response => {
    // Response handling logic
  });

Data Security

HTTPS: The Foundation of Secure Communication

Data security is a cornerstone. Ensure that all communications between the client and server are secure by configuring HTTPS.

Secure Storage of Authentication Tokens

Authentication tokens are valuable targets. Ensure the secure storage of these tokens on the client side using techniques like HttpOnly Cookies and secure Local Storage.

API Security: Best Practices

Your API is a critical component of the ecosystem. Follow security best practices, including two-factor authentication, rate limiting, and protection against SQL injection. Implement these measures in your API to ensure the security of your data.

Auditing and Monitoring

Implementing Audit Logs

Real-time auditing is vital for early threat detection. Configure detailed audit logs in your Angular application:

// Implementation of audit logs
logAuditEvent(event: string, details: string) {
  const auditLog = {
    event: event,
    details: details,
    timestamp: new Date()
  };

  // Send the audit log to the server
  this.http.post('your-audit-url', auditLog).subscribe(response => {
    // Response handling logic
  });
}

Continuous Security Monitoring

Establish a continuous security monitoring system for your application. Set up alerts for suspicious activities, such as failed login attempts, access to sensitive resources, and unusual traffic. Utilize third-party monitoring tools to gain real-time insights into the security of your application.

Conclusion

In this article, we explored advanced security in Angular applications. Authentication, authorization, protection against XSS and CSRF, data security, auditing, and monitoring are all essential aspects of ensuring the security and reliability of your applications.

Please do not hesitate to share your ideas, feedback, or suggestions to enhance this article.

Exploring the Depths of Observables and RxJS in Angular Applications

Leonardo — Mon, 14 Aug 2023 02:42:10 +0000

Observables and the RxJS library play a pivotal role in the development of reactive and asynchronous applications using Angular. This comprehensive article delves deeply into the intricacies of RxJS, exploring advanced concepts, sophisticated operators, and practical examples that exemplify their application in intricate scenarios within Angular projects.

Custom Observables: Constructing Tailored Data Streams

Beyond the pre-built Observables furnished by the RxJS library, the capacity to create custom data streams is indispensable. This proves especially valuable when generating sequences of values that are not sourced externally, such as from APIs or events. Here, we construct a custom Observable emitting a sequence of values at regular intervals.

import { Observable } from 'rxjs';

// Creating a bespoke Observable
const customObservable = new Observable<number>((observer) => {
  let count = 0;
  const intervalId = setInterval(() => {
    observer.next(count++);
  }, 1000);

  // Clearing the interval on subscription cancellation
  return () => {
    clearInterval(intervalId);
  };
});

// Subscribing to the custom Observable
const subscription = customObservable.subscribe((value) => {
  console.log(`Emitted value: ${value}`);
});

// Unsubscribing after 5 seconds
setTimeout(() => {
  subscription.unsubscribe();
}, 5000);

In the provided example, a custom Observable named customObservable is established. It emits values at 1-second intervals. Upon subscription cancellation, the interval is cleared to avert memory leaks.

Sharing Observables: Multicasting for Efficiency

There arise instances where sharing an Observable amongst multiple observers mitigates redundant API calls and resource consumption. The share operator facilitates this sharing. Herein, we explore the process of sharing a stream of numbers at regular intervals.

import { interval } from 'rxjs';
import { share } from 'rxjs/operators';

// Generating an Observable emitting numbers at regular intervals
const sharedObservable = interval(1000).pipe(share());

// First observer
sharedObservable.subscribe((value) => {
  console.log(`Observer 1: ${value}`);
});

// Second observer (3 seconds later)
setTimeout(() => {
  sharedObservable.subscribe((value) => {
    console.log(`Observer 2: ${value}`);
  });
}, 3000);

In the aforementioned example, the share operator guarantees the sharing of the number stream between observers. Thus, the initial observer commences counting from zero, and the subsequent observer continues from the point where the first left off.

Advanced RxJS Operators: Manipulating Data Streams

The RxJS library boasts a diverse array of operators designed to transform, combine, and manipulate data streams. Advanced operators like concatMap, exhaustMap, and bufferTime are scrutinized below.

import { of, interval, fromEvent } from 'rxjs';
import { concatMap, exhaustMap, bufferTime } from 'rxjs/operators';

// ConcatMap: Emitting values sequentially from inner Observables
of(1, 2, 3).pipe(
  concatMap((value) => interval(1000))
).subscribe((value) => {
  console.log(`ConcatMap: ${value}`);
});

// ExhaustMap: Ignoring new emissions during the activity of an inner Observable
fromEvent(document, 'click').pipe(
  exhaustMap(() => interval(1000))
).subscribe((value) => {
  console.log(`ExhaustMap: ${value}`);
});

// BufferTime: Grouping button clicks within time intervals
const clicks$ = fromEvent(document, 'click');

clicks$.pipe(
  bufferTime(2000)
).subscribe((clicks) => {
  console.log(`Clicked ${clicks.length} times in the last 2 seconds.`);
});

The concatMap operator consecutively emits values from inner Observables, while the exhaustMap operator disregards new emissions while an inner Observable is active. The bufferTime operator groups button clicks occurring within a designated time interval.

Advanced Asynchronous Management Strategies: Addressing Complex Scenarios

Advanced strategies for managing asynchronous operations encompass utilizing ReplaySubject to replay historical values and implementing timeouts and retries via the timeout and retry operators.

import { ReplaySubject, interval, throwError } from 'rxjs';
import { timeout, retry, delay, catchError } from 'rxjs/operators';

// ReplaySubject: Replaying past values
const replaySubject = new ReplaySubject(2);
replaySubject.next(1);
replaySubject.next(2);

replaySubject.subscribe((value) => {
  console.log(`ReplaySubject Subscriber 1: ${value}`);
});

replaySubject.next(3);

replaySubject.subscribe((value) => {
  console.log(`ReplaySubject Subscriber 2: ${value}`);
});

// Timeout and retry: Managing timeouts and retries
const source$ = interval(1000).pipe(
  timeout(2000),
  retry(errors => errors.pipe(delay(1000)))
);

source$.subscribe(
  value => console.log(`Received: ${value}`),
  err => console.error(`Error: ${err}`)
);

The initial example demonstrates the application of the ReplaySubject to replay previous values. The second example showcases handling timeouts and retries using the timeout and retry operators.

Advanced Applications in Angular Projects: Implementation of Complex Features

Within the realm of Angular projects, these advanced concepts can be translated into robust features, including advanced error handling within Observables and real-time data streaming utilizing WebSockets.

import { of, fromEvent } from 'rxjs';
import { catchError } from 'rxjs/operators';

// Error Handling in Observables
of('data').pipe(
  map(data => { throw new Error('Oops!'); }),
  catchError(error => of('fallback data'))
).subscribe(result => {
  console.log(`Error Handling: ${result}`);
});

// Real-Time Data Streaming with WebSockets
import { Observable, webSocket } from 'rxjs';

const socket$: Observable<any> = webSocket('ws://localhost:8080');

socket$.subscribe(
  (message) => console.log('WebSocket Message:', message),
  (err) => console.error('WebSocket Error:', err),
  () => console.log('WebSocket Closed')
);

// Sending a message
socket$.next({ type: 'chat', text: 'Hello, WebSocket!' });

The initial example showcases the use of catchError for error handling within Observables. The subsequent example illustrates the implementation of a real-time data streaming mechanism through WebSockets and Observables.

Conclusion

In this article, we conducted an exploration of Observables and RxJS, encompassing advanced concepts, intricate operators, and practical applications within Angular projects. Armed with a profound comprehension of these facets, developers are equipped to surmount complex challenges and construct high-quality reactive and asynchronous applications within the Angular ecosystem.

Practical Guide to Writing Reusable Components in Angular

Leonardo — Thu, 10 Aug 2023 15:11:19 +0000

Developing reusable components is one of the cornerstones for building well-structured and easily maintainable Angular applications. In this guide, we will delve deep into best practices for designing and implementing reusable components that promote code reusability, maintainability, and scalability.

Separating Responsibilities

The approach of separating responsibilities is crucial for creating reusable components. By adhering to this practice, you ensure that each component has a specific task and doesn't accumulate unnecessary functionalities. Let's explore some advanced tactics to apply this approach:

1. Clear and Well-Defined Interface

Start by defining a clear interface for your component. This includes comprehensively documenting which input and output properties are available, as well as how to use them. For example:

interface CardData {
  header: string;
  content: string;
}

2. Use of Structural Directives

To keep your component focused, avoid adding complex layout structures directly to the component. Instead, use structural directives like <ng-content> to allow consumers to customize the layout as needed.

<!-- card.component.html -->
<div class="card">
  <ng-content></ng-content>
</div>

3. The Single Responsibility Principle

A component should have a single well-defined responsibility. If the component starts accumulating too many functionalities, consider splitting those functionalities into smaller subcomponents.

Creating Reusable Components

Now, let's move on to the practical creation of reusable components and explore advanced techniques to make them even more versatile:

1. Dependency Injection

When designing components, avoid creating tight dependencies on specific services. Instead, use dependency injection to provide external services to your component. This will make the component more flexible and easy to test.

constructor(private dataService: DataService) {}

2. Flexible Customization

Provide customization options for your component through input properties. Use attributes with sensible default values so that consumers can effortlessly customize the component.

@Input() title = 'Default Title';

3. Event Handling

In addition to input properties, use output properties to emit events. This allows the component to notify the consumer about important actions. However, avoid excessive notifications, focusing only on significant events.

@Output() cardClicked = new EventEmitter<CardData>();

4. Testability

Write unit and integration tests for your component. This ensures that the component works correctly in different scenarios and is crucial for long-term maintenance.

Advanced Usage Example

To demonstrate how to create reusable components that go beyond the basics, let's consider a list component that displays items in a flexible list format. This component can receive a listOptions object containing all the necessary information to configure the list.

FlexibleListComponent

@Component({
  selector: 'app-flexible-list',
  templateUrl: './flexible-list.component.html',
  styleUrls: ['./flexible-list.component.scss']
})
export class FlexibleListComponent {
  @Input() items: any[];
  @Input() listOptions: ListOptions;
}

export interface ListOptions {
  columnsNumber: number;
  itemTemplate?: string;
}

Component Usage

<app-flexible-list [items]="items" [listOptions]="listOptions"></app-flexible-list>

Conclusion

The ability to create reusable components goes beyond simply defining input and output properties. By applying advanced practices of separating responsibilities, dependency injection, flexible customization, and proper event handling, you'll be on the right path to building a solid foundation for your Angular applications.

Remember that clarity and documentation are essential when designing reusable components. Consistent practice and refining your techniques will result in robust components of high value for your teams and future projects.