DEV Community: Marcelo Cabral Ghilardi

Architecture and Technologies of Acertpix

Marcelo Cabral Ghilardi — Sun, 16 Jul 2023 12:05:15 +0000

Hey guys, I created a page with the architecture and technologies of Acertpix, I love talking about it, both to learn and to help!

linkedin.com/posts/marceloc…

(Survey) Which framework is your favorite?

Marcelo Cabral Ghilardi — Tue, 28 Dec 2021 15:49:11 +0000

https://www.linkedin.com/posts/marcelocabralghilardi_deeplearning-machinelearning-keras-activity-6881619202071953408-mjkY

Por que e quando usar Promise?

Marcelo Cabral Ghilardi — Mon, 30 Mar 2020 21:15:02 +0000

Oi Pessoas

Neste post vou explicar por que e quando devemos usar Promise, para isso, dividi nos seguintes tópicos:

Fluxo de código
old-style
Poder do Assíncrono
Promises
THEN encadeado para tratar os dados
O Poder do assíncrono com Promise

Fluxo de Código

Todos devemos saber que boa parte de nosso código JS é assíncrona, principalmente chamadas ao servidor. Isto é, não podemos garantir o fluxo de nosso código.
Por exemplo:

console.log("INICIO");

$.ajax('http://domain/service-1')
    .done(function (data) {
        console.log("chamada 01", data);
    })

$.ajax('http://domain/service-2')
    .done(function (data) {
        console.log("chamada 02", data);
    })

$.ajax('http://domain/service-3')
    .done(function (data) {
        console.log("chamada 03", data);
    })

console.log("FINAL");

No exemplo acima o resultado na tela, após o "INICIO", pode ser qualquer um, deve aparecer algo como:

INICIO
chamada 03
FINAL
chamada 01
chamada 02

Um trecho de código que está localizado após uma função assíncrona pode ser executado antes da mesma ter sido realizada, e quando temos mais de uma função assíncrona, não podemos garantir seu fluxo ordenado.

old-style

Para garantir o fluxo, podemos adotar várias alternativas, uma das alternativas mais usadas é encadear as chamadas, por exemplo:

console.log("INICIO");

$.ajax('http://domain/service-1')
    .done(function (data) {
        console.log("chamada 01", data);

        $.ajax('http://domain/service-2')
            .done(function (data) {
                console.log("chamada 02", data);

                $.ajax('http://domain/service-3')
                    .done(function (data) {
                        console.log("chamada 03", data);

                        console.log("FINAL");
                    })
            })
    })

No exemplo acima, podemos garantir o fluxo, mas o problema, nesta modelo, é que perdemos o poder do assíncrono.

Poder do Assíncrono

O que chamo de Poder do Assíncrono é o fato que quando fazemos chamadas para um servidor, muitas vezes podemos ter vários retornos simultâneos, deixando a leitura de nossa página muito mais rápida.

Veja a imagem abaixa, são 4 chamadas assíncronas ao servidor, a primeira levou 393ms, a segunda 1.53s, a terceira 1.55s e a última 1.51s. O tempo total para as 4 chamadas foi de menos de 2s, isso porque foram chamadas assíncronas.

Agora, neste mesmo exemplo acima, se as chamadas não fossem assíncronas, o tempo total seria de 4.98s, mais que o dobro, este é o Poder do Assíncrono.

Promises

Promise é um método para executar processos assíncronos. Um Promisse possui os estados pendente, realizado, rejeitado, finalizado.

A sintaxe padrão de um Promisse é:

     var novaPromessa = new Promise((resolve, reject) => { ... });

     novaPromessa
        .then( (data) => {...} )
        .catch( (erro) => {...} )

Onde:

ao criar, a situação equivale a pendente
se preencher resolve, a situação equivale a realizado e executa o then
se preencher reject, a situação equivale a rejeitado e executa o catch
se adicionar mais um then após o catch, a situação equivale a finalizado, podendo adicionar then e catch encadeados.

Vamos para o primeiro exemplo, no exemplo abaixo, simulamos a chamada de leitura de clientes (poderia ser uma chamada $ajax ou fetch), o retorno da chamada atribuímos a resolve, neste caso o método em then recebe os dados informados no resolve.

console.log("Inicio");

var processos = new Promise((resolve, reject) => {

    setTimeout(() => {
        console.log("leituraClientes: simulação de chamada em 1 segundo");
        var dadosRetornados = "cliente JOÃO"

        resolve(dadosRetornados);
        //reject("Deu erro");
    }, 1000);

}).then((dados) => {
    console.log("then:",dados);

}).catch((erro) => {
    console.error("catch:", erro);
});

Resultado:

Inicio
leituraClientes: simulação de chamada em 1 segundo
then: cliente JOÃO

Poderia ter dado um erro na chamada, os dados poderiam ser inválidos, para simular podes comentar a linha do resolve e descomentar a linha do reject.

console.log("Inicio");

var processos = new Promise((resolve, reject) => {

    setTimeout(() => {
        console.log("leituraClientes: simulação de chamada em 1 segundo");
        var dadosRetornados = "cliente JOÃO"

        //resolve(dadosRetornados);
        reject("Deu erro");
    }, 1000);

}).then((dados) => {
    console.log("then:",dados);

}).catch((erro) => {
    console.error("catch:", erro);
});

Resultado:

Inicio
leituraClientes: simulação de chamada em 1 segundo
catch: Deu erro

Note que, a informação que colocar no resolve ou reject vai para o then ou catch, respectivamente.

THEN encadeado para tratar os dados

As vezes, ao receber dados do servidor, precisamos tratar os dados, filtrar, modificar, etc.... Neste caso, podes fazer um código enorme, ou quebrar o código em partes.

Esta característica não é do Promise, mas achei importante demonstrar.

No exemplo abaixo, ao receber os dados da chamada, passa por vários *then*s até finalizar todo processo.

console.log("Inicio");

var erro ;
//erro = true;

var leituraClientes = new Promise((resolve, reject) => {

    console.log("L01: Buscando clientes");
    dados = "CLIENTE 01; CLIENTE 02; CLIENTE 03";

    setTimeout(() => {

        if (erro)
        reject("DEU ERRO");

        console.log("Dados recebidos: ", dados);

        resolve(dados);
    }, 1000);

}).then((dados) => {
    console.log("");
    console.log("L02 toLower");
    console.log("Dados recebidos: ", dados);

    dados = dados.toLowerCase();
    console.log("Dados enviados: ", dados);

    return dados


}).then((dados) => {

    console.log("");
    console.log("L03 split");
    console.log("Dados recebidos: ", dados);

    dados = dados.split(";")
    console.log("Dados enviados: ", dados);

    return dados

}).then((dados) => {

    console.log("");
    console.log("Resultado Final");
    console.log("Dados recebidos: ", dados);

}).catch((erro) => {
    console.error("ERRO:", erro);
});

Resultado

Inicio
L01: Buscando clientes
Dados recebidos:  CLIENTE 01; CLIENTE 02; CLIENTE 03

L02 toLower
Dados recebidos:  CLIENTE 01; CLIENTE 02; CLIENTE 03
Dados enviados:  cliente 01; cliente 02; cliente 03

L03 split
Dados recebidos:  cliente 01; cliente 02; cliente 03
Dados enviados:  [ 'cliente 01', ' cliente 02', ' cliente 03' ]

Resultado Final
Dados recebidos:  [ 'cliente 01', ' cliente 02', ' cliente 03' ]

Você pode simular um erro descomentando a linha com o texto: //erro = true;. O resultado será:

Inicio
L01: Buscando clientes
Dados recebidos:  CLIENTE 01; CLIENTE 02; CLIENTE 03
ERRO: DEU ERRO

O Poder do assíncrono com Promise

Esta é a parte mais importante deste post, se temos várias chamadas, queremos fazê-las de forma assíncrona, mas ao mesmo tempo, preciso garantir que todas foram finalizadas antes de iniciar um processo (uma tela por exemplo).

Para isso podemos usar o Promisse.all, este método garante que só vai executar o then se todas as chamadas estiverem finalizadas e sem erros. A sintaxe é:

Promise.all([chamadas,...]).then( (retornos) => {...} )*.

A forma de usar é criar todos os Promises necessários, e chamá-los todos a partir do método, exemplo de código:

var clientes = new Promise((resolve, reject) => { resolve("clientes") })
var departamentos = new Promise((resolve, reject) => { resolve("deptos") })
var equipes = new Promise((resolve, reject) => { resolve("equipes") })
var teste = new Promise((resolve, reject) => { resolve("teste") })

Promise.all([clientes, departamentos, equipes, teste]).then( (values) => {
    console.log("Resultados:", values);
}).catch((erro) => {    
    console.error("ERRO", erro)
})

No exemplo acima, após todas as chamadas terminarem, os valores de retornos das chamadas são atribuídas à values no método then do Promise.all. Caso algum método retornasse erro, executaria o catch do Promise.all

Também existe o Promise.race, é exatamente uma corrida entre as chamadas. A primeira chamada que resolver ou rejeitar ganha a corrida, e as demais são ignoradas.

Fonte: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Promise

Repositório com os códigos: https://github.com/kabrau/publications/tree/master/Promises

Arrow Functions (ou funções de seta)

Marcelo Cabral Ghilardi — Wed, 26 Feb 2020 02:09:40 +0000

Oi Pessoas

A nova (nem tão nova) versão de javascript ES6 trouxe as arrow functions. São uma nova forma de criar funções utilizando setas () => {}.

Poderia dizer que arrow functions substitui as functions, mas é bem mais que isso, é uma forma com sintaxe mais curta e elegante para criar funções. Além disso, nem sempre elas podem ser usadas.

Neste post, além de explicar a sintaxe, vou explicar as diferenças de escopo.

IMPORTANTE: Todos os exemplos podem ser executados no console do Navegador, no Chrome, tecle (Ctrl + Shift + J)

IMPORTANTE: Leia no final deste post onde não devem ser usadas as arrow functions

Sintaxe

A sintaxe para criação de arrow functions possui 3 partes () => {}:

Os parênteses (), que é por onde a função recebe os argumentos (assim como na function tradicional);
A seta =>, responsável pelo nome “arrow” function;
E as chaves {}, o bloco de código que representa o corpo da função.

Em algumas situações os parênteses () as chaves {} são opcionais

Antes, escrito com function tradicional

hello = function() {
  return "Hello World!";
}
hello() // Hello World!

Agora escrito em com arrow function

hello = () => {
  return "Hello World!";
}
hello() // Hello World!

A princípio não parece muita vantagem, apenas a sintaxe mais curta, a keyword function foi suprimida. Mas podemos deixar mais curta ainda

hello = () => "Hello World!";
hello() // Hello World!

No exemplo acima, além de suprimir a keyword function, também foi suprimida a keyword return e as chaves {}

Sintaxe com parâmetros

Exemplo de uma função de soma, recebendo dois parâmetros e retornando a soma

Antes, escrito com function tradicional

sum = function (a, b) {
  return a + b
}
sum(10,20) // 30

Agora escrito em com arrow function

sum = (a, b) => {
  return a + b
}
sum(10,20) // 30

Podemos deixar mais curta ainda

sum = (a, b) => a + b
sum(10,20) // 30

Se tivermos apenas um parâmetro, podemos escrever sem os parênteses (), exemplo:

soma10 = a => a + 10
soma10(20) // 30

Retornar Objetos Literais

As arrow functions podem ser usadas para retornar uma expressão de objetos literais com uma sintaxe bem mais enxuta _(neste caso, o corpo sempre precisa ser colocado entre parênteses).

//Escrito com function tradicional
var setNameIdsEs5 = function setNameIds(id, name) {
  return {
    id: id,
    name: name
  };
};

//Escrito em com arrow function
var setNameIdsEs6 = (id, name) => ({ id: id, name: name });

console.log(setNameIdsEs6 (4, "Kyle"));   // Object {id: 4, name: "Kyle"}

Manipulação de array com map ou reduce

Um caso comum para arrow functions é na manipulação de array, é comum que você precise mapear (map) ou reduzir (reduce) arrays

Assim que der, vou fazer um post sobre manipulação de arrays

Vamos criar um array simples

const smartPhones = [
  { name:'iphone', price:649 },
  { name:'Galaxy S6', price:576 },
  { name:'Galaxy Note 5', price:489 }
];

Agora vamos criar uma matriz de objetos com apenas os preços dos smartphones

//Escrito com function tradicional
var pricesFunc = smartPhones.map(function(smartPhone) {
  return smartPhone.price;
});

console.log(pricesFunc); // [649, 576, 489]


//Escrito em com arrow function
const pricesArrow = smartPhones.map(smartPhone => smartPhone.price);

console.log(pricesArrow); // [649, 576, 489]

Outro exemplo, agora usando o método filter dos arrays

const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];

//Escrito com function tradicional
var divisibleByThrreeES5 = array.filter(function (v){
  return v % 3 === 0;
});

//Escrito em com arrow function
const divisibleByThrreeES6 = array.filter(v => v % 3 === 0);

console.log(divisibleByThrreeES6); // [3, 6, 9, 12, 15]

Um exemplo com reduce, neste caso a soma de todos elementos

var arr = [5, 6, 13, 0, 1, 18, 23];

var sum = arr.reduce((a, b) => a + b);  
console.log(sum ); // 66

Promises e Callbacks

Códigos que usam promises e chamadas assincronas (callbacks) geralmente possuem uma grande quantidade de function e return

Assim que der, vou fazer um post sobre Promises

Se escrevermos com funções modernas, nós atribuímos nossas callbacks às promises retornadas, formando uma cadeia de promise:

//Escrito com function tradicional
doSomething().then(function(result) {
  return doSomethingElse(result);
})
.then(function(newResult) {
  return doThirdThing(newResult);
})
.then(function(finalResult) {
  console.log('Got the final result: ' + finalResult);
})
.catch(failureCallback);

Os argumentos para then são opcionais, e catch(failureCallback) é uma abreviação para then(null, failureCallback).
Agora, escrevendo o mesmo código com arrow functions:

//Escrito em com arrow function
doSomething()
.then(result => doSomethingElse(result))
.then(newResult => doThirdThing(newResult))
.then(finalResult => {
  console.log(`Got the final result: ${finalResult}`);
})
.catch(failureCallback);

Particularmente, eu vejo o código em arrow functions muito mais simples para ler, além de mais elegante.

Podemos substituir todas as function por arrow function? NÃO

Poderíamos pensar que sim, mas não é bem assim, um dos principais motivos é o uso da palavra chave this.

Tenho um post onde explico sobre this

'this' em Javascript

Marcelo Cabral Ghilardi ・ Feb 25 '20

#javascript #webdev #fullstack #beginners

Diferente das function tradicionais, você não consegue injetar o this em arrow functions. Isso mesmo!

Se o this for usado dentro de uma arrow functions, esse this vai fazer referência ao objeto que ele já era referência no momento da criação da arrow function.

Vamos comparar, se criarmos um objeto com dois métodos, ambos métodos acessam this, um criado por function tradicional (correrFunc) e outro por arrow function (correrArrow).

pessoa = {
    nome: "Cebolinha",

    correrFunc: function() {
         console.log(this);
    },

    correrArrow: () => console.log(this)
}
pessoa.correrFunc() // => Object {nome: "Cebolinha", correrFunc:, correrArrow: }
pessoa.correrArrow() // => Window

O método correrFunc retorna o próprio objeto e o método correrArrow retorna o objeto window. Isso ocorre porque no momento da criação do objeto, o escopo era do window (mesmo que usasse o 'use strict', veja meu post sobre this).

Arrow functions não tem acesso aos arguments

Pelo mesmo motivo do this, arrow functions não tem acesso aos arguments, isto é, teria acesso a arguments globais e não ao contexto local.

// Traditional function
var crescente = function() {
  return Array.from(arguments).sort((a, b) => a > b)
}
crescente(3,2,5,1,4,8,7,6); // Array [ 1, 2, 3, 4, 5, 6, 7, 8 ]


// Arrow function
var crescente = () => {
  return Array.from(arguments).sort((a, b) => a > b);
}
crescente(3,2,5,1,4,8,7,6); // Exception: ReferenceError: arguments is not defined

Uma solução para usar arrow functions neste caso seria usar o spread operator, para criar uma função com REST params, desta forma

// Arrow function com spread operator
var crescente = (...arguments) => {
  return Array.from(arguments).sort((a, b) => a > b);
}
crescente(3,2,5,1,4,8,7,6); // Array [ 1, 2, 3, 4, 5, 6, 7, 8 ]

Arrow functions não podem ser usadas como constructor

As arrow functions não podem ser usadas como construtores, não pode usar o operador new para criar uma nova instância de objeto.

// Traditional function
const ConstrutorFunc = function () {};
new ConstrutorFunc(); // Object { }

// Arrow function
const ConstrutorArrow = () => {};
new ConstrutorArrow(); // Constructor is not a constructor

Mais um exemplo de quando NÃO devemos usar arrow functions

Outro caso que é bem comum são em eventos, o método addEventListener sempre injeta o this, mas para acessar o this precisamos usar function tradicional.

Veja o exemplo:

const $input = document.querySelector('input[type="text"]')
$input.addEventListener('input', function () {
  console.log('value:', this.value)
}, false)

Assumindo que exista um campo input, ao começar a digitar algo dentro desse campo, podemos ver o valor do campo sendo exibido no console, pois o this dentro da função passada como listener do evento é injetado pelo addEventListener, fazendo referência ao objeto do DOM ao qual o evento foi atrelado.

Agora tente usar uma arrow functions no lugar da function tradicional

const $input = document.querySelector('input[type="text"]')
$input.addEventListener('input', () => {
  console.log('value:', this.value)
}, false)

Nesse caso, veja que o valor exibido no console é sempre undefined (a menos que exista um objeto no escopo em que a função foi criada, e esse objeto tenha uma propriedade value).

Considerações

se a função que você tem não depende de this, você pode substituir por arrow functions sem problemas;
evite usar o this. No caso do exemplo do evento, toda função listener de um evento recebe um objeto de evento, com uma propriedade target, que faz referência ao elemento que recebeu o evento. Use esse objeto se precisar manipular ou fazer qualquer coisa com o elemento que disparou o evento, ao invés de usar this. Dessa forma você evita os problemas vistos acima;
Arrow functions não tem acesso aos arguments como as functions tradicionais.
Arrow functions não podem ser usadas como construtor, não podemos aplicar o operador new;
Exceto pelo this, new e arguments, todas as demais functions tradicionais podem ser trocadas por arrow functions.

Perdi Algo?

Por favor, me diga se eu esqueci de algo!!

Obrigado a Vinicius Da Mata Pickrodt pela correção deste post.

Referências

^{- https://raphaelfabeni.com/es6-arrow-functions/}
^{- https://medium.com/@raphalima8/arrow-functions-declara%C3%A7%C3%A3o-funcionamento-escopos-e-o-valor-de-this-9cb6449bca31}
^{- https://blog.da2k.com.br/2019/01/07/javascript-tudo-sobre-arrow-functions/}
^{- https://www.sitepoint.com/es6-arrow-functions-new-fat-concise-syntax-javascript/}
^{- https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Functions/Arrow_functions}
^{- https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Usando_promises}
^{- https://medium.com/@raphalima8/arrow-functions-declara%C3%A7%C3%A3o-funcionamento-escopos-e-o-valor-de-this-9cb6449bca31}
^{- https://medium.com/frontend-quest/arrow-functions-vs-functions-9048ec12b5c6}

'this' em Javascript

Marcelo Cabral Ghilardi — Tue, 25 Feb 2020 22:13:10 +0000

this em javascript

Oi Pessoas

Muitos programadores se confundem ao usar a keyword this, principalmente porque this em javaScript se comporta diferente de outras linguagens, além de ter modo restrito e não restrito.

Simplificando, this refere-se à um objeto de um determinado contexto, por exemplo, um método.

IMPORTANTE: Todos os exemplos podem ser executados no console do Navegador, no Chrome, tecle (Ctrl + Shift + J)

Para quem é iniciante

O que é um objeto ?

Objeto é uma coleção de dados e/ou funções

Exemplo de objeto

const pessoa = {
    nome: "Cebolinha",
    idade: 80,
    pai: "Mauricui de Sousa",
    melhoAmiga: "Mônica"
 }

O que é um método ?

É uma ação de um objeto

Exemplo de método

const pessoa = {
    nome: "Cebolinha",

    correr: function() {
         console.log(this);
    }
}

No contexto global

Em um contexto global, this refere-se ao objeto global

// Em navegadores web, o objeto window é também o objeto global:
console.log(this === window); // true

// o objeto document é o proprietário de todos os demais objetos da página
console.log(this.document === document); // true

//Neste caso, tanto que podemos referenciar por this ou window 
this.meuValor= 37;
console.log(this.meuValor); // 37
console.log(window.meuValor); // 37
console.log(meuValor); // 37

'use strict'

No exemplo abaixo, sem o uso do 'use strict', ao executarmos a função getThis, criada no escopo global, em algum navegador, vamos ter como retorno o objeto window.

function getThis () {
  return this
}
console.log(getThis()) // Objeto window

Quando usarmos 'use strict', essa diretiva faz com que o this global seja undefined.

'use strict'

function getThis () {
  return this
}

console.log(getThis()) // undefined

No contexto de objeto

Em um contexto de objeto, refere-se a instancia do objeto

Exemplo 1

const pessoa2 = {
    nome: "Cebolinha",

    correr: function() {
         console.log(this);
    }
}

pessoa2.correr(); // => Object {nome: "Cebolinha", correr: }

Exemplo 2

const pessoa = {
    nome: "Cebolinha",
    idade: 80,

    aniversario: function() {
         this.idade += 1;
    }
}

console.log('Idade '+pessoa.idade + "."); // => Idade 80.

pessoa.aniversario(); // += 1

console.log('Idade '+pessoa.idade + "."); // => Idade 81.

Arrow Functions (ou funções de seta)

Nas arrow functions o this é definido pelo contexto da execução.
Não importa como for, o this do foo mantém o valor que recebeu quando foi criado.

Exemplo de **_this** em arrow function_

var objetoGlobal = this; 
var minhaFuncaoArrow = (() => this);

//this assume o objeto global
console.log(minhaFuncaoArrow() === objetoGlobal); // true

//mesmo que seja chamado de outra função
var obj = {MeuMetodo: minhaFuncaoArrow};
console.log(obj.MeuMetodo() === objetoGlobal); // true

Mesmo que seja um método de um objeto mantem o valor no momento da criação

let exampleFunc = {
    f1: function () {
        console.log("exampleFunc f1", this);
        let f2 = function () {
            console.log("exampleFunc f2", this);
        }
        f2();
    }
}


let exampleArrow = {
    f1: () => {
        console.log("exampleArrow f1", this);
        let f2 = () => console.log("exampleArrow f2", this);
        f2();
    }
}

exampleFunc.f1();
exampleArrow.f1();

exampleF.f1();
// Resultado
// Objeto
// Window

exampleA.f1();
// Resultado
// Window
// Window

Se fosse simplificar, Arrow Functions substituem as functions, só que não. Tenho um post onde explico sobre Arrow Functions

Arrow Functions (ou funções de seta)

Marcelo Cabral Ghilardi ・ Feb 26 '20

#javascript #webdev #beginners #fullstack

Perdi Algo ?

Por favor, me diga se eu esqueci de algo !!