Dia 20 : Espionando o Javascript, saiba sobre o Async e Await

#Informática Básica
#JavaScript
#Boas práticas

Dia 20 – Espionando o manual do Javascript, falando sobre Async e Await

Dia 20 - 'Folheie' a documentação da sua linguagem e faça um resumo de algum conceito novo

Salve jovem padawan, final de domingo, friozinho gostoso e com chuva, bem abençoada para minimizar essa seca assustadora, inspirados pela serie Round 6, fico pensando nas desigualdades econômicas, na crise do desemprego e endividamento das pessoas nesta louca vida consumistas, onde muitas pessoas do marketing criam necessidades não necessárias e supérfluos comedores de dinheiro. Tornando-nos escravos de nossos desejos com insatisfação constate. E no pior dos cenarios fora do jogo, vivendo a parte como um paria em nossa sociedade.

Mas tiozão o que isso tem haver com Javascript, manual de programaçao e com o async await? Tudo, meu jovem padawan, pois neste artigo veras funções assíncronas, síncronas, single thread, call back hell, syntatic sugar e promise, e a cnfusao com o consumismo sem fim, senta-te confortavelmente que lá vem história.

Mas antes de prosseguirmos, estamos no penúltimo artigo de nossa jornada 21 dias 21 artigos na comunidade Digital Innovation One, um exercício de escrita, pensamento e divulgação de conhecimento, participe e ajude nossa comunidade a crescer, como sempre falo e nao me canso de repetir: Juntos Somos Mais Fortes.

#Desafio21Dias21Artigos

Em breve irei publicar o ultimo artigo da serie e com ele o resumo de todos os que foram publicados, recomendo a leitura e aproveito para convida-los a participar do Javascript Gruppen.

Introdução

Um dos problemas da computação é que apesar de pensarmos que o computador seja multi-thread, na verdade não é, ou melhor, não completamente. Ele utiliza-se de artifícios para processar tudo ao mesmo tempo numa enorme fila, dando a impressão de fazer várias tarefas ao mesmo tempo, mas na verdade faz tarefa por tarefa numa velocidade incrível. Aproveitando-se das limitações dos humanos para aperceberem-se disso, concluindo task quase na velocidade da luz. Um jogo de enganaçao em que a verdade esta a vista, mas nao conseguimos ver.

Partindo dessa premissa muitas linguagens usam do mesmo artificio, enganando nossos sentidos e fazendo pequenas interações até completar a tarefa. O Javascript criado com o objetivo WEB, nos idos anos 90, sendo seu maior objetivo era dar vida a páginas estaticas de HTML, por isso não tinha a necessidade de múltiplas tarefas e o grau de complexidade para isso inviabilizaria uma linguagem de scripts.

Mas a vida é froids, o JS superou as expectativas, foi adotado em peso pela comunidade e vejam so, surgiram problemas no paraíso: a necessidade de encher a linguagem de penduricarias para atender mil e uma especificações, solicitaram funções poderosas para vender mais e dominar o mercado, pressionadas pelo pessoal do marketing e executivos que aspiravam por bônus mais altos, iniciou-se uma guerra pelo software perfeito, onde varias linguagens de script tombaram, entendeu agora a referência ao Round 6?

Obrigaram a equipe de desenvolvedores a incluir funcionalidades na linguagem JS que gerava o caos, dando lentidão aos sistemas, bloqueando servidores, derrubando websites e dificultando front-ends com os famoso call back hell, afinal remendos nunca rendem bons softwares.

O ECMA Internacional ciente desta confusão e para minimizar situações assim, no passado foi criado o conceito de promise, que permitia paralelizar o processamento simulando multi-thread, avançando no processamento, enquanto algumas partes ainda estavam processando, se pensou em funções síncronas e assíncronas acertou está no caminho certo, mas se chegou agora na nossa comunidade e não faz ideia do que se trata, irei ajuda-lo, mas para isso preciso voltar a definições básicas.

O que é uma Função Síncrona?

Imagine um programa que faz um pedido e bloqueia o processo até receber a resposta, indo para o próximo pedido, parando e esperando, indefinidamente. Isso irrita e cria pontos de lentidão. Semelhante a brincadeira infantil de telefone de fio, recorda-se dela?

Imagine navegar na web, é cada vez que pede uma nova página o processo bloqueasse o navegador, enquanto o site não for carregado, tu perdes o acesso ao navegador e o computador travasse, isso é meio absurdo nos dias atuais, mas num passado não muito remoto era assim.

function abc() {
 console.log('abc');
}

function xyz(){
 abc()
 console.log('xyz');
}

var one = 1;
xyz();

O que é Call-Back?

Numa chamada síncrona mentes habilidosas, conceberam uma estratégia para evitar paradas no processamento devido há uma chamada síncrona, embutiram trechos lentos em funções e com isso o processo prosseguia linearmente sem perda de performance.

Mas nem tudo foi flores nesse jardim, outras mentes não tão brilhantes assim, começaram a embutir call-back em call-back, num spaghetti code dos infernos e com isso surgiu o terror de todo programador de front-end o Call-back Hell.

function primeiroBloco(){
  // Aguardar 5 segundos
  setTimeout( function(){
  console.log('Esse é o primeiro bloco de comandos após 5 segundos');
  }, 5000 );
}

function segundoBloco(){
  console.log('Esse é o segundo bloco de comandos');
}

primeiroBloco();
segundoBloco();

O que é Call-back Hell?

Imagine um pesadelo de chamadas entrando e saindo e você não tem a menor ideia do que se passa? O CBHELL é ainda pior, um código sujo, confuso, macarrônico e destruidor de performance.

A parte triste que isso se tornou tao comum, que os rapazes da ECMA, resolveram criar uma ferramenta que evitasse isso, com isso vamos ao próximo ponto de nossa jornada.

fs.readdir(source, function (err, files) {
if (err) {
  console.log('Error finding files: ' + err)
} else {
  files.forEach(function (filename, fileIndex) {
    console.log(filename)
    gm(source + filename).size(function (err, values) {
      if (err) {
        console.log('Error identifying file size: ' + err)
      } else {
        console.log(filename + ' : ' + values)
        aspect = (values.width / values.height)
        widths.forEach(function (width, widthIndex) {
          height = Math.round(width / aspect)
          console.log('resizing ' + filename + 'to ' + height + 'x' + height)
          this.resize(width, height).write(dest + 'w' + width + '_' + filename, function(err) {
            if (err) console.log('Error writing file: ' + err)
          })
        }.bind(this))
      }
    })
  })
}
})

O que é uma Função Assíncrona?

Foi uma jogada de mestre, dividindo-se a tarefa a mínima parte e no decorrer da atividade faz o pedido, segue, faz o próximo pedido, segue e conforme vai recebendo as respostas, volta ao ponto. A web é assim, fazemos um pedido de website e ele vai se completando aos poucos, primeiro carrega todo o texto, depois gradualmente áudios e vídeos

Fica a dica, entendeu por que quando colocamos scripts de javascript embutidos em páginas web, a boa pratica recomenda colocá-lo no final da página, sendo a última coisa a ser carregada, assim auxiliamos o processamento.

function resolverDepoisDe2Segundos(x) {
return new Promise(resolve => {
  setTimeout(() => {
    resolve(x);
  }, 2000);
});
}

O que é promise?

Trabalhando com funções assíncrona e evitando o CBHell surgiu o comando promise, que ajudava a efetuar processos paralelos sem confusão, porém ele era tão difícil, que poucos usaram-no e tornou-se necessário alguns estratagemas para auxiliar os programadores.

Imagine a confusão, surge uma dor, apresentam uma solução para minimizar, mas um pouco confusa e nessa confusão, foi necessário um syntatic sugar para salvar a pátria: surgiu o assyn e o await.

Que cara é essa jovem padawan? Esta muito confuso? Onde te perdi?

O que é Syntatic Sugar?

Acredito que esse termo assustou um pouco e tirou a credibilidade do texto? Em Javascript e em outras linguagens, syntatic sugar é o nosso adoçante, foi uma estratégia para facilitar a codificação, uma forma de escrever, digo codificar de forma mais simples e racional.

Ajudando o programador a trabalhar de forma mais fácil, elegante e de fácil entendimento, evitando confusões com sintaxe difícil e fugindo do spaghetti code. Neste contexto surgiram o async e o await, comando promisse vitaminados e user-friends.

Respeitável publico com muito carinho apresento o Async e o Await.

O que é Async e Await?

São comandos que auxiliam o processamento assíncrono, simplificando o promise e evitando o CBHell, com o uso constante a pratica ira melhorar.

async function adicionar1(x) {
var a = resolverDepoisDe2Segundos(20);
var b = resolverDepoisDe2Segundos(30);
return x + await a + await b;
}

Conclusão

Este texto foi um passagem teórica, onde exploramos o conceito de multi-thread, ou melhor a falta dele, e com isso vimos a trabalheira que foi ao longo de inúmeras versões, chegamos num resultado aceitável. Mas acredite a inconstância é regra, talvez numa próxima versão surja algum novo atalho, para corrigir algum desvio mal elaborado na va tentativa de voltar a estrada principal.

Espero ter ajudado ate o próximo artigo.