DEV Community: Praveen

Async await like syntax, without ppx in Rescript !!!

Praveen — Wed, 29 Sep 2021 15:01:13 +0000

Prerequisite:

Basic understanding of functional programming.
Basic knowledge on Rescript/ReasonML.

The code and ideas that I will be discussing about in this article are my own opinions. It doesn't mean this is the way to do it, but it just means that this is also a way to do it. Just my own way.

In Rescript, currently (at the time of writing this article) there is no support for async/await style syntax for using promises. You can read about it here. Even though Rescript's pipe syntax make things cleaner and more readable, when it comes to working with promises there is still readability issues due to the lack of async/await syntax. There are ppx available to overcome this issue. But what if, we can overcome this issue without using any ppx.

Lets first look at, how existing promise chaining looks like in Rescript.

fetchAuthorById(1)
  |> Js.Promise.then_(author => {
    fetchBooksByAuthor(author) |> Js.Promise.then_(books => (author, books))
  })
  |> Js.Promise.then_(((author, books)) => doSomethingWithBothAuthorAndBooks(author, books))

In the above code, to access both author and books, I am creating a tuple to be passed into the next promise chain and using it there. This can easily grow and become more cumbersome when we chain three or more levels.

The idea is to,

Create a function that takes multiple promise functions as labelled arguments, executes them sequentially and stores each result as a value in an object, with labels as keys of the object

This idea is inspired from Haskell's DO notation. Lets see, how this function looks like.

type promiseFn<'a, +'b> = 'a => Js.Promise.t<'b>

let asyncSequence = (~a: promiseFn<unit, 'a>, ~b: promiseFn<{"a": 'a}, 'b>) =>
  a()
  |> Js.Promise.then_(ar => {"a": ar}->Js.Promise.resolve)
  |> Js.Promise.then_(ar =>
    ar
    ->b
    ->map(br =>
      {
        "a": ar["a"],
        "b": br,
      }
    )
  )

Lets understand what this function is doing.

A type called promiseFn is defined, that takes some polymorphic type 'a and returns a promise of type 'b.
asyncSequence function takes two labelled arguments a and b which are of type promiseFn.
Argument a is a function that takes nothing, but returns a promise of 'a.
Argument b is a function that takes an Object of type {"a": 'a} where the key a corresponds to the label a and the value 'a corresponds to the response of the function a.
a is first invoked and from its response an Object of type {"a": 'a} is created and passed into function b. The response of function b is taken and an object of type {"a": 'a, "b": 'b} is created.

The above function, chains only 2 promise functions. But, using this method we can create functions that chains multiple promise functions.

// Takes 3 functions
let asyncSequence3 = (
  ~a: promiseFn<unit, 'a>,
  ~b: promiseFn<{"a": 'a}, 'b>,
  ~c: promiseFn<{"a": 'a, "b": 'b}, 'c>,
) =>
  asyncSequence(~a, ~b) |> Js.Promise.then_(abr =>
    abr->c
      |> Js.Promise.then_(cr =>
        {
          "a": abr["a"],
          "b": abr["b"],
          "c": cr,
        }->Js.Promise.resolve
      )
  )

// Takes 4 functions
let asyncSequence4 = (
  ~a: promiseFn<unit, 'a>,
  ~b: promiseFn<{"a": 'a}, 'b>,
  ~c: promiseFn<{"a": 'a, "b": 'b}, 'c>,
  ~d: promiseFn<{"a": 'a, "b": 'b, "c": 'c}, 'd>,
) =>
  asyncSequence3(~a, ~b, ~c) |> Js.Promise.then_(abcr =>
    abcr->d
      |> Js.Promise.then_(dr =>
        {
          "a": abcr["a"],
          "b": abcr["b"],
          "c": abcr["c"],
          "d": dr,
        }->Js.Promise.resolve
      )
  )

// .... Any level

See, we are using previous asyncSequence3 to define next level asyncSequence4. To understand this function better, lets see how it is used. Lets rewrite our previous example using this asyncSequence4.

asyncSequence4(
  ~a=() => fetchAuthorById(1),
  ~b=arg => fetchBooksByAuthor(arg["a"]),
  ~c=arg => doSomethingWithBothAuthorAndBooks(arg["a"], arg["b"]),
  ~d=arg => Js.log(arg)->Js.Promise.resolve
)

// Response of asyncSequence4 will be a promise of type
// {
//  "a": <Author>,
//  "b": <BooksArray>,
//  "c": <Response of doSomethingWithBothAuthorAndBooks>
//  "d": <unit, since Js.log returns unit>
// }

What is happening is, the response of fetchAuthorById is taken and an object of type {"a": <Author>} is created. This object is passed to function b as arg and hence that function b has access to previous function a's result. Now the response of b is merged together with response of a into a single object as {"a": <Author>, "b": <BooksArray>} and passed to function c as argument arg. Now function c has access to both the response of a as well as response of b in the object that is received as argument. This is continued down the path to function d.

With this approach the chaining is easy and multiple asyncSequence can be chained like below, which can provide access to all the previous values.

let promiseResp = asyncSequence4(
  ~a=() => fetchAuthorById(1),
  ~b=arg => fetchBooksByAuthor(arg["a"]),
  ~c=arg => doSomethingWithBothAuthorAndBooks(arg["a"], arg["b"]),
  ~d=arg => Js.log(arg)->Js.Promise.resolve
)

asyncSequence(
  ~a=() => promiseResp,
  ~b=arg => doSomethingWithAllThePreviousResponse(arg["a"])
)

Before we jump into pros and cons of this approach, lets see one common mistake that can happen.

asyncSequence3(
  ~a=() => firstExecution(),
  ~c=_ => thirdExecution(),
  ~b=_ => secondExecution(),
)

The above code will compile fine. It is easy to think that c will be executed after a, but thats not true.
The execution will always happen from a to z even though the order is changed.

Now, lets see what are the pros and cons of this approach.

Pros:

Far more readable than the raw Promise chaining.
Somewhat similar to the js async await syntax.
Each function down the line has access to all the previous responses.
No PPX and no additional dependencies needed.
Completely type safe. Compiler will raise errors of any wrong usage.
One asyncSequence can be chained to the next asyncSequence easily.

Cons:

Multiple overloaded functions required.
Order must not be changed.
Keys of the object cannot be changed ("a", "b" ... will always be the keys).

You can check the refactored, full code here.

Hope you enjoyed! Happy Hacking!

Awesome list in rescript

Praveen — Sat, 29 May 2021 10:44:29 +0000

Prerequisite:

Basic understanding of functional programming.
Basic knowledge on rescript.

If you have already used or tried Rescript, then you should be already familiar with list{} in rescript. list{} is powerful but may cause performance issues if you don't understand how list{} works exactly. So lets try to understand it by creating our own list.

Lets first define the type.

type rec mylist<'a> = Nil | Cons('a, mylist<'a>)

mylist is a variant type with 2 type constructors, Nil and Cons. It also takes a generic type argument 'a, so that we can store any homogenous type (elements of same type) in our mylist.

Nil represents an empty mylist. Cons('a, mylist<'a>) takes two arguments 'a is the head, representing the current value and mylist<'a> is the tail, representing the following mylist. Now inserting multiple values into the list would look like below.

let data = Cons(1, Cons(2, Cons(3, Cons(4, Nil))))

The above code creates mylist data with type 'a' as int and values 1, 2, 3, 4. As you can see the Nil type constructor denotes an empty list which inturn means that this is the end of the mylist.

One awesome, cool thing about our mylist is, we can create an infinite list very easily. Lets create one.

let rec cycle = Cons(1, cycle)

Look at the rec keyword after the let keyword. This rec says to the compiler that there is a recursive reference in the declaration. The above code compiles without any error. The tail of the above mylist is nothing but itself. So this actually refers to something like below.

Cons(1, Cons(1, Cons(1, Cons(1, Cons(1, Cons(1, Cons(1, .....)))))))

Since the tail is only a reference, there will not be an infinite loop or errors when you run the above code. So the tail always contains a mylist with head value as 1. You could ask, where could this be useful? This could be useful in cases where we want a set of values to be returned in a cyclic way.

let rec cycle = Cons(1, Cons(2, Cons(3, Cons(4, cycle))))

The above cycle will cycle through the values 1, 2, 3, 4, 1, 2, 3, ... each time you access the head upon its tail. Lets try to write the above cycle using the list{} in rescript.

let rec cycleList = list{1, 2, 3, 4, ...cycleList}

This is same as the above cycle. Here, it is easy to mistake the spread operator as something that is eagerly evaluated, but it is not. ...cycleList just places the same list at tail position. That is the reason why you cannot do things like below.

// CANNOT do this
let rec cycleList = list{...cycleList, 1, 2, 3, 4}

Here you are trying to place the list in the head position, while you can only place it in the tail position.

// CANNOT do this
let rec cycleList = list{...cycleList, ...cycleList}

Here you are trying to place the list in the head position as well as in the tail position, while you can only place it in the tail position.

list{} in rescript exactly works like the mylist that we created and are nothing but just a syntactic sugar. To access any i^th element in mylist we have to iterate from head until the i^th element. That is why the Rescript documentation says that list{} is fast at prepending items and getting the tail value but slow at everything else.

Hope you enjoyed! Happy Hacking!

Filtering an array using a function that returns a promise

Praveen — Thu, 03 Sep 2020 15:05:24 +0000

Things get interesting when you want to filter an array of values, with a function returning promise of boolean instead of just a boolean

Prerequisite:

Basic understanding on how the promises work.
Basic knowledge of Typescript.

It is easy to filter an array of values using a function returning a boolean. Let see an example.

const values = [1, 2, 3, 4, 5, 6];
const isEven = (v: number) => v % 2 === 0;
const result = values.filter(isEven);
console.log(result);

// Output
// [ 2, 4, 6 ]

In the above code, we use a function called isEven to filter an array of numbers and return only the even numbers. We know that, the isEven function takes a number and returns a boolean value representing, whether the number is even or not.

Lets change the isEven function to return Promise<boolean> instead of just a boolean and try to filter values.

const values = [1, 2, 3, 4, 5, 6];
const isEvenPromise = (v: number) => new Promise(res => res(v % 2 === 0));
const result = values.filter(isEvenPromise);

// Output
// [1, 2, 3, 4, 5, 6]

As you can see, i got all the values in the output, which is wrong. Now, why did that happen?

This happened because the filter got a Promise as a result of executing the isEvenPromise function and not a boolean. As per the javascript's truthy concept, an object is always true, hence all the values are returned as output.

Now we know what the problem is, but how to solve this? Lets write a function to solve this.

First, lets define the type of our function to get a clear idea of how the function is going to look like.

type Filter = <T>(values: T[], fn: (t: T) => Promise<boolean>) => Promise<T[]>;

First parameter is the array of values of type T that has to be filtered.
Second parameter is a function that accepts a value of type T as an input and returns a Promise, of type boolean.
Return type is a Promise, holding an array of type T.

One thing to be noted is that, the return type of this function is not T[] but Promise<T[]>. This is because, the filter function does not return a boolean but returns a Promise<boolean>. We cannot remove the value out of a Promise. The only we to use the value returned from a Promise is either by using a then or by using async and await.

Now lets write the body of the function.

const filterPromise: Filter = async (values, fn) => {
    const promises = values.map(fn);                // Line 1
    const booleans = await Promise.all(promises);   // Line 2
    return values.filter((_, i) => booleans[i]);    // Line 3
};

One important thing to note here is that,

filter function in JS passes the index of the array as a second argument to the accepted function.

In Line 1, we map the values array to the fn instead of filtering it directly, so that we can obtain the boolean values first. In Line 2, we convert the array of promises into a promise, holding an array of booleans. We use the await keyword here to access the booleans. In Line 3, we filter the values using the ith element in the booleans array which holds the boolean value of ith element.

A representation of what each variable will hold as a result of the execution of each line is shown below.

For input values [1, 2, 3, 4, 5, 6],

Line 1:

// As a result of Line 1
const promises = [
    Promise<false>,
    Promise<true>,
    Promise<false>,
    Promise<true>,
    Promise<false>,
    Promise<true>,
]

Line 2:

// As a result of Line 2
const booleans = [
    false,
    true,
    false,
    true,
    false,
    true
]

Line 3:

// Return at Line 3
Promise<[2, 4, 6]>

As you can see, the result at Line 3 is properly filtered even numbers from the input array.

The entire code is shown below.

const values = [1, 2, 3, 4, 5, 6];
const isEvenPromise = (v: number): Promise<boolean> => new Promise(res => res(v % 2 === 0));

type Filter = <T>(values: T[], fn: (t: T) => Promise<boolean>) => Promise<T[]>;
const filterPromise: Filter = async (values, fn) => {
    const promises = values.map(fn);                // Line 1
    const booleans = await Promise.all(promises);   // Line 2
    return values.filter((_, i) => booleans[i]);    // Line 3
};

const result = filterPromise<number>(values, isEvenPromise);

result.then(d => console.log(d));

// Output
// [ 2, 4, 6 ]

If you are a fan of one liner like me, then the filterPromise function can be written in a single line like below.

const filterPromise = (values, fn) => 
    Promise.all(values.map(fn)).then(booleans => values.filter((_, i) => booleans[i]));

Hope you enjoyed! Happy Hacking!

Scan function in just one line in TS

Praveen — Sat, 01 Aug 2020 14:24:54 +0000

Prerequisite:

Basic understanding of generic functions in typescript.
Basic understanding of functional programming.

I will be using lodash library for some of the examples and to implement the one liner.

scan function is a higher order function similar to reduce, but reduce returns a single value whereas a scan returns an array of values. Lets see some examples to understand better.

REDUCE :

Passing [1 , 2, 3, 4, 5] to reduce function with identity element as 0 and sum as the input function will produce 15 as the output.

import { reduce } from 'lodash';

reduce([1, 2, 3, 4, 5], (a, b) => a + b, 0);

// Steps
 0 + 1 = 1
 1 + 2 = 3
 3 + 3 = 6
 6 + 4 = 10
10 + 5 = 15

// Output:
15

reduce function takes the input function (a, b) => a + b and applies it on 0 (identity value) and 1, then takes it output which is 1 and passes it as first parameter to the next function execution along with the next element in the array. This process is continued until the last element of the array and the result is returned.

SCAN :

Passing [1 , 2, 3, 4, 5] to scan function with identity element as 0 and sum as the input function will produce [1, 3, 6, 10, 15] as the output.

scan([1, 2, 3, 4, 5], (a, b) => a + b, 0);

// Steps
 0 + 1 = [1]
 1 + 2 = [1, 3]
 3 + 3 = [1, 3, 6]
 6 + 4 = [1, 3, 6, 10]
10 + 5 = [1, 3, 6, 10, 15]

// Output:
[1, 3, 6, 10, 15]

As you can see from above code, similar to reduce function the scan function passes output of first function, as the input to the next function execution but the only difference being that, the result of each function execution is stored in an array and that array is returned as a result.

You can notice that, the last element of the resulting array is 15 which was the output of reduce function.

So the main idea here is,

For the same input array of values and identity element, the result of a reduce function is always the last element in the result of a scan function.

Lets implement the scan function now.

import { range, take, reduce } from 'lodash';

const scan = <T>(values: T[], fn: (t1: T, t2: T) => T, identity: T): T[] =>
     range(1, values.length + 1).map(i => take(values, i)).map(a => reduce(a, fn, identity));

Don't worry, if you don't understand the above code now. Lets breakdown the above code to understand.

First parameter of the function is an array of type T.
Second parameter of the function is a function that takes two parameters of type T.
Last parameter of the function is an identity element of type T.
The return type of the function is an array of elements of type T.

Now lets look at the body of the function. Body of the function is formatted differently here for better understanding.

range(1, values.length + 1)
    .map(i => take(values, i))
    .map(a => reduce(a, fn, identity));

The range function creates a range iterator from 1 to n, where n is the length of the input array. From these numbers we use take function to take i elements from the values array each time. In other words, we make chunks of array from the given array, each holding 1, 1..2, 1..3 and so on until 1..n values. This will create an array of arrays like below.

[[1],
 [1, 2],
 [1, 2, 3],
 [1, 2, 3, 4],
 [1, 2, 3, 4, 5]]

When we apply reduce function on each of the element (array) of the array with the input identity as identity element, we will get the expected result like below.

[1, 3, 6, 10, 15]

Hope you enjoyed! Happy Hacking!

Cancellable promises in react and why is it required

Praveen — Sat, 18 Jul 2020 07:31:26 +0000

Prerequisite:

Basic understanding of react component and react hooks.
Basic understanding on how the promises work.
Basic knowledge of Typescript.

I will be using react with typescript (tsx) for examples. However, the same code can be used in js files without the type definitions.

Promises once fired, cannot be cancelled. So cancelling the promises in our current context means to ignore the result of the promise. When an api call is fired inside a react component, any state update after the component is destroyed (inside the then block of the promise), will cause error.

In order to avoid this, lets write a function that takes a normal promise and converts that into a cancellable promise which does not invoke any state updates on the component that is destroyed.

export const cancellablePromise = (promise: Promise<any | void>) => {
    const isCancelled = { value: false };
    const wrappedPromise = new Promise((res, rej) => {
        promise
            .then(d => {
                return isCancelled.value ? rej(isCancelled) : res(d);
            })
            .catch(e => {
                rej(isCancelled.value ? isCancelled : e);
            });
    });

    return {
        promise: wrappedPromise,
        cancel: () => {
            isCancelled.value = true;
        }
    };
};

Lets break down the above code and try to understand whats happening.

export const cancellablePromise = (promise: Promise<any | void>) => {

This function takes a single argument, which is the promise that needs to be cancelled when the component that is using the promise is destroyed.

const isCancelled = { value: false };

We declare an object that holds a value that states whether the current promise is cancelled or not.

This value will be changed to true when the component is destroyed, to indicate that the promise is cancelled.

const wrappedPromise = new Promise((res, rej) => {
    promise
        .then(d => {
            return isCancelled.value ? rej(isCancelled) : res(d);
        })
        .catch(e => {
            rej(isCancelled.value ? isCancelled : e);
        });
});

Here, we create one more promise, a wrapped one, that takes the original promise and rejects if the promise is cancelled (value is true). If the promise is not cancelled (value is false), only then the result is resolved. Also, when there is some error in the original promise, then that error is reported to the caller only if the promise is not cancelled. If the promise is cancelled then the cancellation is reported.

return {
    promise: wrappedPromise,
    cancel: () => {
        isCancelled.value = true;
    }
};

Finally, we return an object, which has a converted promise as promise and another function called cancel which can be called, to cancel the promise when the component is destroyed.

Now lets see how to use this function in a react component. Consider the following component.

const HelloComponent = () => {
    const [message, setMessage] = useState('');

    useEffect(async () => {
        const p = await axios.get('https://<someurlreturningthemessage>').then(d => d.data);
        const { promise, cancel } = cancellablePromise(p); // converting original promise to cancellable promise
        promise.then(d => {
            // Write your local state updates here
            setMessage(d);
        });
        return cancel;
    }, [setMessage]);

    return <div>
        <h2>{message}</h2>
    </div>;
};

The above component just displays the message that is returned from an api call (a promise). Here, i have used an axios get call to get the message. The useEffect react hook is used to update the state of the local component based on any modifications in the list of dependencies that is passed as the second parameter, here it is just the setMessage function.

The main thing about the useEffect hook is that, the function that is returned with in the useEffect hook is called when the component is destroyed or removed from the component tree. As you can see, we return the cancel function that we got from the cancellablePromise. When react calls cancel function, the promise is set to cancelled (value = true). Now, the then block will not be called (which contains the state updates) if the component is destroyed.

Refer here for more detail about the useEffect hook.

Now the cancellablePromise can be used inside any component where there is an api call or any other promise related stuffs.

Conclusion:

It is generally a good practice NOT to call the apis directly from the component. You may have to use some sort of state container libraries like redux, to do that for you and inject the result as props to your component. However, there may be exceptional cases where you need to call the apis directly (eg. Autofill). In such cases you can use the cancellablePromise.

Hope you enjoyed! Happy Hacking!