Don’t lose your marbles over reactive programming (KL DevFest 2019)

A5ff2e94b72a105555575b0a8e25836f?s=47 Wendy Kong
December 07, 2019

Don’t lose your marbles over reactive programming (KL DevFest 2019)

Presented at KL DevFest 2019

Penang version here: https://speakerdeck.com/wendko/dont-lose-your-marbles-over-reactive-programming-penang-devfest-and-bizfest19

Reactive programming and marble diagrams - they always seem to come together! Marble diagrams are meant to help visualize reactive programming, which can be hard to work with especially when the amount of data streams and operators start to increase. Well, these marbles and straight lines and observables are great and all, but at the end of the day, I just want my data! Let's take a light-hearted approach on reading these diagrams and make sense of this whole reactive programming thing. After all, guli is supposed to be fun, right?

A5ff2e94b72a105555575b0a8e25836f?s=128

Wendy Kong

December 07, 2019
Tweet

Transcript

  1. GDG Kuala Lumpur

  2. Don't Lose Your Marbles Over Reactive Programming! Wendy Kong @wendko

    GDG Kuala Lumpur
  3. Kuala Lumpur

  4. Kuala Lumpur Basically me

  5. Kuala Lumpur Takeaways: - Reactive programming - How to implement

  6. Kuala Lumpur Asynchronous data streams Reactive programming

  7. Kuala Lumpur data https://bulbapedia.bulbagarden.net/wiki/Alcremie

  8. Kuala Lumpur data stream https://www.youtube.com/watch?v=FjghsZt7VjQ

  9. Kuala Lumpur Multiple data streams

  10. Kuala Lumpur observer

  11. Kuala Lumpur observer observable

  12. Kuala Lumpur subscribe!

  13. Kuala Lumpur

  14. Kuala Lumpur

  15. Kuala Lumpur

  16. Kuala Lumpur unsubscribe

  17. Kuala Lumpur Spreadsheets

  18. Kuala Lumpur RxJS https://rxjs.dev

  19. Kuala Lumpur

  20. Kuala Lumpur Marbles

  21. Kuala Lumpur https://rxmarbles.com/#combineLatest

  22. Kuala Lumpur Before

  23. Kuala Lumpur Before RxJS

  24. Kuala Lumpur Before RxJS After

  25. Kuala Lumpur 1. Create an observable const a = //

    an observable; const b = a.pipe( // do something! ) .subscribe(); setTimeout(() => b.unsubscribe(), 5000);
  26. Kuala Lumpur 2. Observe & do something const a =

    // an observable; const b = a.pipe( // do something! ) .subscribe(); setTimeout(() => b.unsubscribe(), 5000);
  27. Kuala Lumpur 3. Unsubscribe const a = // an observable;

    const b = a.pipe( // do something! ) .subscribe(); setTimeout(() => b.unsubscribe(), 5000);
  28. Kuala Lumpur https://stackblitz.com/edit/rxjs-marbles-example

  29. Kuala Lumpur The introduction to Reactive Programming you've been missing

    (link)
  30. Kuala Lumpur TQ! @wendko References • learnrxjs.io/ • reactivex.io •

    rxmarbles.com • kgoralski.gitbook.io/wiki/reactive • en.wikipedia.org/wiki/Observer_pattern • Reactive Programming in Netflix (link) • Reactive Programming origins and ecosystem (link) • The introduction to Reactive Programming you've been missing (link) • The Reactive Landscape (link)