Latest / Entre Chaves / Snippet #11 Event Loop explicado com exemplos práticos de desenvolvimento

Transcript

Snippet #11 Event Loop explicado com exemplos práticos de desenvolvimento · Entre Chaves

• 0:09
  Oi, pessoal, eu sou a Júlia, analista de software aqui na DT
• 0:12
  digital, e eu já quero explicar de uma forma simples, um
• 0:15
  conceito muito importante do JavaScript, que é o event loop.
• 0:18
  Quando eu era estagiária, eu já quebrei muito a cabeça tentando
• 0:21
  entender por que que uma parte do meu código eu estava
• 0:23
  executando antes da outra, ou por que que o estado não estava
• 0:26
  sendo atualizado em determinado momento.
• 0:28
  E entender como o JavaScript funciona por baixo dos panos,
• 0:31
  ainda muito a evitar esse tipo de problemas.
• 0:33
  Então, o JavaScript, ele é uma linguagem single Trad, ou seja,
• 0:37
  ele só executa uma coisa por vez.
• 0:40
  Então surge a dúvida, né? Como que ele consegue lidar com
• 0:43
  várias coisas ao mesmo tempo, que é a forma que a gente lida
• 0:46
  com ele na prática. Nos front end, por exemplo, onde
• 0:49
  você tem requisições HTTP, tem os times ou eventos de clique do
• 0:53
  usuário, tudo ocorrendo ali ao mesmo tempo, sem que nada fique
• 0:57
  travado, e tudo isso está relacionado ao event loop.
• 1:01
  Uma forma simples de entender é imaginar um restaurante com
• 1:04
  apenas um cozinheiro. Esse cozinheiro, ele só consegue
• 1:07
  fazer um prato por vez. Isso seria a cause tech do
• 1:10
  JavaScript, que é onde o código é executado.
• 1:13
  Agora imagina que um pedido chega e ele precisa ficar em 20
• 1:16
  minutos no forno assando? Cozinheiro não vai ficar ali
• 1:20
  parado esperando esse prato. Fica pronto, ele vai colocar o
• 1:23
  prato no forno e vai continuar fazendo os outros pedidos.
• 1:27
  No JavaScript, as tarefas mais demoradas, como as requisições
• 1:30
  ou times, elas funcionam de forma parecida.
• 1:33
  Quando o JavaScript encontra uma operação, é síncrona, como um
• 1:36
  set timeout ou uma requisição HTTPO evento de click, ela é
• 1:40
  enviada para o chamado web APIs, que são funcionalidades do
• 1:43
  ambiente, como o navegador. E quando essa tarefa termina,
• 1:47
  ela não volta direto para o código, ela vai para uma fila
• 1:50
  chamada teste kill. O event loop é responsável por
• 1:53
  coordenar tudo isso. Ele fica o tempo todo ali
• 1:56
  verificando a caostex está vazia.
• 1:58
  Se estiver, ele pega a próxima tarefa da fila e coloca na pilha
• 2:02
  de execução. Ou seja, ele garante que o
• 2:05
  JavaScript continue rodando de forma organizada, mesmo lidando
• 2:08
  com essas tarefas das síncrones. O exemplo simples e clássico de
• 2:12
  código é você colocar um console ponto log da letra a, depois
• 2:16
  definir um site timeut com time zero, colocando um console ponto
• 2:20
  log da letra BE. Por último, um console log da
• 2:23
  letra c. Quando você rodar esse código, o
• 2:26
  resultado que você vai obter é o log da letra ACE por último da
• 2:31
  letra b, porque o set timeout vai primeiro para as webb pias e
• 2:36
  depois pra fila de execução. Agora, um detalhe muito
• 2:39
  importante é que o event Luck não trabalha apenas com uma fila
• 2:43
  e existem 2 tipos principais, que é até onde entram coisas
• 2:47
  como o set timeout e a microtest que eu onde ele vai entrar
• 2:51
  proms, por exemplo. Então as microtestes, elas vão
• 2:54
  ter prioridade sobre as testes. Ou seja, antes de executar uma
• 2:58
  test Quill, o event loop executa todas as microtest.
• 3:02
  Então, se a gente pegar esse primeiro exemplo, onde a gente
• 3:04
  tem o console log a, depois o time out com a letra BE, ali a
• 3:08
  gente adicionar uma promise no ponto DNA, gente dá um console
• 3:11
  ponto log da letra CE. Por último, o console log da
• 3:14
  letra DA ordem que isso vai aparecer quando a gente executar
• 3:18
  o código será ADCEB. Porque o ponto de entra na
• 3:22
  microtesc kil que é executada antes da tesc kil entender isso
• 3:27
  impacta diretamente no dia a dia.
• 3:29
  Por exemplo, para evitar buts de ordem de execução onde o código
• 3:33
  não roda na sequência que você espera, né?
• 3:35
  Você conseguir organizar o seu código de forma que você
• 3:38
  gerencie as operações. Assim, pra que você tenha um
• 3:41
  dado da forma que você espera. No momento em que você espera,
• 3:44
  você não ter problemas de variáveis que ainda não foram
• 3:46
  preenchidos porque uma promícia ainda não resolveu.
• 3:49
  Comportamentos inesperados em firm works como react,
• 3:52
  principalmente quando você está ali lidando com o Youse state ou
• 3:56
  o Youse effect, e até problemas de performance quando você
• 3:59
  bloqueia a execução com o código síncrono pesado, por exemplo, um
• 4:03
  IO true, um IO ali que demora muito para completar.
• 4:06
  Então quando você entende o event luoping, você consegue
• 4:09
  prever melhor o comportamento do seu código.
• 4:12
  O que faz muita diferença quando você tá ali programando e
• 4:15
  estruturando o seu código. Então entender o event loop é
• 4:18
  entender como JavaScript funciona por baixo dos panos,
• 4:21
  que é essencial pra gente que é desenvolvedor.
• 4:24
  Espero que tenha ajudado e até uma próxima.