Code N Share: 2024

Sunday, 29 December 2024

Mastering .NET 7/8: Performance, Minimal APIs, and Modern Development Practices

.NET has been at the forefront of application development for decades. With the release of .NET 7 and the upcoming .NET 8, developers are empowered with tools and features to build modern, high-performance, and scalable applications across multiple platforms. In this blog, we’ll explore the major advancements in .NET 7/8, focusing on performance improvements, Minimal APIs, and modern development practices that are essential for every .NET developer in 2024 and beyond.

1. Introduction to .NET 7/8

The evolution of the Unified .NET platform continues to break barriers, combining web, cloud, mobile, desktop, gaming, and IoT development into one ecosystem. Both .NET 7 and .NET 8 emphasize:

High performance: Optimized runtime and tools for faster applications.
Ease of development: Simplified APIs and architecture patterns.
Cross-platform capabilities: Run your applications on Windows, macOS, Linux, Android, and iOS.

While .NET 7 has already proven its mettle, .NET 8 is poised to take application development further with AI integration, improved cloud-native tools, and developer productivity enhancements.

2. Performance Improvements: The Core of .NET 7/8

Performance has always been a key focus of .NET, and the latest versions deliver remarkable advancements:

A. Native AOT (Ahead-of-Time Compilation)

Produces lightweight and fast executables with a reduced memory footprint.
Especially useful for microservices, IoT devices, and containerized applications.
Example: A small microservice built with AOT compiles down to a fraction of its original size.

B. Optimized Garbage Collection (GC)

Improvements in Gen 0 and Gen 1 GC cycles reduce memory fragmentation.
Better scalability for high-concurrency server applications.

C. JSON Serialization with System.Text.Json

Faster and more memory-efficient than Newtonsoft.Json.

Example: Serialize complex objects with polymorphic type support:

csharp
var options = new JsonSerializerOptions { WriteIndented = true };
var json = JsonSerializer.Serialize(myObject, options);

D. LINQ Query Optimization

LINQ queries now use more efficient algorithms, reducing processing time for large datasets.

E. Regular Expressions (Regex)

Regex patterns are now compiled into bytecode, improving speed and reducing runtime overhead.

3. Minimal APIs: Build Lightweight and Fast APIs

.NET 7/8 takes Minimal APIs to the next level, making them a go-to choice for building lightweight, high-performance web applications and microservices.

A. What Are Minimal APIs?

Minimal APIs allow developers to create web APIs with very little boilerplate code, following a more functional programming style. They are perfect for:

Microservices
Small-scale projects
Proof of concepts (POCs)

B. Example: A Minimal API in Action

Here’s how you can create a simple web API with .NET 7:

csharp
var builder = WebApplication.CreateBuilder(args);
var app = builder.Build();

app.MapGet("/", () => "Hello, World!");
app.MapPost("/data", (MyData data) => $"Received: {data.Name}");

app.Run();

record MyData(string Name);

C. Key Advantages

Simplified Dependency Injection (DI):

csharp
builder.Services.AddSingleton<IMyService, MyService>();
app.MapGet("/service", (IMyService service) => service.GetData());

Built-in Swagger Support: Add API documentation effortlessly.

csharp
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();
app.UseSwagger();
app.UseSwaggerUI();

D. Use Cases for Minimal APIs

Build RESTful APIs for mobile and web apps.
Develop event-driven services.
Rapidly prototype new features for your project.

4. Modern Development Practices with .NET 7/8

A. Clean Architecture

Adopt Clean Architecture or Hexagonal Architecture for better separation of concerns:

Domain Layer: Contains core business logic.
Application Layer: Coordinates use cases.
Infrastructure Layer: Handles persistence and external dependencies.
Presentation Layer: Includes APIs, UI, and other user-facing components.

B. Cloud-Native Development

Containerization with Docker:
- Deploy microservices in Docker containers for scalability.
- Example: Use .NET’s built-in container tools to reduce image size.
Serverless with Azure Functions:
- Create event-driven applications that scale automatically.
gRPC for Communication:
- High-performance RPC framework for interservice communication.

C. Integration with Modern Frontends

Use .NET with React, Angular, or Blazor.

Example: Build SPAs using Blazor WebAssembly:

csharp
<div>
    <h3>Hello, @UserName!</h3>
    <button @onclick="LoadData">Click me</button>
</div>

D. Dependency Injection Everywhere

Inject services efficiently in APIs, controllers, or Blazor components:

csharp
builder.Services.AddScoped<IMyRepository, MyRepository>();

5. Tools and Ecosystem in .NET 7/8

Entity Framework Core 7/8:
- Optimize data access with features like bulk updates and improved LINQ translation.
MAUI (Multi-platform App UI):
- Build cross-platform apps for Android, iOS, Windows, and macOS.
SignalR:
- Enable real-time notifications and live data updates.

6. Practical Use Case: Food Delivery API

Imagine building a food delivery platform backend. Here’s how .NET 7 can help:

Step 1: Define a Minimal API

csharp
app.MapGet("/vendors", (IVendorService service) => service.GetVendors());
app.MapPost("/order", (Order order) => $"Order for {order.ProductName} received!");

Step 2: Use Dependency Injection

csharp
builder.Services.AddSingleton<IVendorService, VendorService>();

Step 3: Add Swagger for API Documentation

csharp
app.UseSwagger();
app.UseSwaggerUI();

7. Getting Started with .NET 7/8

Learning Resources

Official .NET Documentation
Courses on Pluralsight or Udemy:
- Focus on Minimal APIs and modern .NET practices.
Community GitHub repositories for hands-on practice.

8. Final Thoughts

.NET 7/8 is designed to meet the demands of modern application development with a focus on speed, simplicity, and scalability. By mastering Minimal APIs, clean architecture, and the latest tools, you can elevate your career as a .NET developer and stay ahead in the industry.

What are your thoughts on .NET 7/8? Let me know in the comments

Your Ultimate Guide to Angular Routing and State Management

Angular is one of the most popular frameworks for building dynamic, single-page applications (SPAs). Two key features that stand out in Angular development are Routing and State Management. These features are pivotal for building scalable, maintainable, and user-friendly applications. In this guide, we’ll dive deep into Angular’s routing capabilities and state management techniques, providing you with the insights you need to master them.

Part 1: Understanding Angular Routing

Routing in Angular enables navigation between different views or components within a single-page application. It’s built around the Angular Router, which helps manage navigation and the corresponding URL updates.

1. What is Angular Routing?

Angular Routing allows users to move between different parts of your app seamlessly, without a full page reload. By associating specific URLs with components, Angular Router maps a user’s navigation to the relevant view.

2. Setting Up Angular Routing

Follow these steps to set up routing in an Angular app:

Generate a New Angular App (if you don’t already have one):
```
ng new angular-routing-example --routing
```
Adding --routing automatically generates the AppRoutingModule.

Configure Routes in app-routing.module.ts:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

const routes: Routes = [
    { path: '', component: HomeComponent },
    { path: 'about', component: AboutComponent },
    { path: '**', redirectTo: '' } // Wildcard route for invalid URLs
];

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

Use the <router-outlet> Directive: In your app.component.html, include the router outlet where components will render based on the current route.
```
<nav>
    <a routerLink="">Home</a>
    <a routerLink="about">About</a>
</nav>
<router-outlet></router-outlet>
```
Add Router Links in Templates: Use the routerLink directive to enable navigation without reloading the page.

3. Lazy Loading Routes

Lazy loading helps reduce the initial load time of your application by loading feature modules only when needed.

Create a Feature Module:

ng generate module feature-module --route feature --module app.module

Configure Lazy Loading in app-routing.module.ts:

const routes: Routes = [
    { path: 'feature', loadChildren: () => import('./feature-module/feature-module.module').then(m => m.FeatureModule) }
];

4. Route Guards

Use route guards to protect specific routes based on conditions like authentication.

Create a Guard:
```
ng generate guard auth
```

Apply the Guard to Routes:

{ path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] }

Part 2: Angular State Management

State management is crucial for managing shared data across components and maintaining application state consistency. Angular provides multiple ways to handle state, ranging from simple services to powerful libraries like NgRx.

1. Why State Management Matters

Consistency: Ensures all components see the same data.
Predictability: Centralized state is easier to debug.
Scalability: Simplifies managing complex data flows in large applications.

2. Using Angular Services for State Management

Services are a simple way to share data between components.

Create a Service:
```
ng generate service shared-state
```

Store State in the Service:

import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class SharedStateService {
    private state: any = {};

    setState(key: string, value: any): void {
        this.state[key] = value;
    }

    getState(key: string): any {
        return this.state[key];
    }
}

Inject the Service in Components:

import { Component } from '@angular/core';
import { SharedStateService } from './shared-state.service';

@Component({
    selector: 'app-example',
    template: `<p>{{ data }}</p>`
})
export class ExampleComponent {
    data: any;

    constructor(private sharedState: SharedStateService) {
        this.sharedState.setState('example', 'Hello, Angular!');
        this.data = this.sharedState.getState('example');
    }
}

3. Managing Complex State with NgRx

NgRx is a reactive state management library for Angular, based on Redux.

Install NgRx:
```
ng add @ngrx/store
```

Define State and Actions:

export interface AppState {
    counter: number;
}

export const increment = createAction('[Counter Component] Increment');
export const decrement = createAction('[Counter Component] Decrement');

Create a Reducer:

export const initialState = 0;

const _counterReducer = createReducer(initialState,
    on(increment, state => state + 1),
    on(decrement, state => state - 1)
);

export function counterReducer(state: number | undefined, action: Action) {
    return _counterReducer(state, action);
}

Register the Store: Add the reducer to AppModule:

imports: [StoreModule.forRoot({ counter: counterReducer })]

Use Selectors and Dispatchers in Components:

import { Store } from '@ngrx/store';
import { increment, decrement } from './counter.actions';

constructor(private store: Store<{ counter: number }>) {}

increment() {
    this.store.dispatch(increment());
}

decrement() {
    this.store.dispatch(decrement());
}

4. Choosing the Right Approach

Use Services for simple, localized state.
Use NgRx for large, complex applications with multiple data flows.

Conclusion

Angular’s routing and state management capabilities empower developers to create seamless, user-friendly, and scalable applications. While routing ensures smooth navigation, effective state management keeps your app organized and predictable. By mastering these features, you can take your Angular applications to the next level.

Let us know how you’re utilizing Angular’s routing and state management in your projects! Share your tips and tricks in the comments below.

Angular Inputs and Outputs: Sharing Data Between Parent and Child Components

A common pattern in Angular is sharing data between a parent component and one or more child components.

Implement this pattern with the @Input() and @Output() decorators.

Consider the following hierarchy:

<parent-component>

<child-component></child-component>

</parent-component>

@Input() and @Output()

give a child component a way to communicate with its parent component.

@Input() lets a parent component update data in the child component. Conversely, @Output() lets the child send data to a parent component.

From Angular 2 to Angular 17: The Complete Journey of Angular Framework

Angular 2 (September 2016)

Biggest Change: Rewritten from Scratch
- Angular 2 was a complete rewrite of the original AngularJS framework (Angular 1.x), with a focus on performance, modularity, and better tooling.
- The Component-based architecture replaced AngularJS’s controller and scope model.
- TypeScript: Angular 2 adopted TypeScript as the primary language, though it still supports JavaScript. TypeScript’s static typing and tooling support were key benefits.
- New Dependency Injection system was introduced, making it more flexible and easier to use.
- Improved change detection with the introduction of the zone.js library to track asynchronous operations.
- The introduction of RxJS (Reactive Extensions for JavaScript) to handle async operations and event-based programming in a more declarative way.

Angular 4 (March 2017)

Simplification of Angular:
- Breaking changes from Angular 2 were minimal, as Angular 4 focused more on improving the framework than introducing major new concepts.
- The Angular Compiler (ngc) was improved for better AOT (Ahead of Time) compilation and tree shaking, which reduced bundle size.
- Angular CLI (Command Line Interface) improvements with better support for Angular Universal (server-side rendering).
- Animation Package became a separate module (making it smaller).
- TypeScript 2.1/2.2 support added, which brought better type checking and tooling support.

Angular 5 (November 2017)

Build Optimization:
- Angular Compiler (AOT) improvements were continued, resulting in faster builds and smaller bundle sizes.
- HttpClient Module was introduced as a simpler and more powerful alternative to the existing HttpModule.
- Tree-shakable modules were added to the Angular ecosystem, ensuring that unused code is not included in production bundles.
- ng build added build optimization flags, making it easier to optimize the production builds.
- Service Worker support for Progressive Web Apps (PWA).
- Internationalization (i18n) improvements for better localization of Angular applications.

Angular 6 (May 2018)

CLI & Package Updates:
- The Angular CLI was revamped with a focus on ease of use and new features.
- ng add: The CLI introduced the ng add command to simplify adding external libraries and tools (like Angular Material).
- Angular Elements: A new feature to allow Angular components to be used in non-Angular environments, like in Web Components.
- Angular Elements made it easier to encapsulate Angular components into native web components.
- RxJS 6: Updated to RxJS 6 with pipeable operators to encourage cleaner, more declarative code.
- ng update: The CLI added a tool to help you easily update dependencies and Angular itself.

Angular 7 (October 2018)

Performance Enhancements:
- Virtual Scrolling and Drag-and-Drop support in Angular Material.
- Angular CLI became more efficient with build and test performance improvements.
- CLI prompts were added, which ask for user confirmation when making breaking changes or important configuration decisions.
- Improved accessibility support in Angular Material.
- Updates to Angular’s internal API and tooling, including the Compiler and Angular Language Service.

Angular 8 (May 2019)

Differential Loading:
- Differential loading for modern browsers: Angular introduced the ability to serve two different bundles to different browsers: one for modern browsers that support ES2015+ features and one for older browsers (like Internet Explorer).
- Angular Ivy (Opt-in): Angular Ivy, a new rendering engine, was introduced as an experimental feature. Ivy promised to reduce bundle size, improve performance, and simplify the framework’s internals.
- Lazy Loading with Dynamic Imports: Angular 8 allowed better integration with dynamic imports and lazy loading of modules.
- Angular Elements became a stable feature.
- ng upgrade: Angular 8 also improved the upgrade process for migrating from AngularJS to Angular.

Angular 9 (February 2020)

Ivy Rendering Engine (Default):
- The biggest change in Angular 9 was the Ivy Rendering Engine becoming the default. Ivy was designed to make Angular smaller, faster, and more efficient.
- Tree-shakable components: With Ivy, Angular components became tree-shakable by default, which significantly reduced the size of the final bundle.
- Improved debugging: Angular 9 introduced better error messages, better stack traces, and improved debugging tools.
- Faster builds: The new compiler reduced build times, especially for large applications.
- Type checking for templates: Angular now performs type checking on templates, helping to catch errors early in the development process.

Angular 10 (June 2020)

Angular Material and CLI Updates:
- Strict Mode: Angular 10 introduced a stricter mode (--strict flag) to enforce better coding practices and catch potential bugs earlier in the development cycle.
- TypeScript 3.9 support: Angular 10 upgraded to TypeScript 3.9, which brought better performance and new language features.
- Deprecation of IE11 support: IE11 was officially deprecated as a supported browser.
- Warning for CommonJS Imports: Angular 10 introduced warnings for CommonJS dependencies in the build process, pushing developers towards ES module-based dependencies to improve build performance.
- Updated Angular Material: New components like Datepicker with better accessibility and additional features.

Angular 11 (November 2020)

Build and Performance Enhancements:
- Faster Builds: Angular 11 improved build performance with updates to Webpack and CLI.
- Automatic Component Inlining: Angular 11 introduced the ability to inline CSS for components to reduce the final build size and improve performance.
- Strict Templates: Angular 11 made template type checking stricter by default.
- Webpack 5 support: Angular 11 added support for Webpack 5, which includes improvements in build performance and caching.
- Improved error messages and debugging support.

Angular 12 (May 2021)

Ivy Continued:
- Angular 12 improved the Ivy compiler further, with enhanced build performance and error handling.
- Strict mode by default: The CLI now includes stricter TypeScript and template checking as part of the default Angular project setup.
- ESBuild: Introduced ESBuild support for faster builds and minimized output size.
- Support for Webpack 5 was improved.
- CSS Improvements: Angular 12 added support for CSS Variables, improved styled components, and support for inline CSS.

Angular 13 (November 2021)

Ivy and Angular Material Updates:
- View Engine Deprecation: Angular 13 marked the end of support for View Engine, with Ivy being the sole renderer moving forward.
- Improved support for Angular Material components and added new features like the <mat-chip-list> component.
- Angular CLI improvements, such as better build caching and optimizations for the build and test processes.
- TypeScript 4.4 support.

Angular 14 (March 2022)

Standalone Components:
- The biggest feature of Angular 14 was the introduction of Standalone Components, which allowed components to be created without being part of a module. This helps simplify the Angular module system and makes it easier to create components and reuse them in other parts of the application.
- Typed Reactive Forms: Angular 14 brought typed reactive forms, improving type safety and the development experience.
- Error handling improvements: More descriptive and clearer error messages during development.

Angular 15 (November 2022)

Standalone Components and Signals:
- Standalone components continued to evolve with Angular 15, offering more flexibility in creating components that don’t require a module.
- Signals API (early experimental feature for reactivity) to simplify state management and improve reactivity in Angular applications.

Angular 17 (November 2023):

Standalone Components (Enhanced):
Standalone Components are now fully stable, making it easier for developers to build Angular applications without the need for `NgModules`. This reduces boilerplate and improves flexibility, especially in smaller projects or micro-frontends.
Standalone components can now be declared directly in routes, making dynamic routing simpler and improving code reusability across different projects.
Improved Rendering and Change Detection:
Significant performance improvements in Angular's change detection mechanism. Angular 17 introduces further optimizations to the Ivy rendering engine, resulting in faster UI rendering and improved application performance, particularly in complex applications with many dynamic views.
Enhancements to the runtime performance of Angular applications, ensuring quicker initial load times and better handling of large applications.
Signals API (Stable):
The Signals API, first introduced as an experimental feature in Angular 15, has been stabilized in Angular 17. This API simplifies reactive state management, allowing developers to handle state changes in a more declarative and lightweight manner.
Signals provide a more intuitive way to manage application state without relying heavily on external libraries like RxJS, though RxJS is still fully supported for advanced use cases.
TypeScript 5.x Support:
Angular 17 officially supports TypeScript 5.x, bringing enhanced type-checking, better support for modern JavaScript features, and improved tooling for developers.
This update improves type safety across templates and reactive forms, ensuring fewer runtime errors and better development experience through stricter checks.
Performance and Build Optimization:
Faster Builds: Angular 17 continues to focus on improving build times, reducing the time it takes to compile and bundle large applications. Updates to the Angular CLI and Webpack integrations contribute to this improvement.
Tree-shaking and Lazy Loading: Angular 17 brings further optimizations to tree-shaking (removing unused code from bundles) and lazy loading. This makes production bundles smaller and faster to load, improving performance across devices and network conditions.
Enhanced Reactive Forms:
Building upon Angular 14’s typed reactive forms, Angular 17 introduces further improvements in form validation, error handling, and type safety.
Enhanced support for complex form controls with better developer feedback and more robust form APIs, making it easier to build dynamic and validated forms.
Angular CLI Enhancements:
The Angular CLI is further enhanced with new features to help developers manage their projects more efficiently. This includes better build caching and optimization for incremental builds.
New commands and options allow developers to quickly generate and manage standalone components and improve integration with modern web development workflows.
Deprecations and Breaking Changes:
Deprecation of Older APIs: As Angular continues to move forward with Ivy as the default rendering engine, Angular 17 deprecates some older, legacy APIs from the View Engine. Developers are encouraged to use the more modern and efficient Ivy API.
Strict Mode by Default: Angular 17 enforces stricter TypeScript and template checking by default, helping catch potential issues early during the development process.
Web Standards and Progressive Web Apps (PWAs):
Angular 17 further enhances support for Progressive Web Apps (PWA), with better caching mechanisms and offline support. It also improves integration with Web Components, making it easier to build cross-platform applications that work in non-Angular environments.
Angular's Service Worker and App Shell capabilities have been optimized to provide a more seamless offline experience for PWA users.

Conclusion:

The major changes in Angular over time are:

Angular 2: Complete rewrite with a component-based architecture, TypeScript support, and RxJS integration.
Angular 4-5: Performance optimizations, tree shaking, and better support for Angular Universal (server-side rendering).
Angular 6-7: Improvements in the Angular CLI, Angular Elements, RxJS 6, and performance enhancements.
Angular 9: Introduction of the Ivy rendering engine as the default, making builds faster and reducing bundle sizes.
Angular 12-15: Continued focus on performance, better CLI, improved error handling, and features like standalone components and typed reactive forms.

For developers, Ivy (Angular 9) and Standalone Components (Angular 14) were particularly significant changes that fundamentally reshaped how Angular applications are built and structured.