Reactive Angular

 

RxJS + Facades

You have been coding wrong!

For years,

Push-Based Architectures

Push-Based Architectures

// 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

Let's build our application....

findAllUsers( term)

Pull with call to

Pull-Based Architecture

Define our State

Define our Service

1

2

Live Demo

Pull-Based Services            Horrible UX

  • Danger:
    • users, criteria, and pagination are writable
    • criteria and pagination can change without changes to users
  • Caution:
    • criteria and pagination must be assigned before calls to findAllUsers()
    • assignments to criteria and pagination should be validated
    • findAllUsers() will return an observable AND assign to users
  • Problem:
    • If criteria, pagination, or users changes, how are the views notified?
    • What about replay features so multiple calls to findAllUsers() can share results?

Let's build our application...

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

  • UX
    • Auto-search for users for any criteria and pagination changes
    • UI auto-updates for pagination or criteria changes
    • UI Components are passive/reactive
  • UI
    • Full non-UI, business-layer testing
    • e2e is simply for UI layouts and style regressions 

... 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

Reactive Angular: RxJS + Facades

By Thomas Burleson

Reactive Angular: RxJS + Facades

Learn to build Push-based Architectures using RxJS + Facades... then add NgRx later!

  • 5,056

More from Thomas Burleson