DEV Community: Anas AbdelHadi

[Boost]

Anas AbdelHadi — Wed, 01 Jan 2025 14:32:32 +0000

Corello, Simple Dtos in FrontEnd

Anas AbdelHadi ・ Jan 1

Corello, Simple Dtos in FrontEnd

Anas AbdelHadi — Wed, 01 Jan 2025 13:59:31 +0000

Data Transfer Objects (DTOs) are a pivotal part of modern application architecture. They simplify communication between different layers of an application, ensuring that data integrity and structure are maintained. This article explores the concept of DTOs, their importance, best practices, and how the Corello library revolutionizes serialization and deserialization in TypeScript.

What are DTOs?

DTOs, short for Data Transfer Objects, are simple objects designed to transfer data without any business logic. They act as containers for transferring structured information across application boundaries—whether between an API and a client, or within different layers of an application such as controllers, services, or repositories.

The core idea is abstraction. DTOs abstract away implementation-specific details, presenting only the relevant data needed by the consuming system. This decoupling ensures flexibility, maintainability, and clarity in code.

Why Do We Need DTOs?

Decoupling Layers: DTOs create a clear contract between different layers, allowing for independent evolution without breaking existing interactions.

Performance Optimization: By shaping data explicitly, DTOs ensure only required information is transferred, minimizing payload size.

Data Validation and Security: They prevent over-posting attacks and enforce constraints by limiting exposed properties.

Simplified Testing: DTOs make it easier to mock and test data-related interactions, as they’re typically devoid of complex logic.

Best Practices for DTOs

Keep It Simple: DTOs should be lean, containing only fields required for the operation. Avoid embedding unnecessary business logic.

Use Explicit Typing: In TypeScript, leverage interfaces and type annotations to ensure the structure is well-defined and predictable.

Separate DTOs by Use Case: Create different DTOs for different operations (e.g., CreateUserDto, UpdateUserDto) to avoid ambiguity.

Automate Serialization: Avoid manual mapping; instead, use tools or libraries to handle nested and complex data structures efficiently.

Enter Corello: Streamlining DTO Management

Corello takes the complexity out of DTO serialization and deserialization in TypeScript. By providing powerful decorators and utilities, it empowers developers to handle nested object hierarchies with minimal effort.

npm i corello

Key Features of Corello

Auto Type Instantiation
If you initialize the property with a concrete instance, then your Dto will know how to serialize it without decorator hints.

public someUser = new User()

@Dto Decorator
The @Dto decorator transforms a plain class into a DTO. It ensures seamless serialization by providing a built-in from method for deserializing JSON into strongly typed objects.

@Dto
class User extends DtoBase<User> {
    name!: string;
}

const user = new User({ name: 'John Doe' })
console.log(user.name); // Output: John Doe

@class Decorator
This decorator explicitly defines the type of a property, making nested object serialization effortless.

@Dto
class Car extends DtoBase<Car>{
    @Class(() => User)
    owner!: User;
}

@Factory Decorator
Designed for collections, @Factory gives developers control over how each item in an array or collection is instantiated during deserialization.

@Dto
class Car extends DtoBase<Car> {
    @Factory((data) => new User(data))
    passengers: User[] = [];
}

DtoBase
Extending DtoBasesimplifies the use of DTOs by introducing methods like from and enabling custom serialization logic for specific scenarios.

@Dto
class User extends DtoBase<User> {
    name!: string;
}

const user = new User().from({ name: 'Alice' });
console.log(JSON.stringify(user));

Why Corello Stands Out

Corello eliminates the repetitive boilerplate code often associated with managing DTOs. By offering:

Type-Safe Serialization: Ensures that nested structures and primitive types are handled gracefully.

Ease of Use: Decorators abstract away the complexities of manual mapping.

Flexible Configuration: From primitive values to complex nested objects and arrays, Corello adapts to your needs.

The inclusion of JSON.stringify support (including getters unless prefixed with _) makes it developer-friendly and ideal for real-world scenarios.

Example in Action

Here’s a glimpse of Corelloin action:


import { Class, Factory, Dto, DtoBase } from 'corello';

@Dto
class User extends DtoBase<User> {
   name!: string;
}

@Dto
class Car extends DtoBase<Car> {
   @Class(() => User)
   driver!: User;

   @Factory((data) => new User(data))
   passengers: User[] = [];
}

const car = new Car().from({
   driver: { name: 'John' },
   passengers: [{ name: 'Jane' }, { name: 'Doe' }],
});

console.log(JSON.stringify(car));

Final Thoughts

DTOs are an indispensable tool for ensuring clarity, security, and efficiency in data handling. Corello takes this a step further, simplifying the serialization process and giving developers the tools they need to manage complex object hierarchies effortlessly.

With Corello, your DTOs become more than just data containers—they’re a testament to the elegance and power of well-architected TypeScript code. So why wait? Install Corellotoday and elevate your application development experience!

Sample Project

You can check out the sample usage here

FrontEnd Dependency Injection with iocello

Anas AbdelHadi — Sat, 28 Dec 2024 12:29:37 +0000

Welcome to iocello, a library that simplifies the concepts of Dependency Injection (DI) and Inversion of Control (IoC) in your applications. With iocello, you can dynamically manage your application’s dependencies and domains while maintaining flexibility and control.

In this tutorial, we’ll explore the key concepts of iocello, walk through its setup, and demonstrate how to use it effectively.

The Concept

Imagine your application as a library of bookshelves.

Shelves (Domains): Each shelf represents a domain, and the lowest shelf (domain) is numbered 0.
Books (Classes/Services): Books are your injectable classes or services, which can be stored on any shelf.
Cross-Referencing: At runtime, you can fetch and construct books (instances of classes) from the current domain or any specified domain.
Tagging and Customization: When registering a book (class), you assign it a unique tag and specify the shelf (domain) where it belongs. This ensures easy management and retrieval.
Inversion of Control: You can dynamically change the container (shelf/domain) where books are fetched from, using ioc.setContainerDomain().

Setup

To get started with iocello, install the package and set up your environment:

Installation

npm install iocello

You will also need to install the shared kernel corello

npm install corello

Basic Usage

Mark Classes as Injectable: Use the @Service decorator.
Inject Dependencies: Use the @Inject decorator for properties in your classes.
Register Services: Add services to the IoC container using ioc.add(ServiceClass).
Dynamic Instantiation: Use ioc.construct<Type>(TagName, domain?) to create instances dynamically.

Example: Building with iocello

Let’s create an example application with Pet and Person services.

Step 1: Create Services

import { Service, Inject } from 'iocello';

// Define the Pet class and mark it as a service
@Service({ tag: 'Pet' })
class Pet {
  // Inject a dependency of type Person from domain 1
  @Inject({ tag: 'Person', domain: 1 }) person!: Person;

  walk() {
    console.log('PET IS WALKING');
  }

  dispose() {}
}

// Add the Pet service to the IoC container
ioc.add(Pet);

Step 2: Cross-Referencing with Injection

@Service({ tag: 'Person' })
class Person {
  hello: string = 'Hello!';

  // Inject an instance of Pet from domain 1 with a custom name
  @Inject({ domain: 1, tag: 'Pet' }) semsem!: Pet;

  dispose() {}
}

Step 3: Enforcing Domain Rules

You can replace a service at a specific domain by using the enforce property:

@Service({ tag: 'Person', enforce: { domain: 0 } })
class Person2 extends Person {
  @inject() Pet!: Pet;

  dispose() {}
}

Step 4: Constructing and Using Instances

Now that our services are registered, we can create and use them dynamically:

ioc.add(Person);
ioc.add(Person2);

// Construct an instance of Person from domain 100
const person = ioc.construct<Person>('Person', 100);

// Use the dynamically injected properties
person.Pet.walk(); // Outputs: PET IS WALKING
console.log(person);

Key Features of iocello

Domain-Specific Injection: Fetch instances from specific domains using tags.
Dynamic Replacement: Services can override others in a domain using the enforce property.
Circular Dependency Handling: iocello resolves circular dependencies automatically.
Warnings and Logs: Alerts for missing services or unintended overwrites.

Tips and Best Practices

Use Tags Wisely: Ensure tags are unique for each service to avoid conflicts.
Dispose Resources: Implement the dispose method in services for proper cleanup.
Monitor Logs: Watch for warnings about missing services or overwrites to debug effectively.

Conclusion

With iocello, managing dependencies becomes intuitive and scalable. By organizing your services into domains and leveraging dynamic instantiation, you can achieve a clean, maintainable architecture for your applications. Whether you're building a simple project or a complex enterprise application, iocello empowers you to take control of your IoC needs effortlessly.

Check out source code for the sample application (Vue+vite)

Happy coding! 🎉