// Synchronous Pulls [from source]
const response = pagination.updatePageSize(10); // standard function call
const names = = this.cache.users.map(user => { // array iteration
return user.fullName;
}
// Asynchronous Pulls [from source]
const userClick = new Promise((resolve) => { // async listening for event
onClick = event => {
window.removeEventListener(onClick);
resolve(event.target);
}
window.addEventListener('click', onClick)
});
const users$ = this.http.get<Users[]>(url); // async loading data 1x
Traditional
const users$ = this.http.get<Users[]>(url);
Temporary Streams
1x Build, 1x response
Traditional Architecture Approach
Even with RxJS and Observables, some uses can be considered PULL-Based
users$ = this.state$.pipe(map(state => state.users));
Use Long-lived Streams,
Build 1x with 1..n emissions
Views can 'react' to new data
New Architecture Approach
Client-side
// Synchronous Pulls [from facade]
const pagination$ = userFacade.pagination$
const criteria$ = userFacade.updateCriteria(
searchCriteria
);
// Asynchronous Pulls [from source]
const users$ = userFacade.users$
const results$ = userFacade.search(criteria);
Reactive
Let's build an application
With Pull-based Architectures
With Push-based Architectures
... without NgRx
findAllUsers( term)
Pull with call to
Define our State
Define our Service
1
2
Live Demo
Pull-Based Services Horrible UX
1-way Data Flows
With Push-based Architectures
APIs are Easy with
Push-based Architectures
Define our API
Immutable State
UserFacade
Cloud services are easy!
Internal Stream Merging
users$
pagination$
criteria$
Auto-call Cloud Service when state changes
Implement the Facade
output streams
emit values
emit values
emit values
input stream
Live Demo
Reactive Services == Wonderful UX
... easy to add NgRX later!
With Push-based Architectures
http://www.twitter.com/ThomasBurleson
http://www.github.com/ThomasBurleson
http://www.linkedin.com/in/ThomasBurleson
http://www.medium.com/@ThomasBurlesonIA
Mindspace, LLC,
Solutions Architect