Context - higher order component

[BioPhoton]

Context

Higher Oerder Component

---

Case Study

The subject is a view that displays data e.g. a list of items or one single piece of information. In this case, the template structure consists of a loading spinner a search box, and a list.

The situation explained in steps:

• Navigating to the page fires an HTTP request.
• A loading spinner is displayed
• The request resolves, the loading spinner gets removed and the list is displayed
• The search box state changes and a new request is fired
• A loading spinner is displayed
• The request resolves, the loading spinner gets removed and the list is displayed

Prior Ar

@Component({
  selector: 'any-component',
  template: `
    <p *ngIf="list$ | async as list; else loadingOrError">
        List count: {{ list.length}}
    </p>

    <ng-template #loadingOrError>
        <p *ngIf="isError$ | async; else loading">Error!</p>
        <ng-template #loading>Loading...</ng-template>
    </ng-template>
  `
})
export class AnyComponent  {
  list$ = this.globalState.list$;
  isError$ = new BehaviorSubject<boolean>(false);
}

Problem Solved By The Feature

When we want to create a simple type-ahead search it requires quite some knowledge and a lot of template structures to set this up.

In the above example we handle 2 different states:

• loadingOrError
• list present

Template Management

Consider the above case with the loading template and the list, it would get displayed and hidden several times in the user's interaction. In such situations, the performance suffers from instantiating those components multiple times in the if/else selections.

Mental-model and cognitive load

The examples code and several related structures are hard to implement and understand. The primary goal of handling user feedback and it's contextual information is not well defined either in state-management, component level, or directives.

This often leads to inconsistent implementations and mental models.

Hard to integrate

Even with helper components the, current concepts of integrating user feedback are poorly respected in today's solutions. It's hard to structure template wise, and there is no way of abstracting those states as meta-level info wrapped around any situation where user feedback is needed.

Hard to extend

The common approaches to context-related information often focus on only a part of the possible states or unite some of them as seen above. This makes it hard to handle the different states in the template or the component class.

Solution

The solution serves to layers which will improve the situation. It will structure and categorize the context-related information as well as enable us to switch in between those states based on the source of data itself, or user-controlled triggers.

@Component({
 selector: 'any-component',
 template: `
 <ul [context]=”list$; suspense: suspense$; error: error$; complete: complete$;”>
   <li *rxFor=”let item of list$”>{{item}}</li>
   <!-- Templates     👇 -->
   <li rxSuspense>Loading…</li>
   <li rxError>Ups…</div>
   <li rxComplete>Tadaa!</li>
 </ul>
 `
})
export class Component {
list$ = this.globalState.list$;

suspense$ = new Subject<boolean>(false);
error$ = new Subject<boolean>(false);
complete$ = new Subject<boolean>(false);
}

Concepts

• [x] Categorize contextual information into:
  • [x] 💡 Suspense (loagin, initializing)
  • [x] Error (errors, warning, assertive information)
  • [x] Complete (success, completion, primary information)
• [x] Enable source and user 💡 triggers for a context switch

Features

• [x] Usable as HOC
• [x] Handles the contextual state of the source directly
  • [x] Promise
  • [x] Observable
  • [x] Static values
• [x] Handles the contextual state over input bindings:
  • [x] suspense
  • [x] error
  • [x] complete
• [x] Intuitive template switching

Challenges

Alternatives Considered

• The first approach was to implement the above into the structural directives rxLet, rxIf, rxSwitch and rxFor directly, which bloated the public API as well as the codebase.
• As the second approach we tried to implement it as the structural directive. This was still hard to handle as the template management had to be done manually. Also, it made it impossible to mix it with other structural directives.

Comparison

Additional Context

[BioPhoton]

cc @vmasek