This document summarizes a presentation about reactive interfaces. It discusses reactive extensions, the observer pattern, iterator pattern, observable streams, and state management using RxJS. The observer pattern is used for one-to-many relationships where dependent objects are notified of changes. The iterator pattern accesses collection elements sequentially without knowing the representation. Reactive extensions compose asynchronous programs using observable sequences. Observable streams treat asynchronous events like arrays using simple operations. State management with RxJS involves creating a BehaviorSubject to merge actions and reduce state changes.

1. Reactive Interfaces
Keuller Magalhães
@keullermag

2. Agenda
● Reactive Extensions
● Observer Pattern
● Iterator Pattern
● Observable Stream
● State Management
● Demos
● Q&A

3. Reactive Extensions
ReactiveX is a combination of the best ideas from
the Observer pattern, the Iterator pattern and
Functional Programming.

4. Observer Pattern
Observer pattern is used when
there is one-to-many
relationship between objects
such as if one object is
modified, its depenedent
objects are to be notified
automatically.

5. Iterator Pattern
This pattern is used to get a way to access the elements of a collection object in sequential
manner without any need to know its underlying representation.

6. Reactive Extensions
ReactiveX is a library for composing asynchronous and
event-based programs by using observable sequences.

7. Observable Stream
Observable model allows you to treat streams of
asynchronous events with the same sort of simple,
composable operations that you use for collections of data
items like arrays.
Observer + Iterator = Observable

8. Observable Stream
let source = Rx.Observable.create(function(observer) {
observer.next(1);
observer.next(2);
observer.next(3);
observer.complete();
return function() { console.log(‘disposed!’); }
});
source.subscribe(
function(value) { console.log(‘Next:’, value); },
function(err) { console.error(err) },
function() { console.log(‘completed!’);
);

9. Observable Stream
// output
Next: 1
Next: 2
Next: 3
completed!

10. Observable Stream
Operators by Category:
- Creating
- Transforming
- Filtering
- Combining
- Error Handling
- Conditional
- Mathematical
- Backpressure

11. State Management
State is the information that represents the current User’s context.
Application state is composed by:
- All data persisted across page refresh
- All data persisted across route change
- All data used in multiple places in the UI

12. State Management
Flux Pattern

13. State Management
Redux Pattern

14. State Management
Flux Pattern Redux Pattern

15. State Management
How can I manage the application state
using RxJS ?

16. State Management
const stream$ = new Rx.BehaviorSubject()
const createStore = (rootReducer, initialState) =>
stream$.mergeMap(ensureStream)
.scan(rootReducer, initialState)
const dispatch = (actionType, data) =>
stream$.next({ type: actionType, payload: data})

17. State Management
const isStream = (value) => (value instanceof Rx.Observable)
const ensureStream = (value) =>
(isStream(value) ? action : Rx.Observable.of(value))
const createAction = (actionType) => {
return (data) => { dispatcher(actionType, data) }
}

19. State Management
How to handle asynchronous actions ?
// dispatcher v2
const dispatch = (actionType, data) => {
stream$.next({ type: actionType, payload: data})
if (isStream(data)) {
stream$.next(data)
}
}

20. State Management
How to create asynchronous actions ?
const fetchContacts = createAction(‘Bbt.Fetch’);
const loadContacts = createAction(‘Bbt.Load’);
let source = Rx.Observable.fromPromise(fetch(url)
.then(resp => resp.json()))
.map(list => loadContacts(list))
fetchContacts(source)

24. Referências
http://reactivex.io
https://www.tutorialspoint.com/design_pattern/observer_pattern.htm
https://www.tutorialspoint.com/design_pattern/iterator_pattern.htm
http://rxmarbles.com/
Keuller Magalhães
kmagalhaes@uolinc.com