DEV Community: Izzedeen Alfarra

The Success of Node.js Isn’t About Speed — It’s About Architecture

Izzedeen Alfarra — Tue, 09 Dec 2025 08:31:01 +0000

For a long time, I kept hearing terms like Single Thread and Event-Driven whenever someone mentioned Node.js.

They sounded like buzzwords people casually throw around in technical discussions, but I never fully understood why they mattered.

So I went back to the basics:

What is a “thread” in the first place?

Threads: The Lone Employee in the Office

Imagine an office with a single employee.

This employee:

receives requests
sorts the mail
answers customers
handles issues one by one

This is the essence of a thread — the execution path your program follows step by step.

Traditional languages like Java, C#, and Python handle heavy load in a straightforward way:

“More requests? Create more threads.”

If you’re dealing with 500 requests, you might end up spawning dozens or even hundreds of threads.

Each thread has its own memory, context, and overhead.

The result?

higher CPU consumption
increased memory usage
complex thread management
potential issues like deadlocks and race conditions
scaling becomes more painful as complexity rises

Node.js: A Different Path

Node.js decided to challenge this traditional model.

A single thread… but a smart one.

A system designed so one worker can efficiently distribute tasks without getting stuck.

The Event Loop: The Brain Behind Node.js

The idea is simple: wait for an event, then react.

Inside Node.js, everything is driven by events:

receiving a request
completing file I/O
returning a database result
finishing a timer

The main thread doesn’t execute every task itself.

It briefly takes control, delegates work, then returns to an idle state.

Meanwhile, the Event Loop processes each event, triggers its handler, and keeps moving.

This allows Node.js to handle thousands of concurrent requests

— without thousands of threads and without unnecessary complexity.

Event-Driven Architecture: The Bigger Picture

Once you understand the Event Loop, you realize Node.js isn’t just a runtime —

it’s a complete event-driven architecture.

Nothing happens unless an event occurs.

And every event has a clear, direct response.

The result?

lightweight behavior
simplicity
consistent performance
excellent scalability
smart workload distribution without added complexity

Node.js creates a system that flows smoothly, handles massive loads, and delivers performance that’s genuinely hard to compete with.

Dependency Injection Design Pattern In NestJs

Izzedeen Alfarra — Thu, 03 Jul 2025 12:31:28 +0000

Mastering Dependency Injection: From Chaos to Clean Code

Ever wondered how modern frameworks like NestJS make your code so elegant? Let's dive into Dependency Injection - the design pattern that changed everything!

The Problem: Tightly Coupled Nightmare

Imagine building a house where every room creates its own electricity, plumbing, and heating systems:

// ❌ The Old Way - Tightly Coupled
class UserController {
  getUser() {
    const userRepo = new UserRepository();           // Creating dependencies
    const userService = new UserService(userRepo);   // everywhere!
    return userService.findUser();
  }
}

Problems:

🔄 Creating the same objects repeatedly
🔒 Hard to change or test
😵 Each class knows too much about others
💸 Memory waste and performance issues

The Solution: Dependency Injection

DI is like having a smart building manager who provides utilities to each room:

// ✅ The New Way - Loosely Coupled
@Injectable()
class UserController {
  constructor(private userService: UserService) {}  // Just receive what you need!

  getUser() {
    return this.userService.findUser();  // Focus on your job only
  }
}

Magic happens: Someone else handles the creation and management!

Meet the DI Container: Your Smart Factory

Think of the DI Container as a smart warehouse manager who:

📦 Stores all your dependencies
🎯 Knows what each class needs
⚡ Creates instances at the right time
♻️ Manages their lifecycle

// NestJS does this automatically!
@Module({
  controllers: [UserController],
  providers: [UserService, UserRepository]  // Register your dependencies
})

Lifecycle Management: When to Create & Destroy

🔄 Singleton (Database Connections)

@Injectable()  // Lives forever - one instance for entire app
class DatabaseService {
  // Expensive to create, shared everywhere
}

⚡ Transient (Temporary Workers)

@Injectable({ scope: Scope.TRANSIENT })
class EmailService {
  // New instance every time - destroyed after use
}

🎯 Scoped (Request-Specific)

@Injectable({ scope: Scope.REQUEST })
class UserSessionService {
  // One instance per HTTP request - perfect for user context
}

Real NestJS Example: Clean Architecture

// 💾 Repository Layer - Data Access
@Injectable()
class UserRepository {
  async findById(id: string) {
    return this.database.query('SELECT * FROM users WHERE id = ?', [id]);
  }
}

// 🧠 Service Layer - Business Logic  
@Injectable()
class UserService {
  constructor(private userRepo: UserRepository) {}  // ← DI Magic!

  async getUser(id: string) {
    const user = await this.userRepo.findById(id);
    return this.formatUserData(user);
  }
}

// 🎮 Controller Layer - HTTP Handling
@Controller('users')
class UserController {
  constructor(private userService: UserService) {}  // ← DI Magic!

  @Get(':id')
  async getUser(@Param('id') id: string) {
    return this.userService.getUser(id);
  }
}

The Beautiful Flow

HTTP Request → UserController → UserService → UserRepository → Database
     ↑              ↑              ↑              ↑
   NestJS        Focuses on     Focuses on    Focuses on
  handles DI    HTTP logic    business logic  data access

Each layer has ONE responsibility!

Why Constructor Injection?

The constructor is the first function called when creating a class - perfect timing to provide dependencies!

class CoffeeMaker {
  constructor(
    private grinder: CoffeeGrinder,    // ← Received at birth
    private heater: WaterHeater        // ← Ready to use immediately
  ) {}

  makeCoffee() {
    // Everything I need is already here!
    return this.grinder.grind() + this.heater.heat();
  }
}

Separation of Implementation & Abstraction

// 📋 Abstract Contract
interface PaymentProcessor {
  processPayment(amount: number): Promise<boolean>;
}

// 💳 Concrete Implementations
@Injectable()
class StripePaymentProcessor implements PaymentProcessor {
  async processPayment(amount: number) {
    // Stripe-specific logic
  }
}

@Injectable()
class PayPalPaymentProcessor implements PaymentProcessor {
  async processPayment(amount: number) {
    // PayPal-specific logic
  }
}

// 🎯 Service doesn't care which implementation!
@Injectable()
class OrderService {
  constructor(private paymentProcessor: PaymentProcessor) {}

  async processOrder(order: Order) {
    return this.paymentProcessor.processPayment(order.total);
  }
}

Switch payment providers without changing a single line in OrderService!

The Amazing Benefits

🧪 Testing Made Easy

// Mock dependencies for testing
const mockUserRepo = { findById: jest.fn() };
const userService = new UserService(mockUserRepo);

🔄 Easy to Modify

// Switch from MySQL to PostgreSQL? Just change the provider!
@Module({
  providers: [
    // MySQLUserRepository,     ← Remove
    PostgreSQLUserRepository,   ← Add
  ]
})

♻️ Resource Efficiency

Singleton database connections
Transient temporary services
Scoped user sessions

📚 Clean, Readable Code

Each class focuses on ONE thing - its actual job!

The Bottom Line

Dependency Injection transforms your code from a tangled mess into a well-orchestrated symphony.

With frameworks like NestJS, you get all this power with just a simple @Injectable() decorator!

Ready to write cleaner, testable, and maintainable code?

Start using Dependency Injection today! 🚀

What's your experience with DI? Share your thoughts in the comments! 👇

DependencyInjection #NestJS #CleanCode #SoftwareArchitecture #TypeScript #BackendDevelopment #DesignPatterns #WebDevelopment

ReactJS components continues to impress me!

Izzedeen Alfarra — Mon, 26 Jun 2023 16:18:46 +0000

Imagine you want to create a section that contains five cards using HTML, CSS, and vanilla JS! How many lines of code would you need? Maybe it would look like this:

<div class="card">
  <img src="path/to/image1.jpg" alt="Image 1">
  <h2>Card 1</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="card">
  <img src="path/to/image2.jpg" alt="Image 2">
  <h2>Card 2</h2>
  <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="card">
  <img src="path/to/image3.jpg" alt="Image 3">
  <h2>Card 3</h2>
  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="card">
  <img src="path/to/image4.jpg" alt="Image 4">
  <h2>Card 4</h2>
  <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>

OMG! That's a lot of lines!

But in React, you can create a reusable Card component in a separate file (e.g., Card.jsx) and pass props to it like this:

export default function Card(props) {
  const { name, title, src, alt } = props; // destructuring props object
  return (
    <div>
      <h1>{name}</h1>
      <img src={src} alt={alt} />
      <p>{title}</p>
    </div>
  );
}

Then, in your App.js file, you can simply import the Card component and use it like this:

import Card from './Card';

function App() {
  return (
    <div>
      <Card
        name="Card 1"
        title="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
        src="path/to/image1.jpg"
        alt="Image 1"
      />
      <Card
        name="Card 2"
        title="Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
        src="path/to/image2.jpg"
        alt="Image 2"
      />
      <Card
        name="Card 3"
        title="Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
        src="path/to/image3.jpg"
        alt="Image 3"
      />
      <Card
        name="Card 4"
        title="Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."
        src="path/to/image4.jpg"
        alt="Image 4"
      />
    </div>
  );
}

You can use a loop (e.g., map) to generate the cards dynamically based on an array of data if you need to render a large number of cards.

so it's may look like this :

import arr from './Mocks/images_objects'
export default function App() {

    return ( 
       <div className='App'>
        {arr.map((object, index) => (
        <Card
          key = {index}
          name={"john Doe"}
          title={"welcome"}
          src={object.src}
          alt = {object.alt}
        />
      ))}
       </div>


      );
}

How To Learn JavaScript in 2023 !!

Izzedeen Alfarra — Sun, 25 Jun 2023 04:09:22 +0000

Hello,

(In this article, I will tell you how to learn JavaScript)

To learn JavaScript in a structured and effective way, you can follow these steps:

Set your goals: Before starting to learn JavaScript, you should set your goals and what you want to achieve through learning it. Do you want to design a website entirely using JavaScript, or do you just want to learn some basic skills?
Choose the right sources: You can benefit from various JavaScript learning sources such as books, articles, educational videos, online courses, and specialized educational platforms.
Continuity and practical application: You should be enthusiastic and persistent in learning JavaScript and applying what you have learned practically on different projects.
Benefit from the community: You can join different JavaScript communities online and benefit from the experiences of others and communicate with them to improve your skills.

As for the commands that can be used in designing websites using JavaScript, they include many different commands and concepts such as:

Events, which allow you to respond to user actions on website elements.
The Document Object Model (DOM), which allows you to control HTML and CSS elements on the page.
Page Control, which allows you to control the loading and navigation between pages.
Functions, which allow you to create collections of commands that can be used anywhere in your code.

Finally, it can be said that all these commands and concepts can be used effectively in website design. However, you should focus on learning the basic concepts and common commands at first, and then move on to higher and more advanced levels.

As for learning sources, you can learn from:

YouTube: freecodecamp , travesy media , Brocode

Internet: Search for "w3schools.", MDN Mozila

how to carte a simple programming library !!

Izzedeen Alfarra — Sat, 24 Jun 2023 16:42:43 +0000

Hello,
In this article, I will teach you how to create a programming library like ReactJS. Basically, I will show you how companies create programming libraries. Then you can upload it to Node Package Manager (npm) so anyone in the world can use it. Without further ado, let's get started.

First, what is a programming library? A programming library (Library) is a collection of programming code that contains specific functions and data types that developers can use in developing their applications and programs without the need to rewrite them from scratch. In other words, a programming library is a collection of programming code that has been compiled together to facilitate the software development process.

To create a programming library and upload it to npm, you can follow the following steps:

(Note that in this article, I will show you how to create a JavaScript library, but you can apply the same steps to any other programming language.)

Step 1: Create a new project. You can create a new project on your computer using different software development tools, such as Visual Studio Code, WebStorm, Atom, or Notepad++.

Step 2: Create a package.json file. You must create a package.json file in the new project folder and fill in the different fields, such as the project name, description, version, author, and follow the latest version of npm.

Step 3: Add programming code. You can add the programming code for the library in JavaScript files in the project folder.

Step 4: Create an account on the npm website and then:

Login to npm: You must log in to npm using your account.
Publish the library: You can publish the library on npm using the npm publish command.

These are the basic steps for creating a programming library and uploading it to npm. You can customize these steps according to your project needs and the development tools you are using.