Forem: Abanoub Kerols

Ultimate Practical Guide to RxJS in Angular (2026): From Zero to Pro with Full Examples

Abanoub Kerols — Mon, 13 Apr 2026 15:34:25 +0000

RxJS is not just a library — it’s the backbone of every reactive Angular application. Even with Signals in Angular 16+, RxJS remains the king for HTTP, real-time data, complex forms, typeahead search, and WebSockets.
In this article you will learn:

Core concepts explained practically

The 4 flattening operators (switchMap, mergeMap, concatMap, exhaustMap) with clear comparison
Full ready-to-copy examples (service + component + HTML)
Advanced RxJS + WebSockets (real-time chat & live updates)
Common mistakes that kill performance and cause memory leaks
2026 best practices (toSignal, takeUntilDestroyed, rxResource, etc.)

1. Quick Intro: Why RxJS in Angular?

Angular is built on Observables, not Promises:
HttpClient returns Observable
Form.valueChanges returns Observable
Router events, WebSockets, etc.

Benefits:

Automatic cancellation
Powerful operators
Centralized error handling
Seamless integration with Signals (toSignal / toObservable )

2. Core Concepts (Fast & Clear)

Observable – Stream of data (cold/hot)
Observer – Listens with next, error, complete
Operators – pipe() magic (map, filter, tap, etc.)
Subject – Observable + Observer (BehaviorSubject is most used)
Subscription – Must be cleaned (but in 2026 we use takeUntilDestroyed)

3. The 4 Flattening Operators – MUST KNOW (2026 Edition)

These operators decide what happens when a new inner Observable arrives while the previous one is still running.

switchMap
Behavior: Cancels the previous request and starts a new one
Use Case:

Typeahead search
Autocomplete
Scenarios where only the latest value matters
Cancels previous? Yes
Order preserved? No
Performance: Best for this type of scenario

switchMap Example (Most Used – Typeahead)

search$ = this.query$.pipe(
  debounceTime(300),
  switchMap(term => this.userService.searchUsers(term)) // ← cancels old HTTP
);

mergeMap
Behavior: Runs all requests in parallel
Use Case:

Independent API calls
When order doesn’t matter
Cancels previous? No
Order preserved? No
Performance: Good

mergeMap Example (Parallel Requests) TypeScript

getUserAndPosts(userId: number) {
  return this.http.get(`/users/${userId}`).pipe(
    mergeMap(user => 
      this.http.get(`/posts?userId=${userId}`).pipe(
        map(posts => ({ ...user, posts }))
      )
    )
  );
}

concatMap
Behavior: Waits for the previous request to complete before starting the next one
Use Case:
Sequential flows (e.g., login → fetch profile)
Steps that must happen in order
Cancels previous? No
Order preserved? Yes
Performance: Safe but slower
concatMap Example (Sequential)TypeScript

saveAndRefresh() {
  return this.saveForm().pipe(
    concatMap(() => this.refreshData()) // waits for save to finish
  );
}

exhaustMap
Behavior: Ignores new requests while the current one is still running
Use Case:

Form submissions
Preventing double clicks on buttons
Cancels previous? No (it ignores new ones)
Order preserved? Yes
Performance: Excellent for forms

exhaustMap Example (Prevent Double Submit) TypeScript

submitButtonClicked$ = new Subject<void>();

submit$ = this.submitButtonClicked$.pipe(
  exhaustMap(() => this.api.saveData()) // ignores clicks while saving
);

Rule of thumb in 2026:
90% of the time → switchMap
Parallel → mergeMap
Order matters → concatMap
User actions → exhaustMap

4. Example 1: HTTP + switchMap + toSignal (Modern Angular 2026)
user.service.ts

@Injectable({ providedIn: 'root' })
export class UserService {
  searchUsers(term: string): Observable<User[]> {
    if (!term) return of([]);
    return this.http.get<User[]>(`https://jsonplaceholder.typicode.com/users?q=${term}`);
  }
}

search.component.ts (Standalone) TypeScript

@Component({
  selector: 'app-search',
  standalone: true,
  imports: [CommonModule, FormsModule],
  template: `
    <input [(ngModel)]="query" placeholder="Search users...">
    <div *ngIf="loading()">Loading...</div>
    <ul>
      <li *ngFor="let user of users()">{{ user.name }}</li>
    </ul>
  `
})
export class SearchComponent {
  query = signal('');
  loading = signal(false);

  users = toSignal(
    toObservable(this.query).pipe(
      debounceTime(300),
      tap(() => this.loading.set(true)),
      switchMap(term => this.userService.searchUsers(term)),
      tap(() => this.loading.set(false)),
      takeUntilDestroyed()
    ),
    { initialValue: [] }
  );

  constructor(private userService: UserService) {}
}

5. Example 2: Reactive Forms + combineLatest + toSignal TypeScript

fullName = toSignal(
  combineLatest([
    this.form.get('firstName')!.valueChanges,
    this.form.get('lastName')!.valueChanges
  ]).pipe(map(([f, l]) => `${f} ${l}`)),
  { initialValue: '' }
);

6. Advanced Example: RxJS + WebSockets (Real-time Chat 2026)
websocket.service.ts (Modern & Clean)

import { WebSocketSubject } from 'rxjs/webSocket';
import { Injectable } from '@angular/core';
import { shareReplay, filter, takeUntilDestroyed } from 'rxjs/operators';

@Injectable({ providedIn: 'root' })
export class WebSocketService {
  private socket$ = new WebSocketSubject<Message>('wss://your-chat-api.com');

  public messages$ = this.socket$.pipe(
    filter(msg => msg.type === 'chat'),
    shareReplay(1)           // cache latest message
  );

  sendMessage(text: string) {
    this.socket$.next({ type: 'chat', text });
  }

  close() {
    this.socket$.complete();
  }
}

chat.component.ts (Real-time with Signals) TypeScript

@Component({
  standalone: true,
  template: `
    <div *ngFor="let msg of messages()">{{ msg.text }}</div>
    <input #input>
    <button (click)="send(input.value); input.value=''">Send</button>
  `
})
export class ChatComponent {
  messages = toSignal(this.ws.messages$, { initialValue: [] });

  constructor(private ws: WebSocketService) {
    // Auto cleanup
    this.ws.messages$.pipe(takeUntilDestroyed()).subscribe();
  }

  send(text: string) {
    if (text) this.ws.sendMessage(text);
  }
}

Pro tip: Use shareReplay(1) + toSignal for instant UI updates without flicker.

7. Common RxJS Mistakes (and How to Fix Them in 2026)

Forgetting to unsubscribe → Memory leaks

Fix: Always use takeUntilDestroyed() (Angular 16+)

Using mergeMap instead of switchMap for search → 50 requests fired

Fix: switchMap = cancel previous

Nested subscribe() (subscribe hell)

Fix: Use switchMap, concatMap, combineLatest

Not handling errors → App crashes Fix:

catchError(err => {
  this.toastr.error('Something went wrong');
  return of(null);
})

Using async pipe + manual subscribe in same component

Fix: Choose one (prefer toSignal in 2026)

Cold Observable called multiple times

Fix: Use shareReplay(1) or share() in services

Ignoring exhaustMap on buttons → Double payments

Fix: exhaustMap on submit actions

8. 2026 Best Practices (Apply These Today)

Use takeUntilDestroyed() everywhere
Convert to toSignal() for templates (faster than async pipe)
Use toObservable() when you need RxJS pipeline from a signal
Centralize error handling with catchError + global interceptor
shareReplay(1) for cached services
New rxResource (Angular 19+) for data fetching with signals
Never subscribe in services — return Observable always

Final Words
RxJS + Signals in Angular 2026 is the most powerful combination ever.
Master switchMap (90% of cases), use WebSocketSubject for real-time, and never forget takeUntilDestroyed.

Socket.IO: The Complete Guide to Building Real-Time Web Applications (2026 Edition)

Abanoub Kerols — Wed, 04 Mar 2026 19:31:44 +0000

Socket.IO is one of the most popular and reliable JavaScript libraries for adding real-time, bidirectional communication to web applications. Whether you're building live chat, multiplayer games, collaborative tools, notifications, live dashboards, or stock tickers, Socket.IO makes it simple and production-ready.
As of February 2026, the latest stable version is 4.8.3 (released December 2025). It remains actively maintained, with excellent TypeScript support and battle-tested features used by countless production apps.

What is Socket.IO?

Socket.IO enables low-latency, event-based communication between clients (browsers, mobile apps, or even servers) and a Node.js backend. It consists of:

Server-side library (socket.io for Node.js)
Client-side library (works in browsers via CDN or npm, and even in Node.js)

Unlike plain WebSockets, Socket.IO is not just a thin wrapper. It adds powerful, ready-to-use features that solve real-world problems automatically.

Why Socket.IO Beats Plain WebSockets

Plain WebSockets are fast but require you to handle many edge cases yourself. Socket.IO provides these out of the box:

Automatic transport selection: WebSocket (primary), WebTransport (modern, since v4.7+), fallback to HTTP long-polling
Automatic reconnection with exponential back-off and heartbeat checks
Packet buffering: Events sent while offline are replayed after reconnect
Connection state recovery (since v4.6+): Recover missed events after brief disconnects
Clean event system (emit / on) with acknowledgements (callbacks)
Rooms for group messaging and namespaces for logical separation
Broadcasting to everyone or subsets of clients
Built-in scaling via adapters (Redis, PostgreSQL, etc.)

Core Features with Clear Examples

1. Basic Connection & Events
Server (Node.js):

const { createServer } = require("http");
const { Server } = require("socket.io");

const httpServer = createServer();
const io = new Server(httpServer, { cors: { origin: "*" } });

io.on("connection", (socket) => {
  console.log(`User connected: ${socket.id}`);

  socket.on("chat message", (msg) => {
    io.emit("chat message", msg);  // broadcast to all
  });

  socket.on("disconnect", () => {
    console.log(`User disconnected: ${socket.id}`);
  });
});

httpServer.listen(3000, () => {
  console.log("Server running on http://localhost:3000");
});

Client (browser):

<script src="/socket.io/socket.io.js"></script>
<script>
  const socket = io();

  socket.emit("chat message", "Hello world!");

  socket.on("chat message", (msg) => {
    console.log("Received:", msg);
    // Append to chat UI
  });
</script>

2. Acknowledgements (Request-Response Style)

Client:

socket.emit("question", "Is pizza good?", (reply) => {
  console.log("Server replied:", reply);  // "Yes, extra cheese!"
});

Server:

socket.on("question", (text, callback) => {
  callback("Yes, extra cheese!");
});

3. Rooms: Group & Private Messaging

Join/leave rooms dynamically.

Server:

socket.on("join room", (room) => {
  socket.join(room);
  socket.to(room).emit("user joined", `${socket.id} joined ${room}`);
});

socket.on("chat message", ({ room, msg }) => {
  io.to(room).emit("chat message", msg);  // only to room members
});

Client:

socket.emit("join room", "room-42");
socket.emit("chat message", { room: "room-42", msg: "Hi team!" });

For 1-on-1 private chat, use user IDs as personal rooms:

socket.join(socket.user?.id || socket.id);  // on connect
// Then: io.to(targetUserId).emit(...)

4. Namespaces: Separate Logic Channels

// Server
const adminNs = io.of("/admin");

adminNs.on("connection", (socket) => {
  // Admin-only events here
});

// Client
const adminSocket = io("/admin");

5. Authentication (JWT Example)

Server (middleware):

io.use((socket, next) => {
  const token = socket.handshake.auth.token;
  if (!token) return next(new Error("No token"));

  // Verify JWT (using jsonwebtoken)
  jwt.verify(token, "secret", (err, decoded) => {
    if (err) return next(new Error("Invalid token"));
    socket.user = decoded;
    next();
  });
});

Client:

const socket = io({ auth: { token: "your-jwt-here" } });

6. Typing Indicators & Presence

Server (simple online tracking):

const online = new Set();

io.on("connection", (socket) => {
  online.add(socket.id);
  io.emit("online", Array.from(online));

  socket.on("typing", () => socket.broadcast.emit("typing", socket.id));
  socket.on("disconnect", () => {
    online.delete(socket.id);
    io.emit("online", Array.from(online));
  });
});

Scaling for Production
For multiple servers (load-balanced):

Use an adapter like Redis:

const { createAdapter } = require("@socket.io/redis-adapter");
const { createClient } = require("redis");

const pub = createClient({ url: "redis://localhost:6379" });
const sub = pub.duplicate();

await Promise.all([pub.connect(), sub.connect()]);
io.adapter(createAdapter(pub, sub));

Now rooms and broadcasts work across all instances.

When to Use Socket.IO?

Perfect for:

Live chat & notifications
Multiplayer games
Collaborative editing
Real-time dashboards / stock prices
Presence systems ("who's online")

Alternatives if needed:

Ultra-high performance: plain ws or WebSockets.js
Managed service: Supabase Realtime, Firebase, Ably, Pusher

Why Socket.IO Remains a Top Choice in 2026

Super intuitive API
Handles fallbacks, reconnects, buffering automatically
Scales well with adapters
Great cross-browser/device support
Huge community & ecosystem

Socket.IO strikes the perfect balance: easy for beginners, powerful for production. Start with a simple chat, then add rooms, auth, and scaling as your app grows.

Understanding TCP/IP — The Backbone of the Internet (with Node.js Examples)

Abanoub Kerols — Sun, 07 Dec 2025 20:32:27 +0000

The internet might feel magical, but beneath every API request, browser load, or WebSocket message, there’s a structured communication model working silently: TCP/IP.
If you understand TCP/IP, you understand how the internet really works.

In this article, we’ll break it down clearly — layer by layer — and explore how Node.js interacts with TCP at a low level.

What Is TCP/IP?
TCP/IP (Transmission Control Protocol / Internet Protocol) is a suite of protocols that define how data moves across networks.

It’s made of 4 logical layers:

Network Access Layer
Internet Layer (IP)
Transport Layer (TCP/UDP)
Application Layer (HTTP, DNS, FTP…)

Instead of thinking of them as strict boxes, think of them as stages data passes through from one machine to another.

1. Internet Layer — IP Addressing & Routing

The Internet Protocol (IP) is responsible for addressing and routing packets from the sender to the receiver.

What IP Does:

Assigns every device a unique address
Splits data into packets
Routes packets across the network

But IP is unreliable. It does not guarantee:

Order
Delivery
Retransmission

It's like a postal worker who tries their best… but doesn’t promise anything.

Example IPs:

192.168.1.10 → Local machine
8.8.8.8 → Google DNS

2. Transport Layer — TCP & UDP

This layer defines how communication happens.

TCP (Transmission Control Protocol)
TCP ensures:

Reliable delivery
Correct order
No missing data
No duplicates

Features you should know:

Flow Control

TCP adjusts sending speed so the receiver doesn't get overwhelmed.

Congestion Control

TCP slows down when the network is congested.

Reliability Mechanisms

Sequence numbers
ACKs (acknowledgment packets)
Retransmission
3-Way Handshake

TCP guarantees stable, ordered communication — essential for APIs, web browsing, email, databases, etc.

UDP (User Datagram Protocol)

Faster, connectionless, and unreliable — used for:

Streaming
Online gaming
VoIP

3. Application Layer — Where Developers Live

At this level you find:

HTTP
HTTPS
WebSockets
gRPC
FTP
SMTP

Every time your browser sends a GET request, it’s happening on top of TCP

How Ports Fit into This
If IP is the building address, ports are apartment numbers.

Examples:

80 → HTTP
443 → HTTPS
22 → SSH
3000 → Custom Node.js backend

Ports allow multiple services to live on the same machine without interfering.

Node.js Examples — Working Directly with TCP

Node.js gives developers native access to TCP sockets via the net module.

Let’s see how it works.

Example 1 — Create a TCP Server

const net = require("net");

const server = net.createServer((socket) => {
  console.log("Client connected:", socket.remoteAddress, socket.remotePort);

  socket.on("data", (data) => {
    console.log("Received:", data.toString());
    socket.write("ACK: " + data.toString());
  });

  socket.on("end", () => {
    console.log("Client disconnected");
  });
});

server.listen(5000, "0.0.0.0", () => {
  console.log("TCP Server running on port 5000");
});

What this shows:

Each client has IP + Port
TCP ensures messages arrive in order
Server replies using ACK-like behavior

Example 2 — Create a TCP Client

const net = require("net");

const client = net.createConnection(5000, "127.0.0.1", () => {
  console.log("Connected to server");
  client.write("Hello from client!");
});

client.on("data", (data) => {
  console.log("Server says:", data.toString());
});

client.on("end", () => {
  console.log("Disconnected from server");
});

When you run both scripts, you’ll see TCP in action:

Connection established
Data sent
Data acknowledged
Connection closed

This is the same mechanism behind:

HTTP
WebSockets
Database drivers
Reverse proxies (Nginx, HAProxy)
Load balancers
Microservices traffic

The TCP 3-Way Handshake (Simplified)

Client → SYN → Server  
Server → SYN-ACK → Client  
Client → ACK → Server  
Connection established

This handshake ensures:

Both sides are online
Both sides agree on communication parameters
Sequence numbers are synchronized

Why TCP/IP Matters for Developers

Understanding TCP/IP helps you:

Optimize APIs
Diagnose latency
Understand why packets drop
Build scalable distributed systems
Debug real-world networking issues
Write high-performance backend services

Even if you work with frameworks, TCP/IP is happening under the hood every time your code “talks” to anything.

Final Thoughts

TCP/IP isn’t just a networking topic — it’s the foundation of modern computing.
Everything from microservices, databases, browsers, and cloud systems relies on it.

When you understand TCP/IP, you understand how the internet itself actually works.

Mastering Nest.js: From Core Concepts to a Real-World Project

Abanoub Kerols — Mon, 10 Nov 2025 19:24:24 +0000

What is Nest.js?

Nest.js is a progressive Node.js framework for building efficient, scalable, and maintainable back-end applications.
It’s built with TypeScript and heavily inspired by Angular’s modular architecture, which makes it a great choice for developers who value structure, testability, and clean code

Core Concepts and Features

1. Modules

A Nest.js application is made up of modules — the building blocks that organize code into reusable units.
Each module can contain controllers, services, and other providers

import { Module } from '@nestjs/common';
import { UsersController } from './users.controller';
import { UsersService } from './users.service';

@Module({
  controllers: [UsersController],
  providers: [UsersService],
})
export class UsersModule {}

2. Dependency Injection (DI)
Dependency Injection is one of Nest’s most powerful features.
It allows classes (like controllers or services) to automatically receive their dependencies without manually creating them

import { Injectable } from '@nestjs/common';

@Injectable()
export class UsersService {
  findAll() {
    return ['user1', 'user2', 'user3'];
  }
}

import { Controller, Get } from '@nestjs/common';
import { UsersService } from './users.service';

@Controller('users')
export class UsersController {
  constructor(private usersService: UsersService) {}

  @Get()
  getUsers() {
    return this.usersService.findAll();
  }
}

Here, UsersController automatically receives an instance of UsersService through DI.

3. Guards
Guards are used to control access to routes based on certain conditions, like authentication or user roles.
They decide whether a request will be processed or rejected.

import { Injectable, CanActivate, ExecutionContext } from '@nestjs/common';

@Injectable()
export class AuthGuard implements CanActivate {
  canActivate(context: ExecutionContext): boolean {
    const request = context.switchToHttp().getRequest();
    return request.headers.authorization === 'Bearer mytoken';
  }
}

To apply it:

import { Controller, Get, UseGuards } from '@nestjs/common';
import { AuthGuard } from './auth.guard';

@Controller('profile')
export class ProfileController {
  @Get()
  @UseGuards(AuthGuard)
  getProfile() {
    return { name: 'John Doe', role: 'admin' };
  }
}

4. Interceptors
Interceptors can transform requests or responses, handle logging, or measure performance before or after a route handler is executed.

import {
  Injectable,
  NestInterceptor,
  ExecutionContext,
  CallHandler,
} from '@nestjs/common';
import { Observable } from 'rxjs';
import { tap } from 'rxjs/operators';

@Injectable()
export class LoggingInterceptor implements NestInterceptor {
  intercept(context: ExecutionContext, next: CallHandler): Observable<any> {
    console.log('Before...');
    const now = Date.now();
    return next.handle().pipe(tap(() => console.log(`After... ${Date.now() - now}ms`)));
  }
}

Apply it globally or to a single route:

import { Controller, Get, UseInterceptors } from '@nestjs/common';
import { LoggingInterceptor } from './logging.interceptor';

@Controller('tasks')
@UseInterceptors(LoggingInterceptor)
export class TasksController {
  @Get()
  getTasks() {
    return ['Task 1', 'Task 2'];
  }
}

5. Services
Services handle business logic and data manipulation.
They keep controllers clean and focused on handling HTTP requests

@Injectable()
export class TasksService {
  private tasks = ['Learn Nest.js', 'Build an API'];

  getAllTasks() {
    return this.tasks;
  }

  addTask(task: string) {
    this.tasks.push(task);
    return this.tasks;
  }
}

Why Developers Choose Nest.js

TypeScript by default – better tooling and safety
Modular and testable architecture
Built-in DI, Guards, Interceptors, and Pipes
Great integration with TypeORM, GraphQL, and WebSockets
Perfect for enterprise-grade and scalable apps

Project Example: Simple To-Do API with Nest.js

Let’s build a simple To-Do API that allows users to view, add, and delete tasks.
We’ll use:

Service - to handle business logic
Controller - to handle HTTP routes
Guard - to protect routes with a fake token
Interceptor - to log requests and responses
Module - to organize everything

Project Structure

src/
 ├── app.module.ts
 ├── todos/
 │    ├── todos.module.ts
 │    ├── todos.controller.ts
 │    ├── todos.service.ts
 │    ├── auth.guard.ts
 │    └── logging.interceptor.ts
 └── main.ts

1. todos.service.ts
Handles all the business logic and data.

import { Injectable } from '@nestjs/common';

@Injectable()
export class TodosService {
  private todos = [{ id: 1, title: 'Learn Nest.js' }];

  findAll() {
    return this.todos;
  }

  add(title: string) {
    const newTodo = { id: Date.now(), title };
    this.todos.push(newTodo);
    return newTodo;
  }

  delete(id: number) {
    this.todos = this.todos.filter(todo => todo.id !== id);
    return { message: 'Deleted successfully' };
  }
}

2. todos.controller.ts
Defines the REST API endpoints.

import { Controller, Get, Post, Body, Delete, Param, UseGuards, UseInterceptors } from '@nestjs/common';
import { TodosService } from './todos.service';
import { AuthGuard } from './auth.guard';
import { LoggingInterceptor } from './logging.interceptor';

@Controller('todos')
@UseGuards(AuthGuard)
@UseInterceptors(LoggingInterceptor)
export class TodosController {
  constructor(private todosService: TodosService) {}

  @Get()
  getTodos() {
    return this.todosService.findAll();
  }

  @Post()
  addTodo(@Body('title') title: string) {
    return this.todosService.add(title);
  }

  @Delete(':id')
  removeTodo(@Param('id') id: number) {
    return this.todosService.delete(id);
  }
}

3. auth.guard.ts
Blocks access unless the request has a valid token.

import { Injectable, CanActivate, ExecutionContext, UnauthorizedException } from '@nestjs/common';

@Injectable()
export class AuthGuard implements CanActivate {
  canActivate(context: ExecutionContext): boolean {
    const req = context.switchToHttp().getRequest();
    const auth = req.headers.authorization;
    if (auth === 'Bearer mytoken') return true;
    throw new UnauthorizedException('Invalid or missing token');
  }
}

4. logging.interceptor.ts
Logs how long each request takes.

import { Injectable, NestInterceptor, ExecutionContext, CallHandler } from '@nestjs/common';
import { Observable } from 'rxjs';
import { tap } from 'rxjs/operators';

@Injectable()
export class LoggingInterceptor implements NestInterceptor {
  intercept(context: ExecutionContext, next: CallHandler): Observable<any> {
    const now = Date.now();
    console.log('Incoming request...');
    return next.handle().pipe(
      tap(() => console.log(`Response sent after ${Date.now() - now}ms`)),
    );
  }
}

5. todos.module.ts
Brings everything together for this feature.

import { Module } from '@nestjs/common';
import { TodosController } from './todos.controller';
import { TodosService } from './todos.service';
import { AuthGuard } from './auth.guard';
import { LoggingInterceptor } from './logging.interceptor';

@Module({
  controllers: [TodosController],
  providers: [TodosService, AuthGuard, LoggingInterceptor],
})
export class TodosModule {}

6. app.module.ts
The main application module.

import { Module } from '@nestjs/common';
import { TodosModule } from './todos/todos.module';

@Module({
  imports: [TodosModule],
})
export class AppModule {}

7. main.ts
Bootstrap the Nest.js application.

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  await app.listen(3000);
  console.log('Server running on http://localhost:3000');
}
bootstrap();

Testing the API

Use Postman or curl:

Get all todos

GET http://localhost:3000/todos
Authorization: Bearer mytoken

Add a todo

POST http://localhost:3000/todos
Authorization: Bearer mytoken
Body: { "title": "Build awesome projects" }

Delete a todo

DELETE http://localhost:3000/todos/1
Authorization: Bearer mytoken

Conclusion

This simple To-Do API demonstrates how Nest.js lets you write clean, modular, and testable code using modern features

Services handle business logic
Guards secure endpoints
Interceptors handle cross-cutting concerns
Dependency Injection makes everything easily testable

Nest.js turns back-end development into a structured, elegant, and maintainable experience.

Advanced SOLID Principles in a Blogging Platform with JavaScript

Abanoub Kerols — Sun, 12 Oct 2025 14:06:58 +0000

The SOLID principles—Single Responsibility, Open/Closed, Liskov Substitution, Interface Segregation, and Dependency Inversion—are essential for crafting maintainable and scalable object-oriented code. This article dives deeper into applying these principles in a blogging platform, using modern JavaScript features like async/await and ES modules. We’ll explore complex, real-world scenarios, such as managing blog posts, user authentication, and comment moderation, with asynchronous operations.

1. Single Responsibility Principle (SRP)
Definition: A class should have only one reason to change, focusing on a single responsibility.

Real-World Scenario: Blog Post Management

In a blogging platform, a BlogPost class might handle multiple tasks: creating posts, publishing them, and sending notifications.

Bad Example
A class with multiple responsibilities:

//blog-post.js
export class BlogPost {
  constructor(title, content, author) {
    this.title = title;
    this.content = content;
    this.author = author;
  }

  async saveToDatabase() {
    console.log(`Saving post "${this.title}" to database`);
    // Simulate async DB operation
    await new Promise(resolve => setTimeout(resolve, 1000));
  }

  async publish() {
    console.log(`Publishing post "${this.title}"`);
    // Simulate async publishing
    await new Promise(resolve => setTimeout(resolve, 500));
  }

  async notifySubscribers() {
    console.log(`Notifying subscribers about "${this.title}"`);
    // Simulate async notification
    await new Promise(resolve => setTimeout(resolve, 300));
  }
}

(async () => {
  const post = new BlogPost("SOLID Principles", "Content...", "Alice");
  await post.saveToDatabase();
  await post.publish();
  await post.notifySubscribers();
})();

The BlogPost class handles saving, publishing, and notifications, violating SRP.

Good Example
Separate responsibilities into distinct classes:

// blog-post.js
export class BlogPost {
  constructor(title, content, author) {
    this.title = title;
    this.content = content;
    this.author = author;
  }

  getDetails() {
    return { title: this.title, content: this.content, author: this.author };
  }
}

// post-repository.js
export class PostRepository {
  async save(post) {
    console.log(`Saving post "${post.getDetails().title}" to database`);
    await new Promise(resolve => setTimeout(resolve, 1000));
  }
}

// post-publisher.js
export class PostPublisher {
  async publish(post) {
    console.log(`Publishing post "${post.getDetails().title}"`);
    await new Promise(resolve => setTimeout(resolve, 500));
  }
}

// notification-service.js
export class NotificationService {
  async notify(post) {
    console.log(`Notifying subscribers about "${post.getDetails().title}"`);
    await new Promise(resolve => setTimeout(resolve, 300));
  }
}

// main.js
import { BlogPost } from './blog-post.js';
import { PostRepository } from './post-repository.js';
import { PostPublisher } from './post-publisher.js';
import { NotificationService } from './notification-service.js';

(async () => {
  const post = new BlogPost("SOLID Principles", "Content...", "Alice");
  const repository = new PostRepository();
  const publisher = new PostPublisher();
  const notifier = new NotificationService();

  await repository.save(post);
  await publisher.publish(post);
  await notifier.notify(post);
})();

Each class has a single responsibility, improving maintainability and testability.

2. Open/Closed Principle (OCP)
Definition: Classes should be open for extension but closed for modification.

Real-World Scenario: Comment Moderation

A blogging platform needs to moderate comments based on different policies (e.g., spam filtering, profanity checks).

Bad Example
Modifying the class for new moderation policies:

export class CommentModerator {
  moderate(comment, policy) {
    if (policy === "spam") {
      console.log(`Checking "${comment}" for spam`);
      return !comment.includes("http");
    } else if (policy === "profanity") {
      console.log(`Checking "${comment}" for profanity`);
      return !comment.includes("badword");
    }
    return true;
  }
}

const moderator = new CommentModerator();
console.log(moderator.moderate("Check this link: http://example.com", "spam")); // false
console.log(moderator.moderate("This is a badword comment", "profanity")); // false

Adding a new policy (e.g., length check) requires modifying CommentModerator.

Good Example
Use a strategy pattern for extensibility:

export class CommentModerator {
  moderate(comment, policy) {
    return policy.apply(comment);
  }
}

export class SpamPolicy {
  apply(comment) {
    console.log(`Checking "${comment}" for spam`);
    return !comment.includes("http");
  }
}

export class ProfanityPolicy {
  apply(comment) {
    console.log(`Checking "${comment}" for profanity`);
    return !comment.includes("badword");
  }
}

const moderator = new CommentModerator();
const spamPolicy = new SpamPolicy();
const profanityPolicy = new ProfanityPolicy();

console.log(moderator.moderate("Check this link: http://example.com", spamPolicy)); // false
console.log(moderator.moderate("This is a badword comment", profanityPolicy)); // false

New policies can be added by creating new classes, adhering to OCP.

3. Liskov Substitution Principle (LSP)
Definition: Subclasses should be substitutable for their base classes without breaking functionality.

Real-World Scenario: Content Types

A blogging platform supports different content types (e.g., articles, videos) that need rendering.

Bad Example
A subclass that breaks substitution:

export class Content {
  render() {
    console.log("Rendering content in HTML");
  }
}

export class VideoContent extends Content {
  render() {
    throw new Error("Video content requires a player, not HTML!");
  }
}

function displayContent(content) {
  content.render();
}

const article = new Content();
const video = new VideoContent();

displayContent(article); // Works
displayContent(video); // Throws error

VideoContent cannot substitute Content due to the error.

Good Example
Use a more general abstraction:

export class Content {
  display() {
    console.log("Displaying content...");
  }
}

export class ArticleContent extends Content {
  display() {
    console.log("Rendering article in HTML");
  }
}

export class VideoContent extends Content {
  display() {
    console.log("Playing video in media player");
  }
}

function displayContent(content) {
  content.display();
}

const article = new ArticleContent();
const video = new VideoContent();

displayContent(article); // Rendering article in HTML
displayContent(video); // Playing video in media player

Both subclasses can substitute Content seamlessly.

4. Interface Segregation Principle (ISP)
Definition: Clients should not be forced to implement interfaces they don’t need.

Real-World Scenario: User Authentication

Users may authenticate via different methods (e.g., email/password, OAuth), but not all methods require multi-factor authentication (MFA).

Bad Example
A single interface forces unnecessary implementation:

export class AuthMethod {
  login() {
    throw new Error("Method not implemented");
  }
  enableMFA() {
    throw new Error("Method not implemented");
  }
}

export class EmailAuth extends AuthMethod {
  login() {
    console.log("Logging in with email/password");
  }
  enableMFA() {
    console.log("Enabling MFA for email");
  }
}

export class OAuth extends AuthMethod {
  login() {
    console.log("Logging in with OAuth");
  }
  enableMFA() {
    throw new Error("OAuth doesn't support MFA!");
  }
}

OAuth is forced to implement enableMFA, which it doesn’t need.

Good Example
Split interfaces:

export class Loginable {
  login() {
    throw new Error("Method not implemented");
  }
}

export class MFA {
  enableMFA() {
    throw new Error("Method not implemented");
  }
}

export class EmailAuth extends Loginable {
  login() {
    console.log("Logging in with email/password");
  }

  enableMFA() {
    console.log("Enabling MFA for email");
  }
}

export class OAuth extends Loginable {
  login() {
    console.log("Logging in with OAuth");
  }
}

const emailAuth = new EmailAuth();
const oauth = new OAuth();

emailAuth.login(); // Logging in with email/password
emailAuth.enableMFA(); // Enabling MFA for email
oauth.login(); // Logging in with OAuth

OAuth only implements Loginable, adhering to ISP.

5. Dependency Inversion Principle (DIP)
Definition: High-level modules should depend on abstractions, not concrete implementations.

Real-World Scenario: Analytics Tracking

A blogging platform tracks user interactions (e.g., page views) using different analytics providers.

Bad Example
Direct dependency on a concrete class:

export class GoogleAnalytics {
  async track(event) {
    console.log(`Tracking "${event}" with Google Analytics`);
    await new Promise(resolve => setTimeout(resolve, 200));
  }
}

export class AnalyticsService {
  constructor() {
    this.tracker = new GoogleAnalytics();
  }

  async logEvent(event) {
    await this.tracker.track(event);
  }
}

(async () => {
  const analytics = new AnalyticsService();
  await analytics.logEvent("Page View");
})();

AnalyticsService is tightly coupled to GoogleAnalytics.

Good Example
Depend on an abstraction:

export class AnalyticsProvider {
  async track(event) {
    throw new Error("Method not implemented");
  }
}

export class GoogleAnalytics extends AnalyticsProvider {
  async track(event) {
    console.log(`Tracking "${event}" with Google Analytics`);
    await new Promise(resolve => setTimeout(resolve, 200));
  }
}

export class MixpanelAnalytics extends AnalyticsProvider {
  async track(event) {
    console.log(`Tracking "${event}" with Mixpanel`);
    await new Promise(resolve => setTimeout(resolve, 200));
  }
}

export class AnalyticsService {
  constructor(provider) {
    this.tracker = provider;
  }

  async logEvent(event) {
    await this.tracker.track(event);
  }
}

(async () => {
  const google = new GoogleAnalytics();
  const mixpanel = new MixpanelAnalytics();

  const analytics1 = new AnalyticsService(google);
  const analytics2 = new AnalyticsService(mixpanel);

  await analytics1.logEvent("Page View"); // Tracking with Google Analytics
  await analytics2.logEvent("Page View"); // Tracking with Mixpanel
})();

AnalyticsService depends on the AnalyticsProvider abstraction, enabling flexibility.

Conclusion

Applying SOLID principles in a blogging platform using modern JavaScript features results in modular, maintainable, and scalable code. By adhering to SRP, OCP, LSP, ISP, and DIP, developers can handle complex requirements like asynchronous operations and diverse integrations with ease.Use these principles to build robust applications that adapt to changing requirements.

Advanced Guide to Signals and Closures in Angular

Abanoub Kerols — Fri, 15 Aug 2025 17:34:42 +0000

Introduction

Angular Signals, introduced in Angular 16, have transformed state management in Angular applications by offering a reactive, fine-grained approach to change detection. Paired with JavaScript closures—a mechanism allowing functions to retain access to their lexical scope—signals enable developers to build performant, maintainable, and intuitive applications. This article explores Angular Signals in depth, their synergy with closures, advanced use cases, and best practices for leveraging these features effectively.

Deep Dive into Angular Signals

Signals are a reactive primitive in Angular that hold a value and notify subscribers when that value changes. They are designed to optimize change detection, reduce reliance on Zone.js, and pave the way for zoneless Angular applications. Signals are particularly useful for managing state in a reactive, predictable manner.

Core Signal Concepts

Signal Creation: Use the signal() function to create a writable signal with an initial value.

import { signal } from '@angular/core';
const counter = signal(0); // Writable signal with initial value 0

Reading and Updating Signals:
- Access a signal's value by calling it as a function: counter()
- Update using set() for direct assignment orupdate() for functional updates

counter.set(5); // Set to 5
counter.update(value => value + 1); // Increment to 6

Computed Signals: A computed() signal derives its value from other signals and updates automatically when dependencies change.

const doubled = computed(() => counter() * 2); // Updates when counter changes

Effects: The effect() function runs side effects (e.g., logging, API calls) when dependent signals change.

effect(() => console.log(`Counter is now: ${counter()}`));

eadonly Signals: Use asReadonly() to create a read-only version of a signal to prevent accidental mutations

const readonlyCounter = counter.asReadonly();
console.log(readonlyCounter()); // Can read, but cannot set/update

Signals in Angular Components

Signals integrate seamlessly with Angular’s template-driven architecture. Here’s an example of a counter component with signals:

import { Component, signal, computed } from '@angular/core';

@Component({
  selector: 'app-counter',
  template: `
    <p>Count: {{ count() }}</p>
    <p>Is Even: {{ isEven() }}</p>
    <button (click)="increment()">Increment</button>
    <button (click)="reset()">Reset</button>
  `
})
export class CounterComponent {
  count = signal(0);
  isEven = computed(() => this.count() % 2 === 0);

  increment() {
    this.count.update(value => value + 1);
  }

  reset() {
    this.count.set(0);
  }
}

In this example:

count is a writable signal tracking the counter value.
isEven is a computed signal that reacts to changes in count.
The template updates automatically when count changes, demonstrating fine-grained reactivity.

Advanced Signal Features

Signal Equality Functions

Signals support custom equality functions to optimize updates. By default, signals use strict equality (===) to determine if a new value warrants an update. You can override this behavior:

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

interface User { id: number; name: string }
const user = signal<User>({ id: 1, name: 'John' }, { equal: (a, b) => a.id === b.id });
user.set({ id: 1, name: 'Jane' }); // No update triggered (same id)
user.set({ id: 2, name: 'Jane' }); // Update triggered (different id)

This is useful for complex objects where only specific properties determine equality.

Signal Mutations

For signals holding objects or arrays, the mutate() method allows in-place updates to avoid unnecessary object creation:

const todos = signal<string[]>([]);
todos.mutate(list => list.push('New Task')); // Modifies array in place

Signals with RxJS Interoperability
Angular Signals can interoperate with RxJS, enabling integration with observables. The@angular/core/rxjs-interop package provides utilities like toSignal() and toObservable():

import { Component, signal } from '@angular/core';
import { toSignal } from '@angular/core/rxjs-interop';
import { interval } from 'rxjs';

@Component({
  selector: 'app-timer',
  template: `<p>Seconds: {{ seconds() }}</p>`
})
export class TimerComponent {
  seconds = toSignal(interval(1000), { initialValue: 0 });
}

Here, toSignal() converts an RxJS observable into a signal, allowing reactive updates in the template.

Closures in JavaScript and Angular
A closure is a function that retains access to its lexical scope, even when executed outside that scope. Closures are a cornerstone of JavaScript and play a critical role in Angular applications, especially when working with signals, event handlers, and reactive patterns.

Closure Basics

Consider this example:

function createCounter() {
  let count = 0;
  return function increment() {
    count++;
    return count;
  };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

The incrementfunction is a closure that retains access to count, even after createCounterfinishes executing.

Closures in Angular

Closures are pervasive in Angular, appearing in event handlers, computed signals, and service methods. They allow functions to maintain state without exposing it globally.

Closures with Signals

Computed signals and effects often rely on closures. For example:

import { Component, signal, computed } from '@angular/core';

@Component({
  selector: 'app-profile',
  template: `
    <input [(ngModel)]="name" (ngModelChange)="nameSignal.set($event)" />
    <p>Welcome, {{ formattedName() }}!</p>
  `
})
export class ProfileComponent {
  nameSignal = signal('Guest');
  formattedName = computed(() => {
    // Closure: retains access to nameSignal
    return this.nameSignal().toUpperCase();
  });
}

The formattedNamecomputed signal is a closure that accesses nameSignaland recomputes when the signal changes.

Closures in Event Handlers

Event handlers in Angular components often form closures over component properties:

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

@Component({
  selector: 'app-toggle',
  template: `<button (click)="toggle()">Toggle: {{ isActive }}</button>`
})
export class ToggleComponent {
  isActive = false;

  toggle() {
    // Closure: retains access to isActive
    this.isActive = !this.isActive;
  }
}

The togglemethod closes over isActive, allowing it to modify the component’s state.

Advanced Closure Patterns

Factory Functions

Closures can be used to create factory functions that encapsulate private state:

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

@Injectable({ providedIn: 'root' })
export class CounterService {
  createCounter() {
    let count = 0;
    return {
      increment: () => ++count,
      getCount: () => count
    };
  }
}

@Component({
  selector: 'app-counter',
  template: `<p>Count: {{ count }}</p><button (click)="increment()">Increment</button>`
})
export class CounterComponent {
  counter = this.counterService.createCounter();
  count = 0;

  constructor(private counterService: CounterService) {}

  increment() {
    this.count = this.counter.increment();
  }
}

Here, createCounterreturns an object with methods that close over the private countvariable, ensuring encapsulation.

Memoization with Closures

Closures can be used to memoize expensive computations:

function memoize(fn: (n: number) => number) {
  const cache: { [key: number]: number } = {};
  return (n: number) => {
    if (n in cache) return cache[n];
    return (cache[n] = fn(n));
  };
}

const fibonacci = memoize(n => (n <= 1 ? n : fibonacci(n - 1) + fibonacci(n - 2)));

In an Angular context, this can optimize computed signals:

const expensiveValue = computed(() => {
  const memoized = memoize(n => /* expensive computation */);
  return memoized(this.inputSignal());
});

Performance Considerations

Signals

Fine-Grained Reactivity: Signals update only the parts of the UI affected by state changes, reducing unnecessary DOM operations.
Avoid Overuse of Effects: Effects can lead to performance issues if overused, as they run synchronously on signal changes. Use them sparingly for side effects like logging or API calls.
Computed Signal Optimization: Computed signals cache their values and only recompute when dependencies change, making them efficient for derived state.

Closures

Memory Management: Closures can cause memory leaks if they retain references to large objects. Always clean up resources (e.g., intervals, subscriptions) in ngOnDestroy.
Avoid Excessive Nesting: Deeply nested closures can make code harder to maintain and debug. Keep closure hierarchies shallow where possible.

Example: Cleaning Up Closures

import { Component, OnDestroy } from '@angular/core';
import { interval } from 'rxjs';
import { toSignal } from '@angular/core/rxjs-interop';

@Component({
  selector: 'app-timer',
  template: `<p>Seconds: {{ seconds() }}</p>`
})
export class TimerComponent implements OnDestroy {
  private interval$ = interval(1000);
  seconds = toSignal(this.interval$, { initialValue: 0 });

  ngOnDestroy() {
    // Cleanup not needed for toSignal, but shown for other closure-based resources
    this.interval$.subscribe().unsubscribe();
  }
}

Common Pitfalls and Best Practices

Signals

Avoid Direct Mutations: Always use set(), update(), or mutate() to change signal values to ensure reactivity.
Use Readonly Signals: Expose signals as readonly to services or child components to prevent unintended updates.
Test Signal Dependencies: Ensure computed signals and effects only depend on necessary signals to avoid unnecessary recomputations.

Closures

Watch for Memory Leaks: Be cautious with closures in long-lived components or services, as they can hold onto references indefinitely.
Debugging Closures: Use tools like Chrome DevTools to inspect closure scopes and identify unintended variable captures.
Keep Closures Simple: Avoid complex logic within closures to improve readability and maintainability.

Real-World Example: Todo List with Signals and Closures

Here’s a complete example of a todo list application using signals and closures:

import { Component, signal, computed, effect } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-todo-list',
  standalone: true,
  imports: [FormsModule],
  template: `
    <input [ngModel]="newTodo()" (ngModelChange)="newTodo.set($event)" placeholder="Add todo" />
    <button (click)="addTodo()">Add</button>
    <ul>
      <li *ngFor="let todo of todos(); let i = index">
        <ng-container *ngIf="editingIndex() === i; else viewMode">
          <input [ngModel]="editTodo()" (ngModelChange)="editTodo.set($event)" />
          <button (click)="saveEdit(i)">Save</button>
          <button (click)="cancelEdit()">Cancel</button>
        </ng-container>
        <ng-template #viewMode>
          {{ todo }}
          <button (click)="startEdit(i, todo)">Edit</button>
          <button (click)="removeTodo(i)">Remove</button>
        </ng-template>
      </li>
    </ul>
    <p>Total: {{ totalCount() }}</p>
  `
})
export class TodoListComponent {
  newTodo = signal('');
  editTodo = signal('');
  todos = signal<string[]>([]);
  totalCount = computed(() => this.todos().length);
  editingIndex = signal<number | null>(null);

  constructor() {
    effect(() => console.log(`Todos updated: ${this.todos()}`));
  }

  addTodo() {
    const todo = this.newTodo().trim();
    if (todo) {
      this.todos.set([...this.todos(), todo]);
      this.newTodo.set('');
    }
  }

  removeTodo(index: number) {
    this.todos.set(this.todos().filter((_, i) => i !== index));
  }

  startEdit(index: number, todo: string) {
    this.editingIndex.set(index);
    this.editTodo.set(todo);
  }

  saveEdit(index: number) {
    const updated = this.editTodo().trim();
    if (updated) {
      const updatedList = [...this.todos()];
      updatedList[index] = updated;
      this.todos.set(updatedList);
    }
    this.cancelEdit();
  }

  cancelEdit() {
    this.editingIndex.set(null);
    this.editTodo.set('');
  }
}

In this example:

addTodo(): Adds a trimmed todo to the list if not empty, then clears input.
removeTodo(index): Removes the todo at the given index (immutable update).
startEdit(index, todo): Switches to edit mode for that todo, pre-fills input.
saveEdit(index): Saves the edited text if valid, updates the list, exits edit mode.
cancelEdit(): Exits edit mode and clears the edit input.
constructor: Logs todos whenever they change (debugging).

Conclusion
Angular Signals and JavaScript closures are powerful tools for building reactive, performant, and maintainable applications. Signals provide fine-grained reactivity, reducing the overhead of Angular’s traditional change detection, while closures enable encapsulation and state persistence in a flexible way. By mastering these concepts, developers can create robust Angular applications that are easier to reason about and scale effectively.

For further exploration:

Check the Angular Signals documentation for official guidance.
Experiment with signals in small projects to understand their reactivity model.
Use closures judiciously to encapsulate logic while keeping memory management in mind.

Mastering Node.js: A Comprehensive Guide with Advanced Examples

Abanoub Kerols — Mon, 11 Aug 2025 14:35:29 +0000

Node.js is a powerful, open-source runtime environment that brings JavaScript to server-side development. Built on Chrome’s V8 engine, it enables developers to create fast, scalable applications using an event-driven, non-blocking I/O model. This article dives deep into Node.js, covering its core concepts, advanced features, and practical examples to help you harness its full potential.

What is Node.js?

Node.js allows JavaScript to run outside the browser, making it a versatile choice for server-side applications. Its single-threaded, asynchronous architecture excels at handling I/O-intensive tasks, such as reading files, querying databases, or serving HTTP requests. With a massive ecosystem powered by the Node Package Manager (NPM), Node.js supports rapid development across various use cases.

Core Features

Asynchronous I/O: Operations like file reading or network requests don’t block the main thread, enabling high concurrency.
Event-Driven Architecture: An event loop processes tasks, ensuring efficient handling of multiple requests.
Cross-Platform: Runs seamlessly on Windows, macOS, Linux, and more.
NPM Ecosystem: Over 2 million packages simplify tasks like routing, database integration, and authentication.
Scalability: Ideal for microservices and real-time applications.

How Node.js Works

Node.js uses a single-threaded event loop to manage asynchronous operations. When a request arrives, it’s added to an event queue. The event loop delegates I/O tasks to a worker thread pool, allowing the main thread to process other requests. Once the task completes, a callback or Promise resolves, delivering the result. This non-blocking model ensures Node.js can handle thousands of concurrent connections with minimal resources.

Setting Up Node.js
Download Node.js from nodejs.org and install it. Verify with:

node -v
npm -v

This confirms the versions of Node.js and NPM installed.

Example 1: Basic HTTP Server

A simple HTTP server showcases Node.js’s core capabilities:

const http = require('http');

const server = http.createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'text/plain' });
  res.end('Welcome to Node.js!\n');
});

server.listen(3000, () => {
  console.log('Server running at http://localhost:3000/');
});

How to Run:

Save as server.js.
Run node server.js.
Visit http://localhost:3000 to see the response.

Explanation:

The httpmodule creates a server.
The callback handles requests (req) and sends responses (res).
listen(3000) binds the server to port 3000.

Example 2: Asynchronous File Operations

Node.js shines in asynchronous file handling. Here’s an example using the fsmodule with async/await:

const fs = require('fs').promises;

async function readAndWriteFile() {
  try {
    const data = await fs.readFile('input.txt', 'utf8');
    console.log('File contents:', data);
    await fs.writeFile('output.txt', data.toUpperCase());
    console.log('File written successfully');
  } catch (err) {
    console.error('Error:', err.message);
  }
}

readAndWriteFile();

Steps:

Create input.txtwith some text.
Run the script to readinput.txt and write its uppercase contents to output.txt

Explanation:

fs.promises provides Promise-based APIs.
async/await simplifies asynchronous code.
Errors are caught using try/catch.

Example 3: Building a REST API with Express

Express is a lightweight framework for building APIs. Install it:
npm install express
Here’s a REST API with CRUD operations:

const express = require('express');
const app = express();
const port = 3000;

app.use(express.json());

let todos = [
  { id: 1, task: 'Learn Node.js', completed: false },
  { id: 2, task: 'Build an API', completed: false }
];

// Get all todos
app.get('/todos', (req, res) => {
  res.json(todos);
});

// Get a single todo
app.get('/todos/:id', (req, res) => {
  const todo = todos.find(t => t.id === parseInt(req.params.id));
  if (!todo) return res.status(404).json({ error: 'Todo not found' });
  res.json(todo);
});

// Create a todo
app.post('/todos', (req, res) => {
  const todo = { id: todos.length + 1, task: req.body.task, completed: false };
  todos.push(todo);
  res.status(201).json(todo);
});

// Update a todo
app.put('/todos/:id', (req, res) => {
  const todo = todos.find(t => t.id === parseInt(req.params.id));
  if (!todo) return res.status(404).json({ error: 'Todo not found' });
  todo.task = req.body.task || todo.task;
  todo.completed = req.body.completed ?? todo.completed;
  res.json(todo);
});

// Delete a todo
app.delete('/todos/:id', (req, res) => {
  todos = todos.filter(t => t.id !== parseInt(req.params.id));
  res.status(204).end();
});

app.listen(port, () => {
  console.log(`API running at http://localhost:${port}`);
});

Testing:

Save as api.js and run node api.js.
Use Postman or curl to test:
- GET http://localhost:3000/todos
- POST http://localhost:3000/todos with { "task": "Test Node.js" }
- PUT http://localhost:3000/todos/1 with { "task": "Updated task", "completed": true }
- DELETE http://localhost:3000/todos/1

Explanation:

express.json() parses JSON payloads.
Routes handle CRUD operations for a todosarray.
Error handling ensures invalid requests return appropriate responses.

Example 4: Working with Streams

Streams handle large data efficiently by processing it in chunks. Here’s an example of streaming a large file:

const fs = require('fs');
const http = require('http');

const server = http.createServer((req, res) => {
  const stream = fs.createReadStream('large-file.txt');
  res.writeHead(200, { 'Content-Type': 'text/plain' });
  stream.pipe(res);
});

server.listen(3000, () => {
  console.log('Server running at http://localhost:3000/');
});

Steps:

Create a large large-file.txt(e.g., with repeated text).
Run the script and visit http://localhost:3000.

Explanation:

fs.createReadStreamreads the file in chunks. -pipe(res) streams the data directly to the response, reducing memory usage.

Example 5: Custom Middleware in Express

Middleware functions process requests before they reach route handlers. Here’s an example of logging middleware:

const express = require('express');
const app = express();
const port = 3000;

// Custom middleware to log requests
const logger = (req, res, next) => {
  console.log(`${req.method} ${req.url} - ${new Date().toISOString()}`);
  next();
};

app.use(logger);
app.use(express.json());

app.get('/', (req, res) => {
  res.json({ message: 'Welcome to the API' });
});

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

Explanation:

The loggermiddleware logs the method, URL, and timestamp for each request. -next() passes control to the next middleware or route.
Run the script and make requests to see logs in the console.

Example 6: Error Handling Middleware

Proper error handling is critical for robust APIs. Here’s an example:

const express = require('express');
const app = express();
const port = 3000;

app.use(express.json());

// Route that throws an error
app.get('/error', (req, res, next) => {
  const err = new Error('Something went wrong!');
  err.status = 500;
  next(err);
});

// Error-handling middleware
app.use((err, req, res, next) => {
  res.status(err.status || 500).json({
    error: {
      message: err.message,
      status: err.status || 500
    }
  });
});

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

Explanation:

The /error route simulates an error.
The error-handling middleware catches errors and returns a JSON response.
Test by visiting http://localhost:3000/error.

Example 7: Real-Time Chat with Socket.IO

Node.js is ideal for real-time applications using WebSockets. Install socket.io:
npm install socket.io
Here’s a simple chat server:

const express = require('express');
const http = require('http');
const { Server } = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = new Server(server);
const port = 3000;

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

io.on('connection', (socket) => {
  console.log('User connected');
  socket.on('chat message', (msg) => {
    io.emit('chat message', msg); // Broadcast to all clients
  });
  socket.on('disconnect', () => {
    console.log('User disconnected');
  });
});

server.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

HTML (index.html):

<!DOCTYPE html>
<html>
<head>
  <title>Node.js Chat</title>
</head>
<body>
  <ul id="messages"></ul>
  <form id="form">
    <input id="input" autocomplete="off" /><button>Send</button>
  </form>
  <script src="/socket.io/socket.io.js"></script>
  <script>
    const socket = io();
    const form = document.getElementById('form');
    const input = document.getElementById('input');
    const messages = document.getElementById('messages');

    form.addEventListener('submit', (e) => {
      e.preventDefault();
      if (input.value) {
        socket.emit('chat message', input.value);
        input.value = '';
      }
    });

    socket.on('chat message', (msg) => {
      const item = document.createElement('li');
      item.textContent = msg;
      messages.appendChild(item);
    });
  </script>
</body>
</html>

Steps:

Save the server code aschat.js and the HTML as index.html.
Runnode chat.js.
Open multiple browser tabs at http://localhost:3000 and send messages

Explanation:

socket.io enables real-time communication.
The server broadcasts messages to all connected clients.
The client-side script handles sending and receiving messages.

Advanced Use Cases

Microservices: Node.js’s lightweight nature makes it perfect for building microservices, often used with Docker and Kubernetes.
Serverless Functions: Deploy Node.js functions on platforms like AWS Lambda or Vercel.
Streaming Media: Use streams for video or audio processing.
IoT Applications: Handle real-time data from IoT devices with low latency.

Performance Optimization Tips

Use Clustering: Leverage the cluster module to utilize multiple CPU cores.

const cluster = require('cluster');
const http = require('http');
const numCPUs = require('os').cpus().length;

if (cluster.isMaster) {
  for (let i = 0; i < numCPUs; i++) {
    cluster.fork();
  }
} else {
  http.createServer((req, res) => {
    res.writeHead(200);
    res.end('Hello from worker');
  }).listen(3000);
}

Caching: Use in-memory stores like Redis for frequently accessed data.
Profiling: Use tools like clinic.js to identify bottlenecks.
Compression: Enable gzip compression in Express with compressionmiddleware.

Advantages and Limitations

Advantages:

High performance for I/O-bound tasks.
Unified JavaScript stack for front-end and back-end.
Vibrant community and NPM ecosystem.
Limitations:
Weak for CPU-intensive tasks (e.g., image processing); consider offloading to workers or other languages.
Requires careful management to avoid callback hell; use Promises or async/await.

Security Best Practices

Sanitize Inputs: Use libraries like express-validator to prevent injection attacks.
Use HTTPS: Secure traffic with SSL/TLS.
Limit Requests: Implement rate-limiting with express-rate-limit.
Keep Dependencies Updated: Regularly update packages to patch vulnerabilities (npm audit).

Conclusion
Node.js is a versatile runtime for building everything from simple APIs to complex real-time applications. Its asynchronous model, combined with a rich ecosystem, makes it a favorite among developers. By mastering concepts like streams, middleware, and WebSockets, you can unlock Node.js’s full potential. Explore the Node.js documentation and experiment with libraries like mongoose, puppeteer, or jest to build robust, modern applications.

Angular AOT vs JIT: The Complete Guide with Practical Example (v20)

Abanoub Kerols — Thu, 07 Aug 2025 16:47:23 +0000

In modern Angular (v20+), understanding the difference between AOT (Ahead-of-Time) and JIT (Just-in-Time) compilation can help developers significantly optimize performance, debugging, and build time. In this article, we’ll explain the difference, how they work, when to use each, and howenableProdMode() ties into this process.

🔍 What Is JIT (Just-in-Time)?

JIT is the default compilation mode when running Angular in development using:

ng serve

In this mode:

Angular compiles templates in the browser at runtime.
Ideal for development: you get faster builds and live reload.
Debugging tools and developer warnings (like change detection issues) are enabled.
File size is larger, and performance is slower than AOT.

🚀 What Is AOT (Ahead-of-Time)?

AOT compiles your Angular code at build time using:

ng build --configuration=production

In this mode:

Angular compiles templates into optimized JavaScript before shipping to the browser.
You get faster runtime performance.
Compiler is not shipped to the browser (more secure and smaller bundle).
enableProdMode()is triggered automatically.

🧠 Role of `enableProdMode()`

The method enableProdMode() is part of Angular core. When activated, it disables Angular's development-specific checks and tools (like debug data or console warnings).

In main.ts, it usually looks like this:

import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

Angular CLI calls this automatically in production builds.

⚙️ Example Using Angular v20 (Standalone Component)

Here’s a simple example to show AOT +enableProdMode() in action:

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

bootstrapApplication(AppComponent)
  .catch(err => console.error(err));

app.component.ts

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

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <h1>Hello Angular v20 🚀</h1>
    <p>Counter: {{ counter() }}</p>
    <button (click)="increment()">Increment</button>
  `
})
export class AppComponent {
  counter = signal(0);

  constructor() {
    if (typeof ngDevMode !== 'undefined' && ngDevMode) {
      console.log('🔧 Development Mode');
    } else {
      console.log('✅ Production Mode');
    }
  }

  increment() {
    this.counter.update(v => v + 1);
  }
}

🧪 Where Are AOT and JIT Files Located?

 Feature                 JIT                         AOT
______________       ______________             ______________
Compilation     | In browser (runtime)     During ng build (buildtime)
Output in /dist |  ❌ No permanent files    Compiled JS is in /dist
Compiler Shipped|        ✅Yes                     ❌ No
File size       |         Bigger                  Smaller
Startup Speed   |         Slower                  Faster

Check AOT code in /dist/main.js:
You’ll see code like:

ɵɵelementStart(0, "h1");
ɵɵtext(1, "Hello");
ɵɵelementEnd();

✅ Conclusion: Which Should You Use?

 use Case                Recommendation
______________           ______________             
Development      |      Use JIT (ng serve)     
Production       |      Use AOT (ng build --prod)  
Server-side apps |      Use AOT

Want better performance? ✅ Use AOT + enableProdMode() in production.
Need fast debugging? 🛠️ Use JIT during development.

Forem: Abanoub Kerols

Ultimate Practical Guide to RxJS in Angular (2026): From Zero to Pro with Full Examples

Socket.IO: The Complete Guide to Building Real-Time Web Applications (2026 Edition)

What is Socket.IO?

Why Socket.IO Beats Plain WebSockets

Core Features with Clear Examples

2. Acknowledgements (Request-Response Style)

3. Rooms: Group & Private Messaging

4. Namespaces: Separate Logic Channels

5. Authentication (JWT Example)

6. Typing Indicators & Presence

When to Use Socket.IO?

Understanding TCP/IP — The Backbone of the Internet (with Node.js Examples)

1. Internet Layer — IP Addressing & Routing

2. Transport Layer — TCP & UDP

UDP (User Datagram Protocol)

3. Application Layer — Where Developers Live

Final Thoughts

Mastering Nest.js: From Core Concepts to a Real-World Project

What is Nest.js?

Core Concepts and Features

Project Example: Simple To-Do API with Nest.js

Testing the API

Conclusion

Advanced SOLID Principles in a Blogging Platform with JavaScript

Advanced Guide to Signals and Closures in Angular

Mastering Node.js: A Comprehensive Guide with Advanced Examples

What is Node.js?

Core Features

How Node.js Works

Example 1: Basic HTTP Server

Example 2: Asynchronous File Operations

Example 3: Building a REST API with Express

Example 4: Working with Streams

Example 5: Custom Middleware in Express

Example 6: Error Handling Middleware

Example 7: Real-Time Chat with Socket.IO

Advantages and Limitations

Angular AOT vs JIT: The Complete Guide with Practical Example (v20)

🔍 What Is JIT (Just-in-Time)?

🚀 What Is AOT (Ahead-of-Time)?

🧠 Role of enableProdMode()

⚙️ Example Using Angular v20 (Standalone Component)

🧪 Where Are AOT and JIT Files Located?

✅ Conclusion: Which Should You Use?

🧠 Role of `enableProdMode()`