Don't lose your marbles over reactive programming! (Penang Devfest&Bizfest19)

Presented at Penang DevFest and BizFest 2019

KL version here:
https://speakerdeck.com/wendko/dont-lose-your-marbles-over-reactive-programming-kl-devfest-2019

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

2. Don't Lose Your Marbles Over Reactive Programming! Wendy Kong, Software Developer @wendko
3. Me in three pictures
4. Takeaways
5. 1) What is Reactive Programming 2) How to implement Reactive Programming 3) How marble diagrams can assist you
6. Reactive Programming
7. A programming paradigm Asynchronous data streams Propagation of change Source: Reactive Programming Wikipedia
8. (Reactive systems) are responsive, resilient, elastic and message-driven. - Reactive Manifesto (2014) Source: https://www.reactivemanifesto.org/
9. Asynchronous data streams
10. Data
12. Data Time ?
15. Data Time Stream
16. Anything can be a stream
17. Data Time Stream Data Time Stream Data Time Stream Data Time Stream ~Asynchronous~
18. Asynchronous data streams Reactive programming
19. Observer pattern
20. The observer pattern is push-based
21. Asynchronous data streams. Publisher Subscriber
22. Asynchronous data streams. Publisher Subscriber
23. Asynchronous data streams. Publisher Subscriber Some other subscriber
24. In contrast: pull-based (eg. iterables)
25. Reactive Example
26. Spreadsheets
28. Reactive Programming is not a new concept
29. Source: Reactive Programming Origins and Ecosystem. Jonas Chapuis
30. Reactive programming with RxJava has enabled Netflix developers to leverage server-side concurrency without the typical thread-safety and synchronization concerns. Source: Reactive Programming in the Netflix API with RxJava Netflix: “ ”
31. - Concurrency - Non-blocking I/O - Caching - No need to change client code Source: Reactive Programming in the Netflix API with RxJava Netflix Service layer, after going reactive:
32. Drawbacks
33. - Learning curve: thinking in reactive - Memory leaks Remember to unsubscribe!
34. Implementation
35. Reactive Extensions (ReactiveX, Rx) Source: http://reactivex.io
36. Source: http://reactivex.io
37. Source: http://reactivex.io
38. Source: http://reactivex.io
39. Source: http://reactivex.io/intro.html Abstracts away concerns about thread safety, concurrent data structures etc
42. RxJS x marble diagrams
44. Source: http://reactivex.io/intro.html Live Coding with RxJS - Create an observable - An observer subscribes to it - Observer does stuff - Observer stops subscribing
45. My usual references learnrxjs.io rxjs.dev rxmarbles.com
46. Source: https://gist.github.com/staltz/868e7e9bc2a7b8c1f754
47. Thank you! @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)