Já ouviu falar em Observer ? Se não conhece então está no lugar certo para entender seu objetivo. O foco será explicar como elas funcionam e o conceito por trás do padrão Observer em JavaScript, utilizando como base o RxJS. Lembrando que temos esse mesmo padrão aplicado em outras linguagens como JAVA, C#, TypeScript entre outras. Vamos tentar simplificar as explicações sem usar termos difíceis!
O comportamento Observer
É um padrão de projeto comportamental, orientado a eventos. As coisas só ocorrem se um evento acontecer, como o clique de um botão no sistema, que pode gerar múltiplas chamadas de métodos e outros eventos. Mas como realmente se comporta este padrão e porque ele é muito útil em nossos dias?
O padrão Observer está muito relacionado a reatividade e este conceito em programação é muito vantajoso e logo entenderemos o porquê. Vamos extrair do mundo real um exemplo para que este conceito de reatividade fique claro:
Imagine que você seja dono de uma empresa de tecnologia e contrata dois desenvolvedores. O primeiro é mais proativo, procura por demandas, gosta de estudar tecnologias diferentes, busca compreender como melhorar a regra de negócio dos softwares em que está trabalhando e ajuda muito os outros desenvolvedores. Este colaborador é proativo, pensa e age antecipadamente, buscando sempre melhorar e buscar mais trabalho. Mas ao contrário temos o segundo funcionário que é reativo. Não estuda tecnologias novas, não ajuda outros desenvolvedores, não busca por demandas novas e só faz algo quando é chamado. Este segundo colaborador é reativo, pois só age quando é solicitado algo. Para o contexto de uma empresa isso não é nada bom, pois isso pode afetar a produtividade da equipe e o prazo de entrega de projetos.
Agora trazendo esse exemplo para o contexto de software, o conceito de um código ser proativo é bom ou ruim? É muito ruim. Pense em um código que toda vez fica processando alguma tarefa, buscando verificar se os dados foram atualizados ou não a cada um segundo, este código tem a tendência de consumir mais processamento, mais memória e isso traz muitas desvantagens em desempenho para a aplicação. Ao contrário disso, um código reativo age apenas quando alguma interação ocorre com ele, executa e depois finaliza. Este código tem um desempenho muito melhor. Este é o conceito do padrão Observer, as coisas só acontecem ou ocorrem quando um evento é iniciado. E o que seria esse evento? Pode ser um clique de um botão para finalizar uma compra ou excluir um item de um carrinho de compras de um e-commerce, tudo isso são exemplos de eventos que ocorrem em uma aplicação.
Mais uma Analogia
Vamos ilustrar com uma historia e isso vai explicar muito bem este conceito do que é um evento e como ocorre o comportamento Observer:
Um filho está organizando uma festa de aniversário de casamento surpresa para seus pais. Quando chega o dia, os convidados entram pela portaria do condomínio e se servem de alguns aperitivos enquanto conversam entre eles. Enquanto isso o filho, que é o organizador da surpresa, fica monitorando pela janela se o carro de seus pais está entrando no condomínio. Ou seja ele assumiu a responsabilidade de ser o observador para não perder o evento que é a chegada de seus pais. Mas isso teve um custo, ele não podia ficar conversando com os convidados da festa, pois estava monitorando pela janela. Ou seja ele teve um comportamento proativo. Quando os pais chegassem ele iria notificar todos para fazerem silêncio e apagaria as luzes para que a surpresa fosse realizada.
Mas agora vamos mudar essa história:
Agora em vez da responsabilidade ser do filho, ele liga na portaria e delega para o porteiro do condomínio que notifique a chegada dos aniversariantes. Fazendo isso ele demonstra interesse em ser notificado sobre aquele evento. Assim o filho pode fazer outras coisas ou pode simplesmente conversar com os convidados da festa. Quando os pais chegam, o porteiro notifica por telefone o filho que eles chegaram, ou seja o evento foi iniciado. Neste caso o organizador da festa teve menos responsabilidade.
Neste segundo caso o filho teve um comportamento mais reativo. E para que fique mais claro vamos identificar por fases o que estava acontecendo na segunda situação:
O filho demonstra interesse em ser notificado quando o evento ocorrer.
O evento representa a chegada dos pais.
O porteiro detecta e notifica (liga de volta) para o filho, avisando que o evento se iniciou.
O filho começa a organizar os convidados para que a surpresa possa ser feita com sucesso.
Então no segundo caso vemos claramente que a ajuda do porteiro foi fundamental para que o filho tivesse mais tranquilidade naquela situação. Mas quem representa o observer nessa historia? No caso o filho é o observer e este sempre está interessado no evento, em ser notificado quando o evento ocorrer! O porteiro representa quem detecta o evento, que é chamado de Subject. E a chegada dos pais é o evento. Veja a ilustração abaixo que representa de uma maneira simples:
Um ponto que vale a pena destacar é o subscriber. No momento em que o filho notificou o porteiro ele assinou aquele evento, ou seja se inscreveu nele, para que fosse possível ser notificado quando este evento ocorresse.
Conclusão
Vimos neste artigo como funciona o padrão Observer. Gostaria de destacar que todos esses pontos abordados ao decorrer da leitura foram baseados em estudo e análise da documentação do RxJS que pode conferir clicando aqui . Além disso se quiser exemplos em outras linguagens, sugiro que de uma lida neste site com um conteúdo muito rico em conhecimento, basta acessar clicando aqui .
Com base nisso podemos começar a entender os métodos que temos a disposição na biblioteca RxJS. Vamos falar no próximo artigo sobre Observables.
Fico por aqui neste artigo e qualquer dúvida, por favor, relatar nos comentários. Agradeço mais uma vez por ler. Até o próximo post! 🚀