DEV Community: Lonli-Lokli

Functional programming with Angular. 2. Typechecking

Lonli-Lokli — Sat, 22 May 2021 15:48:40 +0000

Typechecking is what typescript does for us. Unfortunately, it's not always true in core part of Angular world - templates.

In previous part we completed initial approach with Either type, representing union of Data (Right) and Error (Left). Now we will look in more details how this type is handled in @sweet-monads/either.

Either#mapRight

function mapRight<L, R, NewR>(fn: (val: R) => NewR): Either<L, NewR>;

Returns mapped by fn function value wrapped by Either if Either is Right otherwise Left with L value

Example:

const v1 = right<Error, number>(2);
const v2 = left<Error, number>(new Error());

const newVal1 = v1.map(a => a.toString()); // Either<Error, string>.Right with value "2"
const newVal2 = v2.map(a => a.toString()); // Either<Error, string>.Left with value new Error()

Either#mapLeft

function mapLeft<L, R, NewL>(fn: (val: L) => NewL): Either<NewL, R>;

Returns mapped by fn function value wrapped by Either if Either is Left otherwise Right with R value

Example:

const v1 = right<Error, number>(2);
const v2 = left<Error, number>(new Error());

const newVal1 = v1.mapLeft(a => a.toString()); // Either<string, number>.Right with value 2
const newVal2 = v2.mapLeft(a => a.toString()); // Either<string, number>.Left with value "Error"

So we might update first naive implementation from previous part with this code

But its not required as we used pure Either in template. How? Look into directive in previous part

@Directive({ selector: '[fpIfRight]' })
export class IfRightDirective<TE = unknown, TD = unknown> {
  static ngTemplateGuard_fpIfRight: 'binding'; // * Static binding

  private _context: IfContext<TE | TD> = initialIfContext(); // *  Initialization
  private _refs = initialRefs();

  constructor(viewContainer: ViewContainerRef, templateRef: TemplateRef<IfContext<TE | TD>>) {
    this._refs.viewContainer = viewContainer;
    this._refs.thenTemplateRef = templateRef;
  }

// * Directive's Input
  @Input()
  set fpIfRight(either: Either<TE, TD> | null) {
    if (either) {
      either
        .mapLeft(l => {
          this._context.ifTrue = false;
          this._context.$implicit = l;
        })
        .mapRight(r => {
          this._context.ifTrue = true;
          this._context.$implicit = r;
        });
    }
    updateView(this._context, this._refs);
  }

  @Input()
  set fpIfRightThen(templateRef: TemplateRef<IfContext<TE | TD>> | null) {
    this._refs.thenTemplateRef = templateRef;
    this._refs.thenViewRef = null;
    updateView(this._context, this._refs);
  }

// * Handling ELSE block in template
  @Input()
  set fpIfRightElse(templateRef: TemplateRef<IfContext<TE | TD>> | null) {
    this._refs.elseTemplateRef = templateRef;
    this._refs.elseViewRef = null;
    updateView(this._context, this._refs);
  }

// * Context validation magic
  static ngTemplateContextGuard<TE, TD>(
    _dir: IfRightDirective<TE, TD>,
    _ctx: any
  ): _ctx is IfContext<Exclude<TD, false | 0 | '' | null | undefined>> {
    return true;
  }
}

Lets start from the usage of directive

Here we declaring structural directive with if block, adding ELSE block for Left case (errorTpl) and specify variable with implicit context (let ok). This ok variable will have correct type even in VSCode syntax with Angular language service, just be sure that you specify strict in compiler options. It's available due to some code in our directive, see it later in topic.

Initialization
Here we initializing default values for our template, should it be in empty state or not. The same as with ngIf implementation, yes, it's kind of empty until first value arrives.
Directive's Input
Thats the place where we getting value from this line

<ng-container *fpIfRight="stations; else errorTpl; let ok">

Handling ELSE block in template
This block will be used when we will be handling Left state of our Either container. Unfortunately, it still not available for typecheck.
Static binding
Thats part related to Ivy- we specifying that we will build template from our code
Context validation magic
That's part I mostly like with Ivy. With Ivy magic we can declare for compiler what type supposed be used by structural directive.

All this typechecking gives us a lot of power for structural directives and custom templates.

Lonli-Lokli / functional_angular

Created with StackBlitz ⚡️

angular-ivy-5zkp66

Edit on StackBlitz ⚡️

View on GitHub

Functional programming with Angular. 1. Error Handling

Lonli-Lokli — Wed, 05 May 2021 15:26:29 +0000

Unhandled exception might lead to failed subscription and user's frustration when button click leads to nothing.

You can read about possible error handling strategies with Rxjs here

From functional point of view there are two kind of failures - expected (network call) and unexpected (divide by zero). First one should never crash your application.

Expected error is an operation which either fail or return data.

Usually data model is represented this way

interface Datum<T> {
  data?: T;
  error?: any
}

With this presentation you should always check yourself before accessing data is there any error or not, eg

Also your data become optional, which might lead to new errors in future. There are other approaches with handling data and error, greatly covered in Russian-speaking presentation (I highly recommend turn subtitles if you dont speak Russian, its really worth it)

I will show another approach in sample weather app, here is how it will look like

First naive implementation - separate properties and ngIfElse for handling different views (stackblitz)

Now we will use Either type from @sweet-monads\either as it gives a lot of additional methods for Either type, which is actually simple

type Either<Error, Data> = Error | Data;

So in our case we will have abstraction over data and error - container which can contain any of them. To make our life easier, we will use one of the greatest features in angular - directives! Look into new directive, IfRight and IfLeft.

(stackblitz)

We were able to get rid of additional properties from typescript but out template is heavier then before. We will adopt it with next steps later, lets focus in next chapter on some details with this Either way.

Lonli-Lokli / functional_angular

Created with StackBlitz ⚡️

angular-ivy-5zkp66

Edit on StackBlitz ⚡️

View on GitHub

Functional programming with Angular. 0. Introduction

Lonli-Lokli — Sat, 23 Jan 2021 13:12:51 +0000

Functional programming is kind of thing which usually is not too famous. You have to come to this one day and will be completely different.
What is this? Long story short, it's method of thinking. Personally me prefer to treat it as a stream when you do not do something, you are converting one items (inputs) to another (results), using some computational logic.
There are not a lot of resources for functional programming in JS at all, so my recommendation will be this link https://medium.com/@cb.yannick/functional-programming-with-typescript-part-1-3f7167a2c0ad

So what about angular? I did not found any good resources for Angular, maybe because with FP it's pretty common to avoid Dependency injection, which is a core and main part of Angular.

So I will try in next articles to show what and how I apply functional programming with Angular.