DEV Community: Alireza Razinejad

SQL or NoSQL? A Real Story From Building Healthcare Software (and How FHIR Fits In)

Alireza Razinejad — Thu, 06 Nov 2025 19:21:07 +0000

A few years ago, I was helping build a healthcare system that needed to handle everything from patient records to real-time vitals coming from wearable devices.

At first, the team had one big question:
“Should we use SQL or NoSQL?”

Like many architecture debates, it started with strong opinions, whiteboard arguments, and at least one developer insisting that “MongoDB can do anything.” (We all have that person…)

But the truth revealed itself when we mapped the actual problem.

The Moment It Became Clear

We had two very different types of data flowing into the platform:

✅ 1. Highly structured clinical data

Patients, encounters, diagnoses, medications, lab results — the usual healthcare stack.
This data had strict rules, relationships, and compliance requirements like:

ACID transactions
Audit trails
Referential integrity
Traceability of edits and versions
FHIR resource consistency
HIPAA compliance

Breaking consistency in medical data isn’t just “a bug.”
It can literally impact patient safety.

This pushed us firmly toward SQL — PostgreSQL, specifically — because it gives:

clean schemas,
rigid constraints,
joins that actually make sense,
and the confidence that a patient won’t “accidentally” lose a medication record during a race condition.

✅ 2. Unpredictable, high-volume data

Meanwhile, the wearable devices were sending waves of semi-structured data:

heart rate every second
steps
sleep cycles
oxygen saturation
battery status
alerts
user-generated notes

The format could change tomorrow because a device manufacturer pushed an update.
And the volume? Imagine thousands of patients wearing devices 24/7.

This was a perfect fit for NoSQL:

flexible schemas (no migrations at 2 AM)
horizontal scaling
fast writes
ability to store variable structures

MongoDB ended up handling these streams beautifully.

The FHIR Realization

Here’s a fun fact that many teams discover late:
FHIR (Fast Healthcare Interoperability Resources) doesn’t tell you which database to use.

But FHIR does define strict shapes for core entities, such as:

Patient
Observation
Encounter
Medication
AllergyIntolerance
Practitioner
Coverage

These are inherently relational.
They have references, chains, and constraints that map naturally to relational databases.

FHIR servers in the real world (HAPI FHIR, Microsoft OSS, IBM) mostly use SQL internally because:

you need version history
you need audit trails
you need consistency
you need referential integrity

If a relationship between Patient → Observation breaks, a doctor sees incorrect clinical data.

That is… not ideal.

Where NoSQL Still Shines in a FHIR System

Even with a SQL backbone, NoSQL isn’t out of the picture.

We used NoSQL for:

caching frequent FHIR bundles
storing large telemetry from wearables
storing semi-structured clinical notes
fast document retrieval
chat messages in telemedicine
queuing and event streaming

It became clear quickly:

👉 SQL protects your source of truth.
👉 NoSQL helps your system breathe under pressure.

The Architecture That Finally Worked

At the end of our experiments, we landed on a hybrid structure:

🔥 SQL (PostgreSQL) for:

patient master data
encounters & admissions
lab results
insurance & claims
FHIR resource storage
audit logs
system-of-record data

🔥 NoSQL (MongoDB + Redis) for:

real-time device data
logs & event streams
semi-structured notes
caching layers
large payloads that don’t belong in relational tables

Over time, the system grew comfortably around this combination. SQL gave reliability. NoSQL gave speed and flexibility.

So When Should You Use Each?

✅ Use SQL when your data:

is structured
is relational
must remain consistent
requires transactions
needs auditing
maps to FHIR resources
plays a role in compliance

✅ Use NoSQL when your data:

changes shape frequently
comes in high volume
needs fast writes
is semi-structured or unstructured
doesn’t require strict relational constraints

Final Thought

Choosing between SQL and NoSQL isn’t a battle.
It’s a balancing act.

If you’re building healthcare software — especially anything involving FHIR — you’ll almost always end up using both, each playing to its strengths.

And trust me…
Your future self (and your future on-call phone) will be grateful you didn’t try to force all data into one box.

Building Robust Form Validation in Angular with Custom Validators

Alireza Razinejad — Tue, 12 Aug 2025 19:51:10 +0000

Introduction

Form validation is a critical aspect of modern web applications, especially when dealing with complex business logic that goes beyond simple required field checks. Angular's reactive forms provide a powerful foundation, but sometimes you need to implement custom validation logic that handles intricate field relationships and dependencies.

In this article, I'll walk you through creating a sophisticated form validation system using custom validators in Angular. We'll build a Product Configuration Form that demonstrates advanced validation patterns you can apply to any complex form scenario.

The Challenge

Imagine you're building a product configuration system where users can:

Select a product category
Choose a product type
Set pricing options
Configure availability settings

The challenge is that these fields have complex interdependencies:

Product category affects which product types are available
Product type determines pricing model options
Pricing model affects availability settings
Some fields must be filled together, while others become unavailable based on selections

Setting Up the Project

First, let's create our component structure:

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

@Component({
  selector: 'app-product-config',
  templateUrl: './product-config.component.html',
  styleUrls: ['./product-config.component.scss']
})
export class ProductConfigComponent implements OnInit {
  productForm: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    this.initializeForm();
    this.setupFieldListeners();
  }
}

Creating Custom Validators

1. Cross-Field Validation

Our first validator ensures that when a product type is selected, the appropriate pricing model is chosen:

function pricingModelValidator(group: AbstractControl): ValidationErrors | null {
  const productType = group.get('productType')?.value;
  const pricingModel = group.get('pricingModel')?.value;

  if (productType === 'subscription' && pricingModel !== 'monthly' && pricingModel !== 'yearly') {
    return { invalidPricingForSubscription: true };
  }

  if (productType === 'oneTime' && pricingModel !== 'fixed' && pricingModel !== 'tiered') {
    return { invalidPricingForOneTime: true };
  }

  return null;
}

2. Dependent Fields Validator

This validator ensures that when availability settings are configured, both start and end dates are provided:

function availabilityDatesValidator(group: AbstractControl): ValidationErrors | null {
  const startDate = group.get('availabilityStart')?.value;
  const endDate = group.get('availabilityEnd')?.value;
  const isLimitedAvailability = group.get('limitedAvailability')?.value;

  if (isLimitedAvailability && ((startDate && !endDate) || (!startDate && endDate))) {
    return { availabilityDatesIncomplete: true };
  }

  return null;
}

3. Business Rule Validator

This validator implements complex business logic for product configuration:

function productConfigurationValidator(group: AbstractControl): ValidationErrors | null {
  const category = group.get('category')?.value;
  const productType = group.get('productType')?.value;
  const pricingModel = group.get('pricingModel')?.value;

  // Premium categories require subscription-based products
  if (category === 'premium' && productType === 'oneTime') {
    return { premiumCategoryRequiresSubscription: true };
  }

  // Enterprise products must have tiered pricing
  if (category === 'enterprise' && pricingModel !== 'tiered') {
    return { enterpriseRequiresTieredPricing: true };
  }

  return null;
}

Building the Form

Now let's create our form with all the validators:

private initializeForm(): void {
  this.productForm = this.fb.group({
    category: ['', Validators.required],
    productType: ['', Validators.required],
    pricingModel: ['', Validators.required],
    limitedAvailability: [false],
    availabilityStart: [''],
    availabilityEnd: [''],
    productName: ['', [Validators.required, Validators.minLength(3)]],
    description: ['', Validators.maxLength(500)]
  }, {
    validators: [
      pricingModelValidator,
      availabilityDatesValidator,
      productConfigurationValidator
    ]
  });
}

Implementing Dynamic Field Behavior

The real power comes from implementing dynamic field enabling/disabling based on user selections:

private setupFieldListeners(): void {
  // Listen to category changes
  this.productForm.get('category')?.valueChanges.subscribe(category => {
    this.updateFieldAvailability(category);
  });

  // Listen to product type changes
  this.productForm.get('productType')?.valueChanges.subscribe(productType => {
    this.updatePricingOptions(productType);
  });

  // Listen to availability changes
  this.productForm.get('limitedAvailability')?.valueChanges.subscribe(isLimited => {
    this.updateAvailabilityFields(isLimited);
  });
}

private updateFieldAvailability(category: string): void {
  const productTypeControl = this.productForm.get('productType');
  const pricingModelControl = this.productForm.get('pricingModel');

  if (category === 'premium') {
    // Premium categories only support subscription products
    productTypeControl?.setValue('subscription');
    productTypeControl?.disable({ emitEvent: false });
    this.updatePricingOptions('subscription');
  } else {
    productTypeControl?.enable({ emitEvent: false });
    pricingModelControl?.enable({ emitEvent: false });
  }
}

private updatePricingOptions(productType: string): void {
  const pricingModelControl = this.productForm.get('pricingModel');

  if (productType === 'subscription') {
    pricingModelControl?.setValue('monthly');
    // Update available pricing options
  } else if (productType === 'oneTime') {
    pricingModelControl?.setValue('fixed');
    // Update available pricing options
  }
}

private updateAvailabilityFields(isLimited: boolean): void {
  const startDateControl = this.productForm.get('availabilityStart');
  const endDateControl = this.productForm.get('availabilityEnd');

  if (isLimited) {
    startDateControl?.enable();
    endDateControl?.enable();
    startDateControl?.setValidators([Validators.required]);
    endDateControl?.setValidators([Validators.required]);
  } else {
    startDateControl?.disable();
    endDateControl?.disable();
    startDateControl?.clearValidators();
    endDateControl?.clearValidators();
    startDateControl?.setValue('');
    endDateControl?.setValue('');
  }

  startDateControl?.updateValueAndValidity();
  endDateControl?.updateValueAndValidity();
}

Handling Form State

We need a centralized method to manage field states:

private updateFormState(): void {
  const category = this.productForm.get('category')?.value;
  const productType = this.productForm.get('productType')?.value;
  const isLimitedAvailability = this.productForm.get('limitedAvailability')?.value;

  // Reset all fields to enabled first
  this.enableAllFields();

  // Apply business rules
  if (category === 'premium') {
    this.productForm.get('productType')?.disable({ emitEvent: false });
  }

  if (productType === 'subscription') {
    this.productForm.get('pricingModel')?.disable({ emitEvent: false });
  }

  if (!isLimitedAvailability) {
    this.productForm.get('availabilityStart')?.disable({ emitEvent: false });
    this.productForm.get('availabilityEnd')?.disable({ emitEvent: false });
  }
}

private enableAllFields(): void {
  Object.keys(this.productForm.controls).forEach(key => {
    this.productForm.get(key)?.enable({ emitEvent: false });
  });
}

Displaying Validation Errors

In your template, you can now show specific validation errors:

<div class="form-group">
  <label for="pricingModel">Pricing Model</label>
  <select formControlName="pricingModel" class="form-control">
    <option value="">Select Pricing Model</option>
    <option value="monthly">Monthly Subscription</option>
    <option value="yearly">Yearly Subscription</option>
    <option value="fixed">Fixed Price</option>
    <option value="tiered">Tiered Pricing</option>
  </select>

  <div *ngIf="productForm.errors?.['invalidPricingForSubscription']" class="error-message">
    Subscription products must use monthly or yearly pricing
  </div>

  <div *ngIf="productForm.errors?.['invalidPricingForOneTime']" class="error-message">
    One-time products must use fixed or tiered pricing
  </div>

  <div *ngIf="productForm.errors?.['enterpriseRequiresTieredPricing']" class="error-message">
    Enterprise products must use tiered pricing model
  </div>
</div>

<div class="form-group">
  <label>
    <input type="checkbox" formControlName="limitedAvailability">
    Limited Availability
  </label>

  <div *ngIf="productForm.errors?.['availabilityDatesIncomplete']" class="error-message">
    Both start and end dates are required for limited availability
  </div>
</div>

Best Practices and Tips

1. Use `emitEvent: false` Strategically

When programmatically updating form values, use { emitEvent: false } to prevent infinite validation loops:

this.productForm.patchValue({
  productType: 'subscription'
}, { emitEvent: false });

2. Centralize Validation Logic

Create a single method that handles all field state updates to maintain consistency:

private updateAllFieldStates(): void {
  this.updateFieldAvailability(this.productForm.get('category')?.value);
  this.updatePricingOptions(this.productForm.get('productType')?.value);
  this.updateAvailabilityFields(this.productForm.get('limitedAvailability')?.value);
}

3. Test Your Validators

Custom validators should be thoroughly tested:

describe('Product Configuration Validators', () => {
  it('should validate subscription pricing for premium category', () => {
    const form = new FormGroup({
      category: new FormControl('premium'),
      productType: new FormControl('subscription'),
      pricingModel: new FormControl('monthly')
    }, [productConfigurationValidator]);

    expect(form.errors).toBeNull();
  });
});

4. Handle Async Validation

For complex business rules that require API calls:

function asyncProductValidator(): AsyncValidatorFn {
  return (control: AbstractControl): Observable<ValidationErrors | null> => {
    return this.productService.validateConfiguration(control.value).pipe(
      map(isValid => isValid ? null : { invalidConfiguration: true }),
      catchError(() => of(null))
    );
  };
}

Conclusion

Custom form validators in Angular provide a powerful way to implement complex business logic while maintaining clean, maintainable code. By combining multiple validators, dynamic field behavior, and centralized state management, you can create forms that not only validate user input but also guide users through complex workflows.

The key is to think about your validation logic as a system rather than individual field checks. This approach makes your forms more intelligent, user-friendly, and aligned with business requirements.

Remember to:

Keep validators focused and single-purpose
Use composition to build complex validation logic
Centralize field state management
Test your validation logic thoroughly
Consider performance implications of complex validators

With these patterns, you can build forms that handle even the most complex business requirements while maintaining excellent user experience and code quality.

Preventing Duplicate Files in Model Training: Content Analysis vs. Metadata

Alireza Razinejad — Thu, 01 Aug 2024 16:50:23 +0000

Understanding the Problem

Duplicate files in a training dataset can significantly impact model performance. They can introduce bias, reduce model accuracy, and slow down training. Therefore, implementing a robust deduplication strategy is crucial.

Content Analysis vs. Metadata: A Comparative Analysis

Content Analysis

How it works: Involves examining the actual content of the file to identify similarities.
Techniques:
- Hashing: Creating a unique fingerprint of the file content. Highly efficient for exact duplicates.
- Similarity measures: Using algorithms like Jaccard similarity or cosine similarity for text-based content, or image hashing techniques for image data.
Advantages:
- Accurate detection of exact and near-duplicate files.
- Can handle different file formats.
Disadvantages:
- Computationally expensive for large datasets.
- Might require significant processing resources.

Metadata Analysis

How it works: Comparing metadata attributes associated with files, such as file name, creation date, size, author, etc.
Techniques:
- Exact matching: Comparing metadata fields for exact equality.
- Fuzzy matching: Using approximate string matching algorithms for file names or other text-based metadata.
Advantages:
- Faster and less computationally intensive than content analysis.
- Can be used as a pre-filtering step to reduce the dataset size before applying content analysis.
Disadvantages:
- Less accurate than content analysis for detecting duplicates.
- Might miss duplicates with similar content but different metadata.

Recommended Approach: Hybrid Strategy

For optimal results, combining both content analysis and metadata analysis is often recommended:

Metadata-based filtering: Quickly eliminate obvious duplicates based on metadata attributes.
Content-based analysis: Apply more computationally intensive techniques to the remaining files for accurate duplicate detection.
Consideration of file type: Different file types may require different approaches. For example, images might benefit from image-specific hashing techniques, while text files might use text similarity measures.

Additional Considerations:

Data volume: For extremely large datasets, consider sampling or chunking the data to manage computational resources.
False positives and negatives: Evaluate the trade-off between precision and recall when selecting similarity thresholds.
Data privacy: If dealing with sensitive data, ensure that the deduplication process complies with privacy regulations.
Incremental updates: For continuously growing datasets, consider an incremental approach to deduplication to minimize processing time.

By carefully considering these factors and combining content analysis with metadata analysis, you can effectively prevent duplicate files in your model training process and improve the quality of your model.

Composition in Frontend Development

Alireza Razinejad — Thu, 01 Aug 2024 09:44:38 +0000

Composition is a fundamental principle in frontend development that involves building complex UIs by combining smaller, reusable components. It's a cornerstone of modern frontend architectures and frameworks like React, Vue, and Angular.

Core Concepts

Components: These are self-contained building blocks that encapsulate UI, logic, and state.
Props: Data passed from parent to child components.
State: Internal data managed by a component.
Composition over Inheritance: Rather than extending components to create new ones (inheritance), composition focuses on building components by combining existing ones.

Benefits of Composition

Reusability: Components can be used in multiple places, reducing code duplication.
Maintainability: Components are isolated, making them easier to understand, test, and modify.
Flexibility: Complex UIs can be built by combining simple components in various ways.
Scalability: As your application grows, composition helps manage complexity effectively.

Real-world Examples

A Card component can be composed of an Image, Title, and Description component.
A ProductListing component can be composed of multiple Card components.
A Navigation component can be composed of Link components.

Composition vs. Inheritance

While inheritance is a concept from object-oriented programming, composition is often preferred in frontend development due to its flexibility and maintainability.

Feature	Composition	Inheritance
Reusability	High	Limited
Maintainability	High	Lower
Flexibility	High	Lower
Complexity	Can be managed	Can increase complexity

Deep Dive into Composition

To better understand composition, let's explore specific use cases or dive deeper into a particular aspect.

Component Libraries: How can composition be leveraged to create reusable component libraries?
State Management: How does composition interact with state management libraries like Redux or Vuex?
Performance Optimization: What strategies can be used to optimize performance when using composition?

Git flow that's simple, easy to manage, and generally applicable

Alireza Razinejad — Tue, 16 Jul 2024 17:05:01 +0000

This Git flow ensures a structured and organized development process, making it easier to manage changes, track progress, and maintain the stability of the main codebase while incorporating a dedicated branch for QA testing.

Branching Strategy

Main Branches

main: This branch contains the production-ready code. Every commit to main should be a release.
develop: This branch contains the latest development changes. It is the integration branch for feature branches.

Supporting Branches

feature/*: These branches are used to develop new features. They branch off from develop and are merged back into develop once the feature is complete.
bugfix/*: These branches are used to fix bugs found in the develop branch. They branch off from develop and are merged back into develop once the bug is fixed.
release/*: These branches support the preparation of a new production release. They allow for minor bug fixes and preparing meta-data for a release (version number, build date, etc.). They branch off from develop and are merged into both develop and main.
hotfix/*: These branches are for critical fixes that need to be applied directly to the main branch. They branch off from main and are merged back into both main and develop.

Workflow

Feature Development

Create a new feature branch from develop:

git checkout develop
git pull origin develop
git checkout -b feature/your-feature-name

Develop your feature.
Once the feature is complete and tested locally, push it to the remote repository:
```
git push origin feature/your-feature-name
```
Create a merge request (MR) from feature/your-feature-name to develop.

Bug Fixing

Create a new bugfix branch from develop:

git checkout develop
git pull origin develop
git checkout -b bugfix/your-bugfix-name

Fix the bug.
Once the bug is fixed and tested locally, push it to the remote repository:
```
git push origin bugfix/your-bugfix-name
```
Create a merge request (MR) from bugfix/your-bugfix-name to develop.

Preparing a Release

When all the features for the next release are merged into develop, create a new release branch:
```
git checkout develop
git pull origin develop
git checkout -b release/0.0.1
```
Perform final testing and bug fixing on the release/0.0.1 branch.

Once the release is ready, merge it into main:

git checkout main
git pull origin main
git merge release/0.0.1
git push origin main

Also, merge it back into develop to keep it updated:

git checkout develop
git pull origin develop
git merge release/0.0.1
git push origin develop

Delete the release branch:

git branch -d release/0.0.1
git push origin --delete release/0.0.1

Hotfixes

Create a hotfix branch from main:

git checkout main
git pull origin main
git checkout -b hotfix/your-hotfix-name

Fix the issue.

Once the hotfix is complete, merge it into main:

git checkout main
git pull origin main
git merge hotfix/your-hotfix-name
git push origin main

Also, merge it into develop to keep it updated:

git checkout develop
git pull origin develop
git merge hotfix/your-hotfix-name
git push origin develop

Delete the hotfix branch:

git branch -d hotfix/your-hotfix-name
git push origin --delete hotfix/your-hotfix-name

Merging Rules

Feature/Bugfix to Develop: A feature or bugfix branch must pass code review and be tested locally before being merged into develop.
Release to Main: The release branch must pass final QA testing before being merged into main.
Hotfix to Main and Develop: Hotfix branches should be used for critical issues in the production environment and must be merged into both main and develop after fixing.

Conclusion

This Git flow provides a clear and straightforward process for managing development, testing, and releases. By using dedicated branches for features, bug fixes, QA testing, and hotfixes, it ensures code quality and stability, making it easier to track progress and maintain the main codebase.

Demystifying MVC Architecture in Modern Web Frameworks: React and Angular

Alireza Razinejad — Tue, 30 Apr 2024 21:57:05 +0000

As web development evolves, so do the architectural patterns we use. While MVC (Model-View-Controller) is a staple in software design, adapting it to frameworks like React and Angular can optimize our projects for better scalability and maintainability. Here’s a quick guide on how you can implement MVC-like structures in both frameworks:

React and MVC:

React is predominantly view-oriented, focusing on UI components. However, incorporating Redux allows us to neatly separate concerns:

Model: Redux Store manages application state, acting as a single source of truth.

// Redux store (model.js)
import { createStore } from 'redux';

const initialState = {
    counter: 0
};

function reducer(state = initialState, action) {
    switch (action.type) {
        case 'INCREMENT':
            return { ...state, counter: state.counter + 1 };
        case 'DECREMENT':
            return { ...state, counter: state.counter - 1 };
        default:
            return state;
    }
}

const store = createStore(reducer);
export default store;

View and Controller: React components render UI and handle user interactions, dispatching actions to update the model.

// Counter.js (React component)
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';

const Counter = () => {
    const counter = useSelector(state => state.counter);
    const dispatch = useDispatch();

    return (
        <div>
            <h1>Counter: {counter}</h1>
            <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
            <button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</button>
        </div>
    );
}

export default Counter;

Angular Embraces MVC Naturally:

Angular’s robust structure supports MVC more directly with its component and service architecture:

Model: Services in Angular manage data logic and state, similar to traditional MVC models.

// counter.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class CounterService {
  private counter = new BehaviorSubject<number>(0);

  getCounter() {
    return this.counter.asObservable();
  }

  incrementCounter() {
    this.counter.next(this.counter.value + 1);
  }

  decrementCounter() {
    this.counter.next(this.counter.value - 1);
  }
}

View: Templates render the UI, binding directly to the component class.

<!-- counter.component.html -->
<div>
  <h1>Counter: {{ counter | async }}</h1>
  <button (click)="increment()">Increment</button>
  <button (click)="decrement()">Decrement</button>
</div>

Controller: Angular components handle data and user interactions, communicating with services.

// counter.component.ts
import { Component } from '@angular/core';
import { CounterService } from './counter.service';

@Component({
  selector: 'app-counter',
  templateUrl: './counter.component.html'
})
export class CounterComponent {
  counter = this.counterService.getCounter();

  constructor(private counterService: CounterService) {}

  increment() {
    this.counterService.incrementCounter();
  }

  decrement() {
    this.counterService.decrementCounter();
  }
}

Both React and Angular offer unique takes on MVC, adapting its core principles to the component-driven development landscape. By understanding these patterns, developers can create more organized and manageable codebases.

👉 If you're looking to deepen your understanding or considering integrating MVC into your projects, let's connect and discuss how these patterns can be tailored to fit your needs!

useSocket

Alireza Razinejad — Thu, 11 Apr 2024 12:42:18 +0000

If you're using socket.io-client in your React application, you can create a custom hook that encapsulates the connection, event listening, and message emitting logic in a neat and reusable manner. Socket.IO provides some advanced features over plain WebSockets, like automatic reconnection, event-based communication, rooms, etc., which can be efficiently managed within a custom hook.

Here's an example of how you could implement a custom hook, useSocket, for a React application using socket.io-client:

import { useEffect, useRef, useState, useCallback } from 'react';
import io from 'socket.io-client';

function useSocket(url, options) {
  const [socket, setSocket] = useState(null);

  useEffect(() => {
    // Initialize socket connection
    const socketIo = io(url, options);

    setSocket(socketIo);

    return () => {
      socketIo.disconnect();
    };
  }, [url, options]);

  // Function to emit messages
  const emit = useCallback((event, data) => {
    if (socket) {
      socket.emit(event, data);
    }
  }, [socket]);

  // Function to subscribe to an event
  const on = useCallback((event, func) => {
    if (socket) {
      socket.on(event, func);

      return () => socket.off(event, func); // Return a cleanup function
    }
  }, [socket]);

  return { socket, emit, on };
}

export default useSocket;

How to Use the useSocket Hook in Your Components:

Connecting and Listening for Events: To connect to the socket server and listen for events, simply invoke the useSocket hook with the server URL. You can use the on function returned by the hook to listen for specific events.

import React, { useEffect } from 'react';
import useSocket from './useSocket';

function ChatComponent() {
  const { emit, on } = useSocket('http://localhost:3000');

  useEffect(() => {
    // Subscribe to an event
    const unsubscribe = on('chat message', (msg) => {
      console.log('New message:', msg);
    });

    // Cleanup subscription on component unmount
    return unsubscribe;
  }, [on]);

  const sendMessage = () => {
    emit('chat message', 'Hello World!');
  };

  return <button onClick={sendMessage}>Send Message</button>;
}

export default ChatComponent;

Emitting Messages: Use the emit function returned by the hook to send messages or data to the server. It's designed to mimic the Socket.IO client's emit method, taking an event name as the first argument and the data to send as the second.

This implementation ensures that your components remain clean and focused on their primary function, abstracting away the complexity of managing Socket.IO connections and event listeners. The useSocket hook can be further customized and extended based on your specific requirements, such as handling reconnections explicitly, managing socket instance state more granularly, or incorporating additional Socket.IO features.

Limit Ranged Angular Material Date Picker

Alireza Razinejad — Fri, 29 Mar 2024 04:28:26 +0000

Need to disable some parts of the Angular material date picker like the following image?

All you need is filter method.

The following example enables dates from today.

// date-picker.ts
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { DateAdapter } from '@angular/material/core';

@Component({
  imports: [CommonModule, FormsModule, MatDatepickerModule]
})
export class SelectDatesComponent {

  dateFilter = (d: Date | null): boolean => {
    const today = this.dateAdapter.today();
    if (d) {
      return this.dateAdapter.compareDate(today, d) <= 0;
    } else {
      return false;
    }
  }

  constructor(private dateAdapter: DateAdapter<Date | null>) {}

}

<!-- datepicker.html -->
<mat-form-field>
  <mat-date-range-input [rangePicker]="picker"[dateFilter]="dateFilter">
    <input matStartDate />
    <input matEndDate/>
  </mat-date-range-input>
</mat-form-field>
<mat-date-range-picker #picker />

Enabling CORS in a .NET Core Server-Side Application

Alireza Razinejad — Sat, 30 Dec 2023 19:00:23 +0000

Step 1: Install the Microsoft.AspNetCore.Cors NuGet Package

Open your .NET Core project in Visual Studio or your preferred code editor. In the Package Manager Console or the terminal, run the following command to install the CORS package:

dotnet add package Microsoft.AspNetCore.Cors

Alternatively, you can use the NuGet Package Manager in Visual Studio to search for and install the package.

Step 2: Configure CORS in Startup.cs

Open the Startup.cs file in your project. In the ConfigureServices method, add the CORS policy configuration using the AddCors method:

public void ConfigureServices(IServiceCollection services)
{
    // Other ConfigureServices configurations...

    services.AddCors(options =>
    {
        options.AddPolicy("AllowSpecificOrigin",
            builder =>
            {
                builder.WithOrigins("http://example.com") // Add your client-side application's origin here
                       .AllowAnyHeader()
                       .AllowAnyMethod();
            });
    });

    // More ConfigureServices configurations...
}

Make sure to replace "http://example.com" with the actual origin of your client-side application. If you want to allow any origin, you can use builder.AllowAnyOrigin() instead.

Step 3: Apply CORS Middleware in the Configure Method

In the Configure method of Startup.cs, add the CORS middleware using the UseCors method:

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    // Other Configure configurations...

    app.UseCors("AllowSpecificOrigin");

    // More Configure configurations...
}

This middleware should be placed before any other middleware or routing configurations.

Step 4: Run and Test Your Application

Now that CORS is configured, run your .NET Core application. Make requests from your client-side application to the server and verify that CORS is working as expected.

Additional Tips:
For development purposes, you might want to install the Microsoft.AspNetCore.Mvc.NewtonsoftJson NuGet package and configure JSON serialization to allow circular references using AddNewtonsoftJson in the ConfigureServices method.

services.AddMvc().AddNewtonsoftJson(options =>
{
    options.SerializerSettings.ReferenceLoopHandling = Newtonsoft.Json.ReferenceLoopHandling.Ignore;
});

Remember to handle CORS settings carefully in a production environment, and only allow specific origins that are necessary for security reasons.

Unveiling TypeScript Magic: Using One Name for Both Interface and Class

Alireza Razinejad — Tue, 19 Dec 2023 14:45:48 +0000

In the realm of TypeScript, a curious practice occasionally emerges — defining both an interface and a class with the same name within a single file. This intriguing approach has its merits and quirks, and understanding its implications is crucial for TypeScript developers. In this exploration, we'll dive into the reasons behind this pattern, its advantages, and potential pitfalls.

The Enigma: Same Name, Dual Role

At times, developers find themselves defining both an interface and a class with identical names. The magic happens when the interface lays out a contract, specifying the expected structure, and the class steps in to provide a tangible implementation.

// Example
interface User {
  // ...
}

class User {
  // ...
}

The Allure: Code Organization

The primary allure of this practice lies in code organization. By bundling the interface and class definitions under a shared name, developers can create a neat and compact representation of related entities.

// Example
export interface UserDetails {
  // ...
}

export class UserDetails {
  // ...
}

This organizational tactic proves handy, particularly in smaller projects or specific components, where the relationship between the interface and its implementation is clear and straightforward.

Navigating the Labyrinth: Potential Challenges

While the shared-name strategy introduces a touch of elegance, it's not without its challenges. Let's navigate through potential hurdles and considerations.

1. Ambiguity in Context

Having both an interface and a class with the same name can create ambiguity, especially for developers unfamiliar with the codebase. Distinguishing references to the interface versus the class might not be immediately evident.

2. Striking a Balance with SRP

The Single Responsibility Principle (SRP) suggests that a class or module should have only one reason to change. Combining an interface (contract) and a class (implementation) in the same file may challenge this principle, potentially leading to code that is harder to maintain.

3. Syncing for Harmony

Keeping the interface and class in sync becomes crucial. Any divergence between the expected contract (interface) and the actual implementation (class) could introduce bugs and inconsistencies.

4. Readability and Maintainability

As the codebase grows, having both definitions in the same file might impact code readability and maintainability. The file's responsibility for defining a contract and providing an implementation might become more challenging to manage.

5. Reusability Concerns

While effective in certain contexts, the shared-name pattern might limit the reusability of the interface when a different implementation is required.

6. Encapsulation Dilemma

Combining interface and class definitions in the same file could compromise the principle of encapsulation, exposing implementation details that might be better hidden.

7. Name Collisions

Overusing the shared-name pattern might result in name collisions when attempting to import or use multiple classes/interfaces with the same name from different files.

Unraveling the Mystery: Striking a Balance

While the shared-name practice offers an intriguing organizational strategy, it's crucial to strike a balance. For larger and more complex projects, consider a modular and separation-of-concerns approach. Perhaps splitting the interface and class into separate files or adhering more closely to the Single Responsibility Principle could enhance code maintainability.

By unraveling the mystery of using one name for both interface and class, developers can harness the benefits while mitigating potential challenges. As with any coding pattern, understanding when and where to apply it ensures that TypeScript magic enhances, rather than complicates, the development journey.

Beginner Project Idea to Learn Angular and RxJs

Alireza Razinejad — Sat, 16 Sep 2023 16:13:02 +0000

Here are some beginner project ideas that cover critical aspects of the Angular framework and RxJS:

Task Management App:
Create a simple task management application where users can add, edit, and delete tasks. Utilize Angular for the front end and RxJS for managing data streams, such as task lists and filters.
Weather Dashboard:
Build a weather dashboard that allows users to search for weather information for different locations. Use Angular for the UI components and RxJS for handling API requests and real-time updates.
To-Do List with Drag-and-Drop:
Develop a to-do list application with the ability to drag and drop tasks to reorder them. Implement this functionality using Angular's drag-and-drop features and manage task state using RxJS.
Chat Application:
Create a real-time chat application with Angular and RxJS. Use RxJS observables to handle incoming and outgoing messages, and implement features like typing indicators and message history.
User Registration and Authentication:
Build a user registration and authentication system using Angular for the frontend. Use RxJS for handling form submissions, user authentication, and managing user sessions.
Interactive Maps with Data Visualization:
Develop an application that displays interactive maps and visualizes data on the maps. Use Angular for the map interface and RxJS for handling data streams and updates.
Movie or Book Catalog:
Create a catalog of movies or books where users can search, filter, and view details. Use Angular for the user interface and RxJS for managing data retrieval and filtering.
E-commerce Product Catalog:
Build a simple e-commerce product catalog with Angular and RxJS. Implement features like product filtering, sorting, and cart management using RxJS observables.
Blog or News Reader:
Develop a blog or news reader application that fetches and displays articles. Utilize Angular for the user interface and RxJS for handling API requests and managing article streams.
Dashboard with Charts:
Create a dashboard application with various charts and graphs to display data. Use Angular for the dashboard layout and RxJS for handling data streams and updating charts in real-time.

Remember to start with a well-defined project scope and progressively add features as you become more comfortable with Angular and RxJS. These projects will help you gain hands-on experience with key concepts of the framework and reactive programming.

Setting Up Elasticsearch with Docker: A Quick Guide

Alireza Razinejad — Sun, 13 Aug 2023 13:24:46 +0000

If you're looking to get started with Elasticsearch and want an easy way to set it up for development purposes, Docker is your friend. In this guide, we'll walk you through the steps of creating a Docker container with Elasticsearch and provide usage instructions.

Prerequisites

Before you start, make sure you have Docker installed on your system. You can download it from the official Docker website.

Creating the Docker Container

To set up Elasticsearch using Docker, follow these steps:

Create a Dockerfile: Create a new file named Dockerfile in a directory of your choice.
Paste the following content into the Dockerfile:

# Use the official Elasticsearch Docker image as the base image
FROM docker.elastic.co/elasticsearch/elasticsearch:7.15.0

# Expose the port that Elasticsearch listens on
EXPOSE 9200

# Set environment variables for Elasticsearch configuration
ENV discovery.type=single-node \
    network.host=0.0.0.0 \
    transport.host=0.0.0.0

# Provide a helpful comment for usage instructions
# To build the Docker image:
# docker build -t my-elasticsearch-image .
#
# To run the Docker container:
# docker run -d --name my-elasticsearch-container -p 9200:9200 my-elasticsearch-image
#
# The Elasticsearch server will be accessible at http://localhost:9200
# The container's name is 'my-elasticsearch-container'
# You can customize these values as needed.

# Start Elasticsearch when the container starts
CMD ["elasticsearch"]

Build the Docker Image: Open a terminal and navigate to the directory containing the Dockerfile. Run the following command:

   docker build -t my-elasticsearch-image .

Run the Docker Container: After the image is built, run a Docker container with the following command:

   docker run -d --name my-elasticsearch-container -p 9200:9200 my-elasticsearch-image

Accessing Elasticsearch

Elasticsearch will now be running in the Docker container. You can access it by opening your web browser and navigating to http://localhost:9200. This URL will display Elasticsearch's API response.

Conclusion

Using Docker to set up Elasticsearch for development purposes is a quick and convenient way to get started. With a few simple commands, you can have Elasticsearch up and running in no time. Make sure to customize the container name and port as needed for your project.

Happy coding!

DEV Community: Alireza Razinejad

SQL or NoSQL? A Real Story From Building Healthcare Software (and How FHIR Fits In)

The Moment It Became Clear

✅ 1. Highly structured clinical data

✅ 2. Unpredictable, high-volume data

The FHIR Realization

Where NoSQL Still Shines in a FHIR System

The Architecture That Finally Worked

🔥 SQL (PostgreSQL) for:

🔥 NoSQL (MongoDB + Redis) for:

So When Should You Use Each?

✅ Use SQL when your data:

✅ Use NoSQL when your data:

Final Thought

Building Robust Form Validation in Angular with Custom Validators

Introduction

The Challenge

Setting Up the Project

Creating Custom Validators

1. Cross-Field Validation

2. Dependent Fields Validator

3. Business Rule Validator

Building the Form

Implementing Dynamic Field Behavior

Handling Form State

Displaying Validation Errors

Best Practices and Tips

1. Use emitEvent: false Strategically

2. Centralize Validation Logic

3. Test Your Validators

4. Handle Async Validation

Conclusion

Preventing Duplicate Files in Model Training: Content Analysis vs. Metadata

Content Analysis

Metadata Analysis

Composition in Frontend Development

Core Concepts

Benefits of Composition

Real-world Examples

Composition vs. Inheritance

Deep Dive into Composition

Git flow that's simple, easy to manage, and generally applicable

Branching Strategy

Main Branches

Supporting Branches

Workflow

Feature Development

Bug Fixing

Preparing a Release

Hotfixes

Merging Rules

Conclusion

Demystifying MVC Architecture in Modern Web Frameworks: React and Angular

React and MVC:

Angular Embraces MVC Naturally:

useSocket

Limit Ranged Angular Material Date Picker

Enabling CORS in a .NET Core Server-Side Application

Step 1: Install the Microsoft.AspNetCore.Cors NuGet Package

Step 2: Configure CORS in Startup.cs

Step 3: Apply CORS Middleware in the Configure Method

Step 4: Run and Test Your Application

Unveiling TypeScript Magic: Using One Name for Both Interface and Class

The Enigma: Same Name, Dual Role

The Allure: Code Organization

Navigating the Labyrinth: Potential Challenges

1. Ambiguity in Context

2. Striking a Balance with SRP

3. Syncing for Harmony

4. Readability and Maintainability

5. Reusability Concerns

6. Encapsulation Dilemma

7. Name Collisions

Unraveling the Mystery: Striking a Balance

Beginner Project Idea to Learn Angular and RxJs

Setting Up Elasticsearch with Docker: A Quick Guide

Prerequisites

Creating the Docker Container

Accessing Elasticsearch

Conclusion

1. Use `emitEvent: false` Strategically