DEV Community

Anas AbdelHadi
Anas AbdelHadi

Posted on

Corello, Simple Dtos in FrontEnd

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
Enter fullscreen mode Exit fullscreen mode

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()
Enter fullscreen mode Exit fullscreen mode

@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;
}
Enter fullscreen mode Exit fullscreen mode
const user = new User({ name: 'John Doe' })
console.log(user.name); // Output: John Doe

Enter fullscreen mode Exit fullscreen mode

@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;
}
Enter fullscreen mode Exit fullscreen mode

@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[] = [];
}
Enter fullscreen mode Exit fullscreen mode

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));
Enter fullscreen mode Exit fullscreen mode

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));

Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)