Tira Dúvidas - Live Stream

001a Tira Dúvidas - Live Stream

Tira Dúvidas - Deixe sua pergunta! [Javascript - Callback / Promise / Async Await]

# Resumo do Livestream do NBK Mundo Tech

**Introdução**
- O livestream é dedicado a esclarecer dúvidas sobre os cursos do NBK Mundo Tech.
- Os participantes podem fazer perguntas pelo chat, Discord ou Telegram. Links para essas plataformas foram fornecidos.

**Interação e Demonstração**
- O apresentador menciona que o site do NBK Mundo Tech contém uma lista completa de cursos, o que facilita a visualização.
- Enquanto aguarda perguntas, ele realiza uma demonstração de programação em JavaScript, onde cria e move um quadrado na tela.

**JavaScript vs. TypeScript**
- O apresentador discute as vantagens de usar JavaScript para desenvolvimento rápido, comparado ao TypeScript, que é mais benéfico em projetos grandes e complexos.
- TypeScript oferece controle de tipos, prevenindo bugs comuns que ocorrem em JavaScript devido à tipagem dinâmica.

**Funções de Callback**
- Explicação sobre o padrão de funções de callback em JavaScript e sua utilidade em programação assíncrona.
- O apresentador ilustra como usar callbacks para garantir que uma animação (movimento do quadrado) termine antes de iniciar outra.

**Promise**
- Discussão sobre Promise como uma abordagem para evitar o chamado "Callback Hell", permitindo um tratamento assíncrono mais claro.
- O apresentador demonstra como retornar uma Promise em uma função e resolver a Promise para sinalizar a conclusão de uma tarefa.

**Async/Await**
- O uso de async/await é apresentado como uma simplificação adicional para lidar com operações assíncronas.
- O async/await permite escrever código de maneira mais linear e fácil de entender, eliminando a necessidade de múltiplas aninhamentos de callbacks.

**Conclusão**
- O apresentador finaliza o stream agradecendo e desejando uma boa semana aos participantes, reiterando os conceitos abordados sobre padrões assíncronos em JavaScript. 

**Fechamento**
- O livestream encerra com um convite para que os participantes continuem interagindo e fazendo perguntas nos canais disponíveis.

Bem vindo pessoal ao livestream do NBK Mundo Tech. Esse livestream é pra quem tiver alguma dúvida de alguns de nossos cursos. Você pode deixar sua pergunta no chat ou no Discord
ou no Telegram. Aqui está o link do Discord, aqui está o link do Telegram. Estou aqui no
site do NBKMudutech que tem a lista dos nossos cursos. Se você quiser acessar o site, pode
assistir, está para ver os cursos, a lista de cursos de maneira mais, talvez até conveniente,
que no YouTube às vezes não dá para achar os cursos, aí você pode ir nesse site e tem a
lista completa aqui de todos os cursos do NBKMudutech. Se você tiver uma pergunta relacionada a
os nossos cursos, por favor, deixe a pergunta aí e vamos responder. Enquanto não tiver pergunta,
eu vou fazer só ficar jogando, fazendo os negócios aqui de JavaScript, só devolver o mesmo.
Fazer um quadrado aqui, 50 pixels, a altura 50 pixels, pôr de fundo,
vermelho, o quadrado, funciona a borda.
2 pixels, fazer mais, fazer o quadrado mover.
Document, que era Element, ID, ID é block, vamos chamar isso de block. Vamos ver.
Eu quero fazer o block mover, intervalo, a cada 250 milisegundos, intervalo,
vamos ver. Pega o block, para ele poder mover, a gente tem que fazer o set, posição, né, o left,
por exemplo, style, left, vamos adicionar aqui a posição, como o block left, o zero,
o block left, mais o que, pegar isso aqui.
Vamos fazer ele mover 50% de sua largura, o block left, peixe isso, deve ser aqui.
Constante, não, peixe o set left, que a gente vai modificar, depois o primeiro.
Mas quando para de mover, vamos ver, vamos dar uns 10 passos, talvez, se eu estou na posição
zero, eu adiciono 25 vezes 10, 250, se o block left maior igual a 250, vou parar, intervalo,
vamos ver o que dá, nada moveu, esqueci alguma coisa, abrir o console, não tem problema,
acho que porque ele não tem a posição relative.
Aí, vou dar agora, movendo, vamos fazer ele mover de volta, intervalo, set, intervalo,
o block left vai ser menos 25, style left, é só a mesma coisa, block left, mais o peixe,
se o block left for menor igual a zero, vamos parar, clear interval, intervalo 2,
e quanto tempo, 250 mil segundos, vamos ver, pode dar, vai para a direita, não foi para a esquerda,
vamos ver, a gente tem que acotar esse depois que terminar, vamos ver, vou fazer uma função
function, mover para a esquerda, vou botar o que a gente fez, e agora, quando bater no intervalo,
vou pegar esse aqui, quando terminar, da esquerda aqui, pode até mandar o callback,
mas agora, vamos fazer assim, mover para a esquerda, ele vai chamar aquela função que
vai mover para a esquerda somente quando terminar e mover para a direita.
Vê para a direita, para a esquerda, que tal a gente fazer isso, ficar no loop infinito,
como fazer isso, ah bem, tinha que fazer o seguinte, chama primeiro esse, depois chamar
o mover para a esquerda, vai chamar esse de novo, então para fazer isso, a gente tinha
que chamar, vamos pôr isso aqui em uma função, então, function mover para a direita, mover
para a direita, cadê, ah, eu vou pôr um callback aqui, callback, em vez de, essa callback
vai ser chamada depois terminar de mover, então vou chamar callback, se tiver callback,
vou chamar callback, aí, a gente pode chamar primeiro mover para a direita e passar um
callback para poder fazer alguma coisa, e essa callback vai ser uma função que vai
mover para a esquerda, aí, dessa aqui, tem que passar de novo, vamos passar um callback
também para mover para a esquerda, então eu quero fazer aqui o quadrado, seja ele
move para a direita, para, move para a esquerda, para, aí repete, direita à esquerda, direita à esquerda,
isso que eu estou fazendo aqui, vai adicionar callback, mover para a esquerda, vai depois
determinar uma intervalo, se tiver callback, eu vou executar a callback, vamos ver aqui,
mover para a esquerda, mover, vamos ver, mover para a esquerda, callback, mover para a direita,
o que acontece, eu fiz aí isso, primeiro é mover para a direita, quando terminar,
chamar callback, a callback vai chamar mover para a esquerda, quando terminar, mover para a direita,
direita à esquerda, direita, mas aí vai terminar, né, como fazer?
Olá, bem-vindo, esse live stream é para, se você tiver alguma dúvida sobre os cursos
do NBK Mundutech, você pode deixar a mensagem aí no chat, no Discord, ou não, telegram,
está aqui os links, tá, enquanto isso, enquanto ninguém tem perguntas, eu estou brincando
aqui no JS primeiro fazendo os negócios, esse quadrado fica movendo ele, para a direita
para a esquerda, só de brincadeira. Qual você prefere utilizar? JavaScript ou TypeScript?
Boa tarde, e depende do contexto, eu prefiro JavaScript para fazer as coisas de maneira
rápida, sem ter que se preocupar com escrever mais, JavaScript é bom para que você não
tem muito tempo, não pode perder tempo com certas coisas, tem que desenvolver, começar
o desenvolvimento, desenvolver rápido, nem que tenha bugs e problemas, mas tem que ter
alguma coisa desmovida. TypeScript mais usado para os aplicativos que já são
bem grandes, fica muito, muito complexo você desenvolver, você chega em um
companhia, a companhia tem um código que tem, sei lá, milhares ou centenas de milhares
de linhas de código e não tem condição de você entender tudo ao mesmo tempo, tudo de
uma vez, então você só é responsável por uma parte do código, e realmente essas
companhias usam TypeScript, esse caso ajuda muito na prevenção de bugs, problemas, ajuda
nos tipos que várias vezes a gente não sabe, JavaScript não, a gente não sabe o que
é, está trabalhando com uma variável, não sabe qual é o tipo da variável, para entender
o tipo teria que investigar, usar o DevTools ou dar um console log, qualquer coisa assim, mas
com TypeScript você já sabe exatamente que tipo da variável é, aí fica mais definido
as entradas e saídas de funções e o sistema próprio, até problemas bem simples como você
armazena na variável um número, mas você armazena um número dentro de uma string e veja
o seu número sem string, aí você faz comparação e dá para, causa um bug, coisa bem simples assim,
3 não é igual a 3, às vezes você programa, usa a string em vez do número e isso dá
porém você não sabe, porque você não sabe o tipo, até investigar essas coisas.
Callback é sempre uma função anônima, a pergunta que Callback considera uma função
para o padrão, veja muita gente passando Callback por parâmetro e depois chamando como
uma função. Então, o Callback é um padrão de você passar, por exemplo, no meu caso,
você tem uma função que faz alguma coisa, mas como JavaScript natureza é de assíncron,
às vezes você chama a função e ele vai continuar e executar outro código ao mesmo
aí, como é que faz para você sinalizar que a minha primeira função terminou de executar?
A maneira mais tradicional é usar o Callback, função de Callback.
Função de Callback é um argumento que você passa para sua função e quando a sua função
terminar de executar, você chama o Callback que sinaliza, eu terminei de executar, agora
é sua vez de executar a função Callback. Eu até usei Callback aqui, nesse programinha
aqui, para mover para a direita, quando ele termina de chegar ao lado direito que é
essa aqui e eu verifico, será que então Callback, se tiver Callback eu executo?
Porque a Callback só será executada no final dessa animação. Se eu não tivesse a Callback
aqui chamado mover para a esquerda para a direita, para a direita para a esquerda, como eu tinha
antes, você não viu eu acho, não iria funcionar porque eu estava movendo para a direita ao
mesmo tempo que estava movendo para a esquerda, isso não funciona, você tem que esperar ele
primeiro terminar de mover para a direita para você poder executar o mover para a esquerda.
É isso que aconteceu aqui, esse exemplo é muito, eu passei a função de Callback e quando
terminar de mover para a direita, isso é, quando terminar aqui, ele vai chamar para a esquerda.
É JavaScript assíncrono, então esses padrões mais tradicionais. É claro que isso mudou,
agora tem também a promessa, a segunda maneira que eles criaram para poder notar esse, você
sabe que você vê que está vários Callbacks, poderia ter Callback para caramba, mover para
a esquerda e passar outro Callback, você note que a indentação aumenta e aumenta e aumenta
a flexidade disso e isso é chamado Callback Hell. Callback Hell é um inferno do Callback,
isso significa que você tem tanta função passada, como é que fala? Neste, dentro da
outra, a função dentro da outra, dentro da outra que fica muito difícil de entender
o que está acontecendo em certa aplicativa e para uma maneira de consertar esse problema,
eles criaram Promise, a promessa. A maneira da promessa é bem simples, você faz mover para
a direita, por exemplo, se a função retornar essa promessa, posso modificar, mover para
a direita, aí você fala assim, dentro, se mover para a direita retornar a promessa,
posso falar dentro, aí eu falo mover para a esquerda, e se mover para a esquerda retornar
a promessa, eu posso fazer outro dentro, mover para a direita. Acho que nem preciso
ver esse negócio aqui, eu posso falar assim, mas de qualquer maneira, fechei mesmo. Então,
com o dentro, não tem mais o negócio de Callback Hell porque é a mesma nível de
indentação, o mesmo nível de indentação, aí você pode falar assim, agora para a
primeira, para a direita, dentro, para a esquerda, dentro, para a direita, dentro, para a esquerda.
Eu acho que não tem o dentro do outro, é só um nível de indentação, é isso para
que fizeram com Promise, para poder lidar com Callback Hell. Eu posso até fazer isso
funcionar aqui, para funcionar isso, eu tenho que passar uma promessa aqui, na função
mover para a direita, eu faço o seguinte, retorn, Promise, Resolve, ponto resolve, tem
desculpa, não é resolve, criar nova promessa, retorn, new promise, nova promessa,
aí tem que passar uma função resolve, reject, tem dois argumentos, aí é só eu
pôr essas coisas dentro, aqui, aí eu tenho que dizer quando que ele vai resolver a
promessa, isto é, quando é que vai terminar, isto é equivalente ao local que tem o
Callback, então, onde tiver o Callback, você põe, vamos ver aqui, Promise, Resolve,
com o valor, não precisa ter valor aqui, Promise, Resolve, quando você chamar o
resolve, a promessa vai ser resolvida, então você fez a promessa de que essa
função vai terminar em algum certo tempo, e esse é o tempo aqui que a
promessa termina, você fala, resolvido, terminou, esse sinal vai ser dado ao
Den, o Den, então, vai saber que pode executar, quando Del resolve, então,
vamos ver se funciona, aí eu comentei aquilo ali, então, movi para a
direita, não funciona para a esquerda, alguma coisa que eu pedi errada,
deixa eu ver aqui, deixa eu tirar, eu não tenho Callback, vou ver para a
direita, mas não vou ver para a esquerda, por que será, ah, talvez,
Turn your Promise, por que será que isso não funciona?
Promise Resolve, ah, não tem Promise aqui, né, eu tenho que chamar o resolve,
que é o argumento, é o parâmetro dessa função, não é o do Promise Resolve,
está errado, então, não tem que ter isso, só isso, esse resolve já fornecido
aqui em cima, então, agora vai funcionar, direita, esquerda, direita, parou,
por que será, ah, porque eu mover para a esquerda não tem, não retorna
a promessa, e tu por isso parou, aí pode fazer a mesma coisa, return new
Promise, o pessoal pensa que o resolve é o possível meter o reject,
reject é para rejeitar se deu problema, você rejeita com um erro, por exemplo,
então, ponha o conteúdo dentro da new Promise, da callback do new Promise,
note que ele usa o callback aqui, né, onde tiver o callback, só chamar resolve,
que é esse parâmetro, por isso ele vai funcionar, é, isso mesmo,
esquerda, direita, pronto, é, então, aí, isso é o Promise, e ainda tem mais
outro, né, agora criaram também o async e o await, que é o terceiro paradigma,
o async e o await faz você usar o code como se fosse sincrono, de certa maneira,
então, você poderia modificar isso para fazer async e o await, seria, como é que
seria, seria assim, mover para a direita, mas como mover para a direita retorna
a promessa, você tem que dizer await, espera isso terminar, espera a promessa resolver,
aí você fala await, pode fazer próximo, e pode fazer o próximo, mover para a direita,
await, mover para a esquerda, e assim que o await, detalhe, você tem que ter dentro
de uma função async, né, não pode rodar isso dentro de qualquer função,
tem que ter a palavra, chave, async, então, dessa maneira, ele faz o await,
ele chama o await para direita, espera, ele terminar, aquela promessa resolver,
quando resolver, ele continua para a próxima linha, mover para a esquerda,
espera, quando for resolvida, mover para a próxima linha, e com isso, não tem
aquele negócio de ter o .d, né, é só dizer await e a função async.
E acho que isso até funciona agora, porque como a nossa função já retorna
a promessa, eu acho que funciona sem fazer nada lá na implementação,
deixa eu chamar essa função async.mover, e eu só chamar aqui mover,
vamos ver se funciona, então, direita, esquerda, direita, esquerda, terminou,
então, essa com async await, não precisa modificar a implementação da função
porque ela já retorna a promessa. E com isso, não precisa de o .d.
Tá bom, então, por essa live é só, eu vou ter que ir agora,
e essa foi as padrões async, vou escrever async no nosso primeiro callback,
depois promessa, depois async await.
De certa maneira, é mais organizado, como você falou.
Não ajudaria se você quisesse realmente fazer coisas astíncronas,
se você quisesse fazer a linha 57, ao mesmo tempo que a linha 56,
não daria para fazer, porque ele tem que esperar pela linha 56,
então, esse caso não é muito bom usar, mas nos casos que você não precisa fazer as coisas em paralelo,
tá certo, tá bom, então, boa semana, dá uma de semana, tchau.
Tchau, tchau.
