Resumo do Livestream do NBK Mundo Tech

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.