Forem: Meysam Faghfouri

Builder pattern in javascript

Meysam Faghfouri — Mon, 09 Nov 2020 06:55:04 +0000

One of the most used patterns in the software development world is Builder pattern which is under the Creational category of design patterns.

The philosophy of this pattern is to separate between an object and its creating process especially for those objects which are complex and need more steps and complex validations to be created so we need to breakdown these steps and transfer them into another place. By doing so, we can have more control over the object's creation process and the validity of it, and more importantly, we will have a simple code to test and read and maintain.

Another benefit that we can get from this pattern is that by using it, as we decoupled the higher-level components from the object's direct constructor, in case of needing to add or remove steps to the process of building we can do it in just one single point, and we don't have to worry about the different ways of creating the object in different components.

Let's get started with a very simple code in javascript. Consider bellow code:

var PersonBuilder = (function () {
    _person = {}; //Imagine this is a complex object and needs a variety of validations
    function PersonBuilder() {}; //constrcutor

    PersonBuilder.prototype.setName = function (name, family) {
        if (!name)
                throw new Error('Parameter "name" should not be null');
        if (!family)
            throw new Error('Parameter "family" should not be null');
        _person.name = name;
        _person.family = family;
        return this;
    };

    PersonBuilder.prototype.setAge = function (age) {
        if (age <= 0)
            throw new Error('Age is not valid');
        _person.age = age;
        return this;
    };

    PersonBuilder.prototype.checkPersonValidation = function () {
        if (_person.age == undefined)
            throw new Error("the Age of the person has not been set. Please use 'setAge' before getting the person object");
        if (!_person.name || !_person.family)
            throw new Error("the name and family of the person have not been set. Please use 'setName' before getting the person object");
    };

    PersonBuilder.prototype.getPerson = function () {
        this.checkPersonValidation();
        return _person;
    };
    return PersonBuilder;
}());

Now we have:

let builder = new PersonBuilder();

builder.setAge(30);
builder.setName("foo", "fighters");
//Or we can use it as chaining way like this
builder.setAge(30).setName("foo", "fighters");

let person = builder.getPerson();
console.log(person)
/* 
{
  age: 30,
  family: "fighters",
  name: "foo"
}
*/

If you use invalid parameters or skip one of those steps you will get this result for example:

let builder = new PersonBuilder();

builder.setAge(30);
let person = builder.getPerson();
//Uncaught Error: the name and family of the person have not been set. Please use 'setName' before getting the person object"

Of course, the 'person' here is an elementary object because I kept this in this way for the sake of simplicity but when the destination object is complex, this pattern will become very handy.

I hope you now have a better understanding of this pattern and please leave a comment if you have any suggestion.

publish/subscribe pattern in javascript

Meysam Faghfouri — Tue, 20 Aug 2019 08:53:04 +0000

There are a lot of design patterns in programming world and each of them has been invented to solve some specific problems which we may face with during coding.

One of the interesting of them is 'publish/subscribe' pattern that gives us the ability to separate different module/component from each other and send/receive messages from them without any tightly coupled relation or even needing to know about each other.

I implemented a very simple library in javascript by using above concept and definition and I think it can be used as something like a little state management in component-based applications and I would like to share my experience and understanding with all of you

note: I know there are a lot of powerful libraries to do state management and pub/sub pattern but I believe that creating something based on concepts can help us to learn and understand it deeply :)

so let's start it.

First of all, we need a central object to register our subscribers or remove them from the list of subscribers and decide which subscribers should receive the messages when a publisher sends a message. also, we need to define our methods and subscribers' holder as static because we don't want to create a new one of this central object whenever we want to use it.
something like this:

var PubSub = (function () {
    function PubSub() {
    }
    PubSub.subscribe = function (eventName, func) {
        this.initDic(eventName);
        this.dic[eventName].push(func);
    };
    PubSub.unsubscribe = function (eventName, func) {
        this.initDic(eventName);
        this.dic[eventName] = this.dic[eventName].filter(function (x) { return x != func; });
        if (!this.dic[eventName].length) {
            delete this.dic[eventName];
        }
    };
    PubSub.publish = function (eventName, data) {
        this.initDic();
        if (this.dic[eventName])
            for (var _i = 0, _a = this.dic[eventName]; _i < _a.length; _i++) {
                var func = _a[_i];
                func(data);
            }
    };
    PubSub.initDic = function (eventName) {
        if (!this.dic) {
            this.dic = {};
        }
        if (eventName && !this.dic[eventName]) {
            this.dic[eventName] = [];
        }
    };
    PubSub.dic = null;
    return PubSub;
}());

Then imagine we have two object called customer and manager and the customer wants to listen to a special event like this:

const pubsub = require('./PubSub');

const customer = function(name) {
    this.name = name;

    function emailReceiver(data) {
        alert(`${this.name} -- I received an email from ${data.sender}, content: ${data.content}`);
    }
    PubSub.subscribe(`receiveEmail${this.name}`, emailReceiver.bind(this));
}

const manager = function(name) {
    this.name = name;

    this.sendMessage = (customerName, content) => {
        PubSub.publish(`receiveEmail${customerName}`, {
            sender: this.name,
            content: content
        });
    }
}

And the manager wants to send an email to a specific customer like this:

let jack = new customer('Jack');
let eli = new customer('Eli');

let manager1 = new manager('Boss');

manager1.sendMessage('Jack', 'you should prepare a report until tomorrow!');
manager1.sendMessage('Eli', 'call me!');

I've created a JSFiddle and you can see the result

That's it! I hope it helps you to better understand the basic concept of this pattern.

Decorator pattern in javascript

Meysam Faghfouri — Sun, 19 May 2019 10:03:07 +0000

One of the interesting patterns in the programming world is the decorator pattern.
this is a definition which I've taken from Wikipedia.
"In object-oriented programming, the decorator pattern is a design pattern that allows the behaviour to be added to an individual object, dynamically, without affecting the behaviour of other objects from the same class."
we can use that to add some extra behaviour in our methods for example logging, measuring running time, prevent special input to send to the functions and etc.
I myself used this pattern several times in my own back-end projects with C# but I was excited to create a simple library to do this in javascript so I decided to share my experience with you.
First of all, I've created a repository for this library and you can access the code via this link:
https://github.com/mfaghfoory/javascript-object-decorator

there is a simple function called 'decorate' inside js-decorator.js file and it takes 5 parameters (four of them are optional) and returns a decorated object.

decorate(object, [beforeCall], [afterCall], [onCall], [onException])

For example, imagine we have an object like this:

let product = {
  name: "tv",
  price: 600,
  printInfo() {
    console.log(`${this.name}-${this.price}$`);
  },
  logToDb() {
    //send this object to DB
  }
};

and we want to log some functions result or measure its running time so we can create our hook functions like this and pass them to 'decorate' function:

let beforeCall = res => {
};
let afterCall = res => {
};
let onCall = res => {
};
let onException = error => {
};
product = decorate(product, beforeCall, afterCall, onCall, onException);

For example:

let beforeCall = res => {
  console.log("before call:" + JSON.stringify(res));
  console.time();
};
let afterCall = res => {
  console.log("after call:" + JSON.stringify(res));
  console.timeEnd();
};
let onCall = (func, args) => {
  //can modify the result like this:
  //let res = func(args);
  //return '--' + res + '--'
};
let onException = error => {
  //log error to db
};
product = decorate(product, beforeCall, afterCall, onCall, onException);
product.printInfo();

//Result:

//before call:{"method":"printInfo","args":[],"object":{"name":"tv","price":600}}
//tv-600$
//after call:{"method":"printInfo","args":[], result: undefined,"object":{"name":"tv","price":600}}
//default: 0.291015625ms

I've just created this library so feel free to give your suggestions and I'll be happy to apply your good ideas in the repository.

Happy coding :)

Implementing a simple micro-service infrastructure using ASP.NET core and Ocelot

Meysam Faghfouri — Wed, 17 Apr 2019 11:28:16 +0000

Today, I'm going to create a microservice infrastructure using asp.net core and Ocelot.
as you probably know, microservice architecture brings us a lot of benefits as we can have separated services, for example, ProductService, SaleService, AdministrationService and etc, we can dedicate separated teams to them and even we can use different stack of technologies and tools behind them for instance maybe we want to design and implement EmailServices that uses PHP while the core part of our application has been created in .Net platform.
by using microservice architecture, we can completely isolate them and another benefit that we reach that is scaling the services. Imagine we have a SaleService that encounters with a lot of requests. The server which hosted it, after some time can't respond to the end users. so, if our architecture and infrastructure were microservice, we could run and bring up that service on different server instead of increasing the main server's memory or CPU.
you can read about monolithic and micro-services architectures here.
https://articles.microservices.com/monolithic-vs-microservices-architecture-5c4848858f59

this is an abstract picture for infrastructure that I'm going to create. Truly not exactly like this but you can get inspiration from that to create something like this.

Actually, I’m going to create two services called "ProductService" and "EmailService"
I'll use ocelot library for API Gateway layer. You can read all the documentation about that by the link below and I’ll try to use the minimum options for this sample project for more clarification.
https://ocelot.readthedocs.io/en/latest.
This is my project structure

OK, we have three projects here. First of all, "MainWebApp" acts as our API Gateway and it redirects requests to other services. So, our entry point of the app would be this project and the end users send their requests to this app rather than directly Email service or Product service. Maybe you want to prevent users to be connected directly with sub-services for many reasons. Imagine you have several instances from each service and they are running on different machines with different URLs and ports and you want to have a load balancer in front of them so you should prevent users to see sub service’s path by applying network rules. Then you’ll have one entry point (called API gateway) and all of the end users will have communications with this one.
I’ve uploaded this project on Github and you can see that by the link below.
https://github.com/mfaghfoory/SimpleMicroservices
If you have decided to look at that and give it a try, first of all, you should run service projects and then run MainWebApp. And you’ll have access services through these URLs:
localhost:4110/ProductService/product,
localhost:4110/EmailService/email
Based on routes definitions in ocelot.json file in MainWebApp project.
And finally, I’ll be happy to see any comment and questions about my first try on dev.io