.jpeg)
| In addition to creating and adjusting maps, mappers are responsible for: |
- Ensuring the accuracy of the geographic data used in the maps they produce.
- They may also work with other professionals to gather additional data and incorporate it into their maps.
It is modifying the input from an external source to respect your jurisdiction while simultaneously transmitting accurate data to another jurisdiction.
How then can the logic of mappers be used in Angular?
Mappers in Angular can be used to create a frontend that is independent of the backend and vice versa while being future-proof.
You need to use precise data in your components or services. However, the data in the backend may change without your knowledge, and so it's important to ensure that your frontend is secure. Additionally, when sending data to the backend, it's crucial to send accurate data.
To apply mappers, you need to make classes, functions, and inheritance your best friend.
When sending data from the client to the server, mappers can be applied to facilitate mapping in the middle.
I like to use the terms deserialize (mapFrom) and serialize (mapTo)
Serialization is the process of converting an object into a stream of bytes so that it can be stored in memory, a database, or a file
Deserialization is the process of restoring a serialized object so that it can be loaded into memory
You need to use precise data in your components or services. However, the data in the backend may change without your knowledge, and so it's important to ensure that your frontend is secure. Additionally, when sending data to the backend, it's crucial to send accurate data.
To apply mappers, you need to make classes, functions, and inheritance your best friend.
When sending data from the client to the server, mappers can be applied to facilitate mapping in the middle.
I like to use the terms deserialize (mapFrom) and serialize (mapTo)
Serialization is the process of converting an object into a stream of bytes so that it can be stored in memory, a database, or a file
Deserialization is the process of restoring a serialized object so that it can be loaded into memory
the response:
{
"id": 1,
"title": "iPhone 9",
"description": "An apple mobile which is nothing like apple",
"price": 549,
"discountPercentage": 12.96,
"rating": 4.69,
"stock": 94,
"brand": "Apple",
"category": "smartphones",
"thumbnail": "https://cdn.dummyjson.com/product-images/1/thumbnail.jpg",
"images": [
"https://cdn.dummyjson.com/product-images/1/1.jpg",
"https://cdn.dummyjson.com/product-images/1/2.jpg",
"https://cdn.dummyjson.com/product-images/1/3.jpg",
"https://cdn.dummyjson.com/product-images/1/4.jpg",
"https://cdn.dummyjson.com/product-images/1/thumbnail.jpg"
]
}
We may not need all fields from the response or have a naming structure for the data
representation in our front-end.
// ProductData now is:
interface ProductData {
id: number,
title: string,
description: string,
...
}
interface IProduct {
id: number,
title: string,
description: string,
thumbnail: string,
}
export abstract class ProductMapper<ProductData, IProduct> {
//we only require 4 fields in our Front-end
mapFrom(param: ProductData): IProduct {
return {
id: param.id,
name: param.info.name,
description: param.description,
thumbnail: param.thumbnail,
};
}
//we need to send back every field to the Back-end
mapTo(param: IProduct): ProductData {
return {
id: param.id,
title: param.title,
...
}
}
The Middle Man
Deserialize
https://dummyjson.com/products/1
return this._http.get(`this.url/products/`, { params: product_id }).pipe(
map( (response)=> {
const product_mapper = new ProductMapper();
return product_mapper.mapFrom(response);
}),
catchError( (error) => throwError(error)),
);
}
Serialize
https://dummyjson.com/products/add
return this._http.post(`this.url/products/add, { params: payload }).pipe(
map( (payload)=> {
const product_mapper = new ProductMapper();
return product_mapper.mapTo(payload);
}),
catchError( (error) => throwError(error)),
);
}
The implementation of a mapper allows for these types of changes to not have
a large impact, but scalable and future-proof systems.
SHALOM!
#Angular #WebDevelopment #CodingTips #TechTips #Programming #Code #Developer #SoftwareEngineering