DEV Community: Alisson Zampietro

Some Typescript definitions

Alisson Zampietro — Wed, 24 Jan 2024 14:30:33 +0000

...work in progress...

Return type

You are able to define the return type of the function that you're calling. You can check the Basic Types in this link. Later we are going to approach some more complex approches.
Example:

d.ts files

This file provides typescript type information about some API file written in JavaScript, been d standing for Declaration Files. So let's supose that you're consuming some external library function, and wants to know what's the return type of certain function

Generics

Let's use a function example. You know exactly the type that will be returned by that function, so thanks to generic, you can specify it instead of creating a function with static types.

// A generic function to create a Box holding a value of any type
function createBox<T>(value: T): { getValue: () => T, setValue: (newValue: T) => void } {
    let internalValue: T = value;

    return {
        getValue: () => internalValue,
        setValue: (newValue: T) => {
            internalValue = newValue;
        }
    };
}

// Example usage of the generic createBox function
const numberBox = createBox<number>(42);
console.log("Number Box Value:", numberBox.getValue());

const stringBox = createBox<string>("Hello, Generics!");
console.log("String Box Value:", stringBox.getValue());

// You can also use the same generic function for other types
const booleanBox = createBox<boolean>(true);
console.log("Boolean Box Value:", booleanBox.getValue());

Non-null assertion operator

TypeScript includes a non-null assertion operator, !, which you can append to the end of an expression when you are confident that the value will never be null or undefined. This allows you to bypass TypeScript's strict null checking for that specific value.

interface User {
  id: number;
  name?: string; // The name property is optional
}

const user: User = { id: 1, name: "John Doe" };

// TypeScript would normally complain here since name could be undefined,
// but we're sure it's initialized in this context.
console.log(user.name!.toUpperCase()); // Output: JOHN DOE

Tagged template literals

Template literals is nothing more than parsing variables into strings. And if you want to take advantage of this feature to create custom functions with a bunch of params to be parsable, you can do it.

// I can declare a function receiving two parameters: str (which is and Array of strings) and paramName (a string value)

function greeting(str: string[], paramName) {
 return str[0] + paramName + str[1]
}


let name = "Alisson"
console.log(greeting`Hi ${name} how are you?`)

The example above only handles one parameter. The example below fix the previous one by correctly handling multiple parameters.

//function definition
function capitalize(str:Array<any>, ...values:any) {
  console.log(str.length, values.length)
  return str.reduce((acc, str, i) => acc + str + (values[i] ?? '').toUpperCase(), '');
}

//function calling
let name = "Alisson"
let city = "Sao Paulo"
let learning = "Tagged template literals"
console.log(capitalize`Welcome ${name}, you live in ${city} and is trying to learn ${learning}`)

Testing Promise Rejection with Chai

Alisson Zampietro — Tue, 01 Feb 2022 15:57:19 +0000

I've been using chai to test my application, but today i faced a curious problem. I've been testing if the exception thrown in the try/catch matches with i expect, let’s check a snippet of my test code:

it('Test if validate the customer externalId', function() {
  let flawedCustomerArgs = [{
    name: 'John',
    details: 'test'
  }]

  // we need to bind the parameters flawedCustomerArgs, 
  // because in the execution context the cai method "expect"
  // will invoke the "importCustomer()" method
  chai
    .expect(ImportService.importCustomer.bind(ImportService, flawedCustomerArgs))
    .to
    .throw('Field externalId not defined for Customer');
})

But let's suppose that now i need my method importCustomer to be async, the snippet code above won't work, because it will return a promise and the exception that i'm expecting is coming in the Promise Rejection.

How can i get this rejection in the chai?

If we don't want to change our previous script too much, we can declare our rejection in the test file, like this:

it('Test if validate the customer externalId', function() {
  let flawedCustomerArgs = [{
    name: 'John',
    details: 'test'
  }]

  ImportService.importCustomer(flawedCustomerArgs)
    .then(result => (...))
    .catch(error => {
       chai
        .assert
        .equal(error, 'Field externalId not defined for Customer')

    })
})
...

But instead i used the chai-as-promised library, that allow us to get rid of writing expectations to promise in the test file and focus only in the result, like this:

const chai = require('chai');
const chaiAsPromised = require("chai-as-promised");
chai.use(chaiAsPromised);

it('Test if validate the customer externalId', function() {
  let flawedCustomerArgs = [{
    name: 'John',
    details: 'test'
  }]
  chai
    .expect(ImportService.importCustomer(flawedCustomerArgs))
    .to
    .be
    .rejectedWith('Field externalId not defined for Customer');
})

If you think that there's something confusing, or impacting the understanding, or that i can improve, please i'm going to appreciate your feedback.

See you guys and thanks a lot

How i fixed the circular dependency issue in my Node.js application

Alisson Zampietro — Wed, 30 Jun 2021 20:58:01 +0000

I'm going introduce you in a problem that maybe you've been through and some point in your node.js career.
Usually i split my business logic from anything else in my code (let's name it as a service), been my business layer responsible to trigger the resources that are required to make some action. Sometimes, one item in this business layer needs to use another one in the same layer.

Example:

CustomerService requires UserService to create the login credentials

and in another moment, UserService will call CustomerService to validate Customer profile.

Failure scenario:

|--/services/CustomerService.js



const UserService = require('./UserService')

class CustomerService{
    create() {
        UserService.create();
        console.log('Create Customer');
    }

    get() {
       return {
          name: 'test'
       }
    }
}

module.exports = new CustomerService;

|--/services/UserService.js



const CustomerService = require('./CustomerService')
class UserService {
    create() {
        console.log('Create user');
    }

    get() {
        let customer = CustomerService.get();
        console.log({customer});
    }
}
module.exports = new UserService;

|--/index.js



const CustomerService = require('./services/CustomerService');
const UserService = require('./services/UserService');

CustomerService.create();
UserService.get();

So, after implementing this code and run node index.js in your terminal, you gonna get the following error:

You may be thinking: WTF??? But this method does exist!!!!

Yes, that was my reaction. You're getting this error due the circular dependency, which happens when you create a dependecy between two modules, it means that we're importing and using UserService inside CustomerService and vice-versa.

How can we solve this? One possible solution.

We're going to load our modules in a centralized file called index.js, so after this, we're going to import only the index.js file and specify the Objects that we need to use.

Hands on:

1 - Create a index.js file inside the services folder (Attention: it's our crucial code snippet):

|--/services/index.js



const fs = require('fs');
const path = require('path');
const basename = path.basename(__filename);
const services = {};

// here we're going to read all files inside _services_ folder. 
fs
    .readdirSync(__dirname)
    .filter(file => {
        return (file.indexOf('.') !== 0) &&
                (file !== basename) &&
                (file.slice(-3) === '.js') &&
                (file.slice(-8) !== '.test.js') &&
                (file !== 'Service.js')
    }).map(file => {
        // we're are going to iterate over the files name array that we got, import them and build an object with it
        const service = require(path.join(__dirname,file));
        services[service.constructor.name] = service;
    })

    // this functionality inject all modules inside each service, this way, if you want to call some other service, you just call it through the _this.service.ServiceClassName_.
    Object.keys(services).forEach(serviceName => {
        if(services[serviceName].associate) {
            services[serviceName].associate(services);
        }
    })

module.exports = services;

2 - Let's create a Parent class that gonna be inherited by each service that we create.

|--/services/Service.js



class Service {
    associate(services) {
        this.services = services;
    }
}

module.exports = Service;

3 - Let's rewrite ou code to check how it's gonna be.

|--/services/CustomerService.js



const Service = require('./Service')
class CustomerService extends Service{
    create() {
        this.services.UserService.create();
        console.log('Create Customer');
    }
    get() {
       return {
          name: 'test'
       }
    }
}

module.exports = new CustomerService;

|--/services/UserService.js



// now you only import the Service.js
const Service = require('./Service.js')
class UserService extends Service{
    create() {
        console.log('Create user');
    }

    get() {
        // now we call the service the we want this way
        let customer = this.services.CustomerService.get();
        console.log({customer});
    }
}
module.exports = new UserService;

4 - now., let's see how we're going to call the services outside the services folder.



// now we only import the index.js (when you don't set the name of the file that you're intending to import, automatically it imports index.js)
const {CustomerService, UserService} = require('./services/')
// and we call this normally
CustomerService.create();
UserService.get();

PROS:

Now it's easier to load another service, without getting any circular dependecy error.
if you need to use a service inside other service, you just have to call the property this.service.NameOfTheService.

CONS:

It's not trackeable anymore by your IDE or Code Editor, as the import handler is inside our code and it's not straight in the module that you want to use anymore.
A small loss of performance due the loading of all modules, although some of them are not used.

If you think that there's something confusing, or impacting the understanding, or that i can improve, please i'm going to appreciate your feedback.

See you guys and thanks a lot

Handle multiple exceptions with try catch and Promise.all

Alisson Zampietro — Wed, 23 Jun 2021 13:36:26 +0000

Tools:

NodeJS: 12.20
sequelize: ^6.3.5

Scenario: I have to create one Cash Register record in the database and associate it's products and treatments items in another table.
Data Input: Array of objects containing productId, treatmentId and stuff

To help us ensure that all registers gonna be inserted successfully we're going to use the Sequelize's transactions.

The module called CashRegisterService.register() is responsible to create the record in the table CashRegister and delegate the insertion of it's ternaries tables (ProductLines and TreatmentLines).

Let's check how i planned my code in the beginning:

const CashRegisterService = {
    async register(data) {
        const t = await sequelize.transaction();
        data.map(register => {
            let cashRegister = await CashRegister.upsert(register, {transaction: t})
            if(!cashRegister) {
                throw new Error('Error when trying populate Cash Register')
            }

            this.associateProductLine(cashRegister[0], {...register, t});
            this.associateTreatmentLine(cashRegister[0], {...register, t});
        })

        t.commit();
    }
}

We can notice one thing: Even though we got an excepetion (related with the ternaries or even though the CashRegister model) we make the .commit(), because while the ternaries functions is running, the code move foward and reach the t.commit() code due to the Javascript's asynchronicity, so it's going to create a CashRegister record in the database but it's going to crash if there's some problem inside the assocation ternaries methods . Let's fix it adding the await:

const CashRegisterService = {
    async register(data) {
        const t = await sequelize.transaction();
        data.map(register => {
            let cashRegister = await CashRegister.upsert(register, {transaction: t})
            if(!cashRegister) {
                throw new Error('Error when trying populate Cash Register')
            }

            await this.associateProductLine(cashRegister[0], {...register, t});
            await this.associateTreatmentLine(cashRegister[0], {...register, t});
        })

        t.commit();
    }
}

Now i'm getting the error UnhandledPromiseRejectionWarning, and it's happening due i got a list of objects to insert using models CasgRegister, ProductLine and TreatmentLine, and as i told before that JavaScript is async, the commit runs before finish the object's list of insertion in the map function. To fix this problem, we're going to wrap the map function with the Promise function.

const CashRegisterService = {
    async register(data) {
        const t = await sequelize.transaction();
        await Promise.all(data.map(register => {
            let cashRegister = await CashRegister.upsert(register, {transaction: t})
            if(!cashRegister) {
                throw new Error('Error when trying populate Cash Register')
            }

            await this.associateProductLine(cashRegister[0], {...register, t});
            await this.associateTreatmentLine(cashRegister[0], {...register, t});
        }))

        t.commit();
    }
}

Now we're close, so our code only runs t.commit() after we run all promises in our code snippet inside the map function, and any exception can be handled by the caller. Remember that i make all validations inside the associates... functions, and if somethings is bad, i throw an exception that is handled by the register's caller function. We still have one problem, when we got some exception in the .register() method (our main method), we don't treat this with rollback, so we just have to add a .then() and a .catch().

const CashRegisterService = {
    async register(data) {
        const t = await sequelize.transaction();
        await Promise.all(data.map(register => {
            let cashRegister = await CashRegister.upsert(register, {transaction: t})
            if(!cashRegister) {
                throw new Error('Error when trying populate Cash Register')
            }

            await this.associateProductLine(cashRegister[0], register);
            await this.associateTreatmentLine(cashRegister[0], {...register, t});
        })).then(async result => {
            await t.commit();
        }).catch(async error => {
            await t.rollback();
            throw error;
        })
    }
}

If you think that there's something confusing, or impacting the understanding, or that i can improve, please i'm going to appreciate your feedback.

See you guys

Summing properties from a list of objects in JS

Alisson Zampietro — Thu, 15 Apr 2021 00:11:38 +0000

Let's assume that we have an array of objects called products with the following structure:

let products = [
  {
     "name": "Item 1",
     "price": 20,
     "vat": 4
  },
  {
     "name": "Item 2",
     "price": 40,
     "vat": 10
  }
]

-------- APPROACH 2025 -------------

You can simply use the array functionality reduce. Basically the reducer function receives 2 parameters:

acc: it's the result of the past iterations
cur: The current iteration of the array

Also you can notice we have a 0 value as second option, this is the initialValue of acc.

products.reduce((acc, cur) => (cur.price + cur.vat) + acc, 0)

-------- APPROACH 2021 -------------
So, if we want to sum all numbers (price+vat) let's make the following steps:

1-We call the map() function to generate an array with the numeric values that we want to sum:

products.map(
  product => ([product.vat, product.price])
)
// result: [[20, 4], [40, 10]]

2-We flatten the list with the method flat():

.flat()
// result: [20, 4, 40, 10]

3-We sum all values with the reduce() method:

.reduce((a, b) => a + b)
// result: 74

In the end we get this code:

let total = products.map(product =>([product.vat,product.price])).flat().reduce((a, b) => a + b)

Thank you!

Collections Laravel

Alisson Zampietro — Tue, 21 Jul 2020 13:31:39 +0000

Two years ago, i've started to work with Laravel. I've never had some previous experience with collections and neither eloquent, so, it's not a post about deep funcionalities, but some interesting parts that helps me to understant better how the engine works.

Collections

One of the aspects that most drew my attention in Laravel was the Collection object. One thing that bothers me about PHP array functions is the lack of patterns. In the example below you can see that both functions iterate the array, although the way that you implement the callback function and the params is different:

array_map($callback, $array);
array_filter($array, $callback);

As you are using an object when working with Collections, you don't need to worry about the callback position, since your base array is already defined in Object,

$array = new Collection([1,2,3,4);
$array->map($callback);
$array->filter($callback);

It looks better.

But the main reason why i'm in love with Collection, is that the Query Builder return a Collection. Let's checkout using the example below.
We're not digging in about database connection or something else, let's focus only on Collections feature.

<?php

use Illuminate\Database\Eloquent\Model;

class User extends Model
{
    /**
     * The attributes that should be visible in results.
     *
     * @var array
     */
    protected $visible = [
        'name',
        'email',
    ];
}

$user = User::where('enabled', true)->get();

Now $user variable is ready to use collections methods, because the ->get() calling returns a collection.

Using docker-compose to build a simple flask api

Alisson Zampietro — Mon, 20 Jul 2020 08:21:37 +0000

Today, i waked up with a great idea: Learn how to build a docker-compose from scratch.

Actually, on my linux machine, i don't have any development environment prepared to run something, because i've thinking about a big goal, that is run everything on docker. Yeap, i don't even wanna install any package manager. I don't have experience working with python, but i wanna use it to build my first environment.

If you have no idea what docker is, i recommend watch this video and this one that will give an overview of how docker works.

For installing the Docker follow the instructions and this one to install docker-compose.

What's docker compose?

In short, docker-compose works as a manager of docker containers. Let's supose that you are creating a web app where you are going to split it in 3 differents containers (front-end, api, database). This way, you may create a dockerfile for each environment individually.

What's our challenge?

We're going to create a python api using flask. I'm not used to develop in python, i've studied some features and you can checkout this on my github.

Hands-on

In this section i'm going to explain the structure, and our python application associated files.

Let's create our directory structure:



 - api-nasa/
    - requirements.txt
    - app.py
    - Dockerfile
 - docker-compose.yml

The file api-nasa/requirements.txt represents the list of external libraries that is going to be used, in our case we only need the flask library:



flask

I don't want to dig in details about our api-nasa/app.py implementation for now, for that, i'm just creating a basic endpoint and you can see some details in the code's comments:



import os
from flask import Flask, jsonify
app = Flask(__name__)

#we define the route /
@app.route('/')
def welcome():
    # return a json
    return jsonify({'status': 'api working'})

if __name__ == '__main__':
    #define the localhost ip and the port that is going to be used
    # in some future article, we are going to use an env variable instead a hardcoded port 
    app.run(host='0.0.0.0', port=os.getenv('PORT'))

Dockerhub

It's an image's repository, where you can register your own image. Let's say that you want to Download a image from Node JS, you only need to run the following command: docker pull node. After that,to check if image is there, just run docker images.

Dockerfile

Let's see the Dockerfile as a recipe, where from that, it's going to be built the os image.



FROM python:3.6
RUN mkdir /usr/src/app/
COPY . /usr/src/app/
WORKDIR /usr/src/app/
EXPOSE 5000
RUN pip install -r requirements.txt
CMD ["python", "app.py"]

Let's check each line:



FROM python:3.6

We set the image that we wanna use, in our case lets
use the python in version 3.6. If the image is not downloaded in your computer (open the terminal and type docker images), it's going to search and download on DockerHub. This part is really interesting, because this dockerfile, won't generate a container, but an image, and you can upload to docker hub to use in the future.



RUN mkdir /usr/src/app/

Run is used to run operations inside the container, for sample, if you want to install any additional program, you just use the command RUN apt-get install whatever -y. In this case, we're creating the folder where our application will run in the container.



COPY . /usr/src/app/

It's going to copy everything from ./ local directory and move to /usr/src/app/ host directory.



WORKDIR /usr/src/app/

It sets the path where the CMD and the RUN commands will run.



EXPOSE 5000

Exposes the port 5000 of the container to be external accessed.



RUN pip install -r requirements.txt

Executes when the image is been generated. It works for when you want to install something in the image.



CMD ["python", "app.py"]

It sets the command that's going to run when the container starts. We've defined the startup of our application. Maybe you can ask: Why not put this command in the previous RUN? It's because this command only runs when container start, let's say that it's the entrypoint of container.

docker-compose

Here where the magic start to happens. We're going to dig in details about implementation. How you can see in the file, we have identation because we're using YAML files, so, if the instruction have some properties then the bottom line is more indented.



version: '3.8'
services: 
    api-service:
        build: ./api-nasa/
        volumes: 
            - ./api-nasa/:/usr/src/app/
        ports: 
            - 5000:5000
        environment: 
            PORT: 5000
            FLASK_DEBUG: 1

Let's check each line:



version: '3'

here you define the version of docker-compose that you're using. Actually the current is the 3.



    api-service:

It's our api service.



        build: ./api-nasa/

In this section, we say to docker-compose the path where our Dockerfile is.



        volumes: 
            - ./api-nasa/:/usr/src/app/

Volumes are the way that we sync the files in our local computer to our containers. We can define volumes in Dockerfiles but only if you're handling container straight, but,how the handler of our container is docker-compose, we are defining them here.



        ports: 
            - 5000:5000

We've talked about PORTS in Dockerfile, but here we can set a port on our localhost where you can access the container. Really cool, not? Basically we are saying: "Listen the port 5000 in our container and set the port 5000 to your localhost".



        environment: 
            PORT: 5000
            FLASK_DEBUG: 1

It's really interesing, you can define environment variables and get them in the language that you're going to use. You can checkout in the python file api-nasa/app.py the code snippet os.getenv('PORT').

After everything is ready, let's run our docker-compose file.



    docker-compose up

This should be the result:

To check if it's working, acess the url http://localhost:5000 in your browser.

You can checkout the project on my github. See you folks.