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?

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)