Factory models in Angular
Hi, my name is Martin. I’ve been developing in Angular for a few years. I had the luck (or not?) to start all the projects I’ve worked from scratch.
When the front and backend teams were different, I always fell in a common mistake, we typed our classes in the frontend but then for no reason, the properties in the backend changed, and that means that we had to change those properties in our model, and then in all the places where we used these properties. This is an annoying task and if you aren’t typing something could be cumbersome, also it is easily to introduce errors and may be you will have to re-test many parts of your application to ensure that everything is working fine.
So, what can we do?
Factory models to the rescue!
The idea behind a factory model is work with classes such properties are agnostic of the properties from the backend. So if a property from the backend changes, you only have to modify the map in the factory. I will explain this in detail now.
Suppose that we have a Product class like this:
So with that model, if for example, the img property changes to imageUrl we have to change here in the class and also in all the places that we use that property. To avoid that, we are going to create a factory for the product model.
First of all we set a constructor for our class:
We pass an object data with the properties through the constructor because these help us later with the factory to avoid boilerplate using the spread operator.
Now, we are going to add the Factory, A factory consists of essentialy on three methods:
mapToApi
mapFromApi
mapArrayFromApi
So the factory looks like as follows:
Well this is our factory, I start explaining the mapFromApi method, we pass all the properties coming from backend with the spread operator, also for all the properties that are different we create a new constant with the name of our property and assign the backend property. We pass all throught the constructor of our model, and thanks to the constructor accept an object and map his properties, we omit the properties that don’t match with our class.
The method mapArrayFromApi is very straightforward and I think that doesn’t need explanation.
In the mapToApi method we have to do the opposite that we do with mapFromApi. Now an advice, you can use the spread operator as we use before but here means that the properties will be passed anyways in the object that we send to the backend.
At the moment, the Product class is very simple, what if our class also has another classes as a property? How we map those properties? Well, the solution is easy, we have to create a factory of the other class and use it to map the properties.
For example, suppose that a product has a Category class as property as follows:
So, the factory looks like:
Conclusions
you should now be able to manage your classes in an agnostic and centralized way. I know that this is something basic and maybe you already know it, but for me meant a huge improvement in my code.
I hope that would be useful for you too :-)
