RxJS Advanced Patterns – Operate Heavily Dynamic UI’s | Michael Hladky

AI Dev Craft · 48K views · 2019 · 1:09:37

Open on YouTube

Web developmentFunctional programmingSoftware architecture & designtutorial

Why Stack Overflow recommends it

Stack Overflow users link it when explaining RxJS practices such as putting side effects in tap, combining streams into one subscription, and using operators like scan.

Recommended by 2 people across 2 different months, 2019 to 2020.

What it is

A roughly hour-long advanced RxJS workshop by Michael Hladky on building heavily dynamic, interactive UIs. It covers complex subscription handling, performance optimization, managing background processes, event sourcing and CQRS-style patterns, and a reactive micro-architecture.

What people said

Recommends Jesse · 2019-05 · Stack Overflow · on “In Rxjs is it an anti-pattern if you add a value to an array, and then immediately after emit that array as an observable?”

I was fortunate enough to see this talk in person [this video] by Michael Hladky (the text is nearly unreadable in the video I'm sorry) and there he introduced me to the power of the scan operator.

Recommends Fredrik_Borgstrom · 2019-10 · Stack Overflow · on “tap() vs subscribe() to set a class property”

Michael Hladky suggests that you put all side effects in the tap operator and he explains why here [this video] . I think it's generally a good idea to do so, because as Michael says, you can then merge many observables together and create one single subscription for all of them. I don't know if this improves performance or not, but it definitely makes it easier when you want to unsubscribe to only have one subscription. Unsubscribing is something you always should do to avoid possible memory leaks or other strange behaviors. Another gain from this approach is that you then easily can pause, resume or complete a group of observables by piping it through operators such as filter or takeWhile, or b

Cites Shorbagy · 2020-08 · Stack Overflow · on “How to pass results between chained observables”

You're right about these concerns and problems you mentioned but the problem I see here is turning your mindset from an imperative approach to a Reactive/Functional approach but let us review the imperative code first private startUpload(event: StartUploadEvent) { const headers = this.getAuthenticationHeaders(event) const id = this.generateUploadId() this.emitUploadStartEvent(id, event) const pdfId = this.createPdfDocument(event, headers, id) this.uploadBilderForPdf(event, pdfId, headers, id) const cloudId = this.closePdf(headers, pdfId) this.emitUploadDoneEvent(id, event, cloudId) return cloudId } Here you see the stuff is more clean that you have event that you can pass and get only what y