O uso do RxJS em uma aplicação robusta baseada em eventos

Denis Wilton de Paula Azevedo
Frontend Developer at Nelogica
https://www.linkedin.com/in/deniswpazevedo/

O que é o RxJS?

RxJS é uma biblioteca para composição assíncrona para aplicações baseadas em eventos utilizando sequências de Observables.

Ela combina os padrões de projeto Observer e Iterator propostos no icônico livro da ciência da computação, “Design Patterns: Elements of Reusable Object-Oriented Software” da autoria de Erich Gamma, Richard Helm, Ralph Johnson, e John Vlissides, mais conhecidos como “The Gang of Four”. Além de alguns princípios de pureza advindos da programação funcional.

Uma dos princípios mais poderosos que o RxJS carrega é o princípio da pureza, amplamente evangelizado pela programação funcional, pois propõe um código testável, limpo e menos propenso a erros de estados imprevistos na aplicação. Um princípio que norteia a base de código de grandes aplicações, como o ReactJS, biblioteca responsável pela maior parte dos novos projetos front-end atualmente.

O RxJS possui uma série de operadores utilitários responsáveis por transformar uma stream de dados. Eles podem ser categorizados como transformadores, filtros, combinadores, utilitários, condicionadores, agregadores e multi-propagadores. Um operador é essencialmente uma função construída na fundação de um Observable que permite uma manipulação sofisticada.

Observables

Um Observable é uma stream, e uma stream é uma sequência de dados disponibilizados ao longo de um período.

Para sintetizar, pense que Promises reagem com base na resposta de uma solicitação, que pode falhar ou ser bem sucedida. Já os Observables disponibilizam uma série de dados ao longo do tempo, e seus inscritos fazem deles o que bem entenderem.

“Disponibilidade” é uma palavra-chave importante para entender o conceito da programação reativa.

Essa sequência de dados pode variar desde um simples incremental que perdura por 6 segundos produzindo uma sequência de inteiros (0, 1, 2, 3, 4, 5), ou coordenadas (X, Y) do Mouse na viewport, até valores de entrada em um formulário ou mensagens recebidas por Web sockets ou API responses. Fato é que tudo isto podem ser dados coletados ao longo de um período, e isso tudo pode ser tanto síncrono quanto assíncrono.
Um Observable possui um ciclo de vida bem definido por sua criação, inscrição, execução e destruição!

Vantagens sobre as Promises

Valor único vs. Valores múltiplos

Promises sempre se resolverão com o primeiro valor passado para a função resolver, e ignora futuras chamadas a esta função. Ao contrário, um Observable permite que você resolva vários valores e complete-o arbitrariamente.

Imediata vs. Lazy

Promises possuem um design imediato, isso significa que suas responsabilidades serão cumpridas no momento de sua construção. Já os Observables são lazy, isto é, seu construtor será chamado tão somente quanto realmente alguém se inscrever a ele. Isto significa que nada acontecerá caso ninguém utilize um Observable.

Promises não são canceláveis

Eventualmente, você já deve ter se deparado com o fato de que uma Promise não pode ser revogada. Esta é uma importante feature que está prevista para entrar em uma próxima release da linguagem, no entanto, hoje, necessitamos de caminhos alternativos para esta feitoria. Já os Observables suportam cancelamento de tarefas assíncronas naturalmente, bastando uma desinscrição ao próprio. No momento da desinscrição de um Observable, todo o fluxo de tarefas assíncronas do Observable é interrompido.

Performance e Produtividade

Nos quesitos de performance e produtividade, o RxJS brilha muito mais nos critérios de QA (Quality Assurance), uma vez que possui soluções especialistas em um problema específico.

O operador switchMap, por exemplo, é responsável por realizar, de forma inerente, toda a cadeia de efeitos colaterais na mudança de um argumento pregresso. A chance de captarmos bugs decorrentes da falta de desinscrição de um estado anterior seria muito maior se tivéssemos que manipular essa tratativa de forma manual.
Em paralelo, ao prover este ganho de qualidade, é intrínseco o ganho de performance, uma vez que o gerenciamento de inscrições e desinscrições acarreta na liberação de uso de memória e tráfego de dados na aplicação.

Fontes

https://blog.bitsrc.io/reactive-programming-in-javascript-with-rxjs-9db53c07ef14
https://blog.mimacom.com/eight-reasons-why-you-should-be-using-rxjs/
https://rxjs.dev/guide/overview