Download as PDF, PPTX
Uploaded byiMasters
JS Experience 2017 - Reactive Interfaces com React & RxJS
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.
JS Experience 2017 - Reactive Interfaces com React & RxJS
- 1.
- 2. Agenda ● Reactive Extensions ●Observer Pattern ● Iterator Pattern ● Observable Stream ● State Management ● Demos ● Q&A
- 3. Reactive Extensions ReactiveX isa combination of the best ideas from the Observer pattern, the Iterator pattern and Functional Programming.
- 4. Observer Pattern Observer patternis 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 patternis 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 isa library for composing asynchronous and event-based programs by using observable sequences.
- 7. Observable Stream Observable modelallows 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 byCategory: - Creating - Transforming - Filtering - Combining - Error Handling - Conditional - Mathematical - Backpressure
- 11. State Management State isthe 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.
- 13.
- 14. State Management Flux PatternRedux Pattern
- 15. State Management How canI 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 tohandle asynchronous actions ? // dispatcher v2 const dispatch = (actionType, data) => { stream$.next({ type: actionType, payload: data}) if (isStream(data)) { stream$.next(data) } }
- 20. State Management How tocreate 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.