The document discusses reactive programming and provides examples using RxJS. It defines reactive programming as working with asynchronous data streams. Streams can represent events like user inputs or API responses. Key concepts discussed include: - Observables represent streams of data that can be subscribed to. Common stream operations like map, filter, and scan can transform streams. - An example demonstrates creating a stream for a "Who to follow" API, making a request on startup and refresh, and rendering responses. - Other operators like merge, startWith, and combineLatest are used to combine multiple streams of events and responses.

1. Reactive Programming
Buğra Uluyurt

2. Programming Types
Hardest part while learning Reactive
Programming => THINKING IN REACTIVE
Programming Types
- Imperative (Stateful)
- Declarative - Functional (Stateless)
- Reactive

3. Programming Types
IMPERATIVE
Imperative programming is a programming paradigm that uses statements that change a
program’s state.

4. Programming Types
DECLARATIVE
Declarative programming is a programming paradigm … that expresses the logic of a
computation without describing its control flow.

5. Programming Types
REACTIVE
- Wikipedia => it is like a description in a CS book which is generic and theoretical
- Reactive manifesto => it is so generic for a developer with dirty hands
- Stackoverlow => Look at stackoverflow and never look back to reactive
programming again. Morale killing explanations, hard and most advanced stuff
without explaining its core.
Reactive programming is programming with asynchronous data streams
Nothing new just made easier!
It is like dealing with event streams such as =>
- Event buses
- Click events
Streams are cheap, anything can be a stream:
- Variables,
- User inputs
- Caches etc.
YOU CAN LISTEN THESE STREAMS AND REACT ACCORDINGLY

6. Can use my regular mapping, filtering?
YES
RX Library provides amazing toolbox of functions to combine,
create and filter those streams
RX uses functional magic too! =>
- A stream can be used as an input to another one
- Multiple streams can be used as inputs to another stream
- Streams can be merged
- Streams can be filtered
- Data values in a particular stream can be mapped from one stream to another

7. What is at the center of Reactive
Programming
STREAMS
Clicking on a button stream

8. Streams
A stream is a sequence of ongoing events
ordered in time.
It can emit 3 things =>
- Value (of some type)
- Error
- Completed signal
Consider that the “completed” takes place, for instance, when the current window or
view containing that button is closed

9. Streams
We capture these emitted values
asynchronously => How? =>
- A function which will invoke after the value is emitted
- A function which will invoke after an error is emitted
- A function which will invoke after completed is emitted
Listening a stream is called => SUBSCRIPTION / SUBSCRIBING
Sometimes last 2 can be omitted. Only value emission is taken into account.
• Functions we are defining are called OBSERVERS.
• Stream is being observed by observers. Therefore it is the subject. That’s
why we call it OBSERVABLE

10. Streams
--a---b-c---d---X---|->
a, b, c, d are emitted values
X is an error
| is the 'completed' signal
---> is the timeline

11. Streams
clickStream: ---c----c--c----c------c-->
vvvvv map(c becomes 1) vvvv
---1----1--1----1------1-->
vvvvvvvvv scan(+) vvvvvvvvv
counterStream: ---1----2--3----4------5-->
Each stream has many functions attached to it, such as map, filter, scan, etc. When you
call one of these functions, such as clickStream.map(f), it returns a new stream based
on the click stream.
- Original stream is not modified. It is called immutability.
- Non modified streams allows us to chain functions =>
clickStream.map(mapFn).scan(addFn)

12. Stream example
• Lets make a stream of “double click” events. Or lets make “triple click”
events!
• Imagine how we would do that in a traditional imperative and stateful
way.
REACTIVE PROGRAMMING filters the implementation to 4 lines of code =>

13. - Grey boxes are functions
transforming one stream into
another.
- We can then subscribe ("listen")
to it to react accordingly how we
wish
* We can apply the same
operations on different kinds of
streams, on a stream of API
responses

14. Why should we consider Reactive Programming
• Raises the level of abstraction
Focus on business logic, don’t think about implementation details
Thinking in RP with examples =>
Rx library family is available for => (.NET, Java, Scala, Clojure, JavaScript, Ruby, Python, C++,
Objective-C/Cocoa, Groovy, etc)
http://reactivex.io/languages.html
Through our presentation we will use RxJS

15. Implementing “Who to follow”
suggestions box

16. RX Example
1. Doing the request
2. Getting the request
3. Rendering the response
--a------|->
Where a is the string 'https://api.github.com/users'

17. RX Example
• To create such stream with a single value is
simple in RX. Official terminology for a stream
is => Observable.

18. RX Example

19. RX Example
Rx.Observable.create => Creates your own custom stream by explicitly
informing each observer (or in other words, a "subscriber") about data
events (onNext()) or errors (onError()). What we did was just wrap that
jQuery Ajax Promise.
PROMISE IS AN OBSERVABLE => YES! OBSERVABLE IS PROMISE ++

20. RX Example
In RX we can easily convert Promise to an observable by using
Rx.Observable.fromPromise(promise)
What we have created is stream of streams (metastream)

22. RX Example
• What we just wanted was a simple stream of users (an Array each time). A
. Not a stream of streams.
requestStream: --a-----b--c------------|->
responseStream: -----A--------B-----C---|->
(lowercase is a request, uppercase is
its response)

23. RX Example

24. RX Example
Refresh Button
But something broke => A request doesn’t happen anymore on startup
SOLUTION => Merging requestOnRefreshStream with startupRequestStream

25. RX Example
stream A: ---a--------e-----o----->
stream B: -----B---C-----D-------->
vvvvvvvvv merge vvvvvvvvv
---a-B---C--e--D--o----->

26. RX Example
There is a cleaner way of writing it =>
Even cleaner

27. RX Example
Even more cleaner
Look at startWith from rxjs docs

28. RX Example
We want ‘on Refresh’ => ‘Clear suggestions’
Modelling Suggestions

29. RX Example
When rendering, we interpret null as “no-data”, hence hiding its UI element

30. RX Example
We can empty suggestions during startup

31. RX Example
Closing suggestions and using cached responses
This DOES NOT WORK

32. RX Example
Let’s think about it
In RX there is combineLatest operator

33. RX Example