<img class="img-fluid rounded mx-auto d-block" src="/img/rescript_async.jpg" alt="async">
<h3>Prerequisite:</h3>
<ul>
<li>Basic understanding of functional programming.</li>
<li>Basic knowledge on Rescript/ReasonML.</li>
</ul>
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 <a class="markdown-a" target="_blank" href="https://rescript-lang.org/docs/manual/latest/promise">here</a>. 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.
<pre><code class="language-reasonml">fetchAuthorById(1)
 |> Js.Promise.then_(author => {
 fetchBooksByAuthor(author) |> Js.Promise.then_(books => (author, books))
 })
 |> Js.Promise.then_(((author, books)) => doSomethingWithBothAuthorAndBooks(author, books))
</code></pre>
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,
<blockquote>
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
</blockquote>
This idea is inspired from Haskell's <code>DO</code> notation. Lets see, how this function looks like.
<pre><code class="language-reasonml">type promiseFn&#x3C;'a, +'b> = 'a => Js.Promise.t&#x3C;'b>

let asyncSequence = (~a: promiseFn&#x3C;unit, 'a>, ~b: promiseFn&#x3C;{"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,
 }
 )
 )
</code></pre>
Lets understand what this function is doing.
<ol>
<li>A <code>type</code> called <code>promiseFn</code> is defined, that takes some polymorphic type <code>'a</code> and returns a promise of type <code>'b</code>.</li>
<li><code>asyncSequence</code> function takes two labelled arguments <code>a</code> and <code>b</code> which are of type <code>promiseFn</code>.</li>
<li>Argument <code>a</code> is a function that takes nothing, but returns a promise of <code>'a</code>.</li>
<li>Argument <code>b</code> is a function that takes an <code>Object</code> of type <code>{"a": 'a}</code> where the key <code>a</code> corresponds to the label <code>a</code> and the value <code>'a</code> corresponds to the response of the function <code>a</code>.</li>
<li><code>a</code> is first invoked and from its response an <code>Object</code> of type <code>{"a": 'a}</code> is created and passed into function <code>b</code>. The response of function <code>b</code> is taken and an object of type <code>{"a": 'a, "b": 'b}</code> is created.</li>
</ol>
The above function, chains only 2 promise functions. But, using this method we can create functions that chains multiple promise functions.
<pre><code class="language-reasonml">// Takes 3 functions
let asyncSequence3 = (
 ~a: promiseFn&#x3C;unit, 'a>,
 ~b: promiseFn&#x3C;{"a": 'a}, 'b>,
 ~c: promiseFn&#x3C;{"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&#x3C;unit, 'a>,
 ~b: promiseFn&#x3C;{"a": 'a}, 'b>,
 ~c: promiseFn&#x3C;{"a": 'a, "b": 'b}, 'c>,
 ~d: promiseFn&#x3C;{"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
</code></pre>
See, we are using previous <code>asyncSequence3</code> to define next level <code>asyncSequence4</code>. To understand this function better, lets see how it is used. Lets rewrite our previous example using this <code>asyncSequence4</code>.
<pre><code class="language-reasonml">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": &#x3C;Author>,
// "b": &#x3C;BooksArray>,
// "c": &#x3C;Response of doSomethingWithBothAuthorAndBooks>
// "d": &#x3C;unit, since Js.log returns unit>
// }
</code></pre>
What is happening is, the response of <code>fetchAuthorById</code> is taken and an object of type <code>{"a": &#x3C;Author>}</code> is created.
This object is passed to function <code>b</code> as <code>arg</code> and hence that function <code>b</code> has access to previous function <code>a</code>'s result.
Now the response of <code>b</code> is merged together with response of <code>a</code> into a single object as <code>{"a": &#x3C;Author>, "b": &#x3C;BooksArray>}</code> and
passed to function <code>c</code> as argument <code>arg</code>. Now function <code>c</code> has access to both the response of <code>a</code> as well as response of <code>b</code> in the object that is received as argument. This is continued down the path to function <code>d</code>.
With this approach the chaining is easy and multiple <code>asyncSequence</code> can be chained like below, which can provide access to all the previous values.
<pre><code class="language-reasonml">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"])
)
</code></pre>
Before we jump into pros and cons of this approach, lets see one common mistake that can happen.
<pre><code class="language-reasonml">asyncSequence3(
 ~a=() => firstExecution(),
 ~c=_ => thirdExecution(),
 ~b=_ => secondExecution(),
)
</code></pre>
The above code will compile fine. It is easy to think that <code>c</code> will be executed after <code>a</code>, but thats not true.
The execution will always happen from <code>a</code> to <code>z</code> even though the order is changed.
Now, lets see what are the pros and cons of this approach.
<h2>Pros:</h2>
<ol>
<li>Far more readable than the raw Promise chaining.</li>
<li>Somewhat similar to the js async await syntax.</li>
<li>Each function down the line has access to all the previous responses.</li>
<li>No PPX and no additional dependencies needed.</li>
<li>Completely type safe. Compiler will raise errors of any wrong usage.</li>
<li>One <code>asyncSequence</code> can be chained to the next <code>asyncSequence</code> easily.</li>
</ol>
<h2>Cons:</h2>
<ol>
<li>Multiple overloaded functions required.</li>
<li>Order must not be changed.</li>
<li>Keys of the object cannot be changed ("a", "b" ... will always be the keys).</li>
</ol>
You can check the refactored, full code <a class="markdown-a" target="_blank" href="https://github.com/praveen-kumar-rr/rescript-async/blob/master/src/Promise.res">here</a>.
Hope you enjoyed! Happy Hacking!

Rescript does not support async await. You may have to use ppx to achieve that in Rescript. But what if we can do it with out using any ppx at all.

rescript-async

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

<img class="img-fluid rounded mx-auto d-block" src="/img/rescript_list.png" alt="list">
<h3>Prerequisite:</h3>
<ul>
<li>Basic understanding of functional programming.</li>
<li>Basic knowledge on rescript.</li>
</ul>
If you have already used or tried Rescript, then you should be already familiar with <code>list{}</code> in rescript. <code>list{}</code> is powerful but may cause performance issues if you don't understand how <code>list{}</code> works exactly. So lets try to understand it by creating our own list.
Lets first define the type.
<pre><code class="language-ocaml">type rec mylist&#x3C;'a> = Nil | Cons('a, mylist&#x3C;'a>)
</code></pre>
mylist is a variant type with 2 type constructors, <code>Nil</code> and <code>Cons</code>. It also takes a generic type argument <code>'a</code>, so that we can store any homogenous type (elements of same type) in our mylist.
<code>Nil</code> represents an empty mylist. <code>Cons('a, mylist&#x3C;'a>)</code> takes two arguments <code>'a</code> is the head, representing the current value and <code>mylist&#x3C;'a></code> is the tail, representing the following mylist. Now inserting multiple values into the list would look like below.
<pre><code class="language-ocaml">let data = Cons(1, Cons(2, Cons(3, Cons(4, Nil))))
</code></pre>
The above code creates mylist <code>data</code> with type <code>'a'</code> as <code>int</code> and values <code>1, 2, 3, 4</code>. As you can see the <code>Nil</code> 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.
<pre><code class="language-ocaml">let rec cycle = Cons(1, cycle)
</code></pre>
Look at the <code>rec</code> keyword after the <code>let</code> keyword. This <code>rec</code> says to the compiler that there is a recursive reference in the declaration. The above code compiles without any error. The <code>tail</code> of the above mylist is nothing but itself. So this actually refers to something like below.
<pre><code class="language-ocaml">Cons(1, Cons(1, Cons(1, Cons(1, Cons(1, Cons(1, Cons(1, .....)))))))
</code></pre>
Since the tail is only a reference, there will not be an infinite loop or errors when you run the above code. So the <code>tail</code> always contains a mylist with <code>head</code> 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.
<pre><code class="language-ocaml">let rec cycle = Cons(1, Cons(2, Cons(3, Cons(4, cycle))))
</code></pre>
The above <code>cycle</code> will cycle through the values <code>1, 2, 3, 4, 1, 2, 3, ...</code> each time you access the <code>head</code> upon its <code>tail</code>. Lets try to write the above <code>cycle</code> using the <code>list{}</code> in rescript.
<pre><code class="language-ocaml">let rec cycleList = list{1, 2, 3, 4, ...cycleList}
</code></pre>
This is same as the above <code>cycle</code>. Here, it is easy to mistake the spread operator as something that is eagerly evaluated, but it is not. <code>...cycleList</code> just places the same <code>list</code> at tail position. That is the reason why you cannot do things like below.
<pre><code class="language-ocaml">// CANNOT do this
let rec cycleList = list{...cycleList, 1, 2, 3, 4}
</code></pre>
Here you are trying to place the list in the head position, while you can only place it in the tail position.
<pre><code class="language-ocaml">// CANNOT do this
let rec cycleList = list{...cycleList, ...cycleList}
</code></pre>
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.
<code>list{}</code> in rescript exactly works like the mylist that we created and are nothing but just a syntactic sugar. To access any ith element in mylist we have to iterate from head until the ith element. That is why the Rescript <a class="markdown-a" target="_blank" href="https://rescript-lang.org/docs/manual/latest/array-and-list#list">documentation</a> says that <code>list{}</code> is fast at prepending items and getting the tail value but slow at everything else.
Hope you enjoyed! Happy Hacking!

Lets try to understand list in rescript better by creating our own list

rescript-list

Awesome list in rescript

Things get interesting when you want to filter an array of values, with a function returning promise of boolean instead of just a boolean
<img class="img-fluid rounded mx-auto d-block" src="/img/filter-with-promise.jpg" alt="filter promise">
<h3>Prerequisite:</h3>
<ul>
<li>Basic understanding on how the promises work.</li>
<li>Basic knowledge of Typescript.</li>
</ul>
It is easy to filter an array of values using a function returning a boolean. Let see an example.
<pre><code class="language-typescript">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 ]
</code></pre>
In the above code, we use a function called <code>isEven</code> to filter an array of numbers and return only the even numbers. We know that, the <code>isEven</code> function takes a <code>number</code> and returns a <code>boolean</code> value representing, whether the number is even or not.
Lets change the <code>isEven</code> function to return <code>Promise&#x3C;boolean></code> instead of just a <code>boolean</code> and try to filter values.
<pre><code class="language-typescript">const values = [1, 2, 3, 4, 5, 6];
const isEvenPromise = (v: number) => new Promise((res) => res(v % 2 === 0));
const result = values.filter(isEvenPromise);
</code></pre>
<pre><code class="language-typescript">// Output
// [1, 2, 3, 4, 5, 6]
</code></pre>
As you can see, we got all the values in the output, which is wrong. Now, why did that happen?
This happened because the filter got a <code>Promise</code> as a result of executing the <code>isEvenPromise</code> function and not a <code>boolean</code>. As per the javascript's truthy concept, an object is always <code>true</code>, 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.
<pre><code class="language-typescript">type Filter = &#x3C;T>(values: T[], fn: (t: T) => Promise&#x3C;boolean>) => Promise&#x3C;T[]>;
</code></pre>
<ul>
<li>First parameter is the array of <code>values</code> of type <code>T</code> that has to be filtered.</li>
<li>Second parameter is a function that accepts a value of type <code>T</code> as an input and returns a <code>Promise</code>, of type <code>boolean</code>.</li>
<li>Return type is a <code>Promise</code>, holding an array of type <code>T</code>.</li>
</ul>
One thing to be noted is that, the return type of this function is not <code>T[]</code> but <code>Promise&#x3C;T[]></code>. This is because, the filter function does not return a <code>boolean</code> but returns a <code>Promise&#x3C;boolean></code>. We cannot remove the value out of a <code>Promise</code>. The only we to use the value returned from a <code>Promise</code> is either by using a <code>then</code> or by using <code>async</code> and <code>await</code>.
Now lets write the body of the function.
<pre><code class="language-typescript">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
};
</code></pre>
One important thing to note here is that,
<blockquote>
<code>filter</code> function in JS passes the <code>index</code> of the array as a second argument to the accepted function.
</blockquote>
In <code>Line 1</code>, we <code>map</code> the values array to the <code>fn</code> instead of filtering it directly, so that we can obtain the <code>boolean</code> values first. In <code>Line 2</code>, we convert the array of promises into a promise, holding an array of booleans. We use the <code>await</code> keyword here to access the <code>booleans</code>. In <code>Line 3</code>, we filter the <code>values</code> using the <code>i</code>th element in the <code>booleans</code> array which holds the boolean value of <code>i</code>th element.
A representation of what each variable will hold as a result of the execution of each line is shown below.
For input values <code>[1, 2, 3, 4, 5, 6]</code>,
<h4>Line 1:</h4>
<pre><code class="language-typescript">// As a result of Line 1
const promises = [
 Promise&#x3C;false>,
 Promise&#x3C;true>,
 Promise&#x3C;false>,
 Promise&#x3C;true>,
 Promise&#x3C;false>,
 Promise&#x3C;true>,
]
</code></pre>
<h4>Line 2:</h4>
<pre><code class="language-typescript">// As a result of Line 2
const booleans = [false, true, false, true, false, true];
</code></pre>
<h4>Line 3:</h4>
<pre><code class="language-typescript">// Return at Line 3
Promise&#x3C;[2, 4, 6]>
</code></pre>
As you can see, the result at <code>Line 3</code> is properly filtered even numbers from the input array.
The entire code is shown below.
<pre><code class="language-typescript">const values = [1, 2, 3, 4, 5, 6];
const isEvenPromise = (v: number): Promise&#x3C;boolean> =>
 new Promise((res) => res(v % 2 === 0));

type Filter = &#x3C;T>(values: T[], fn: (t: T) => Promise&#x3C;boolean>) => Promise&#x3C;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&#x3C;number>(values, isEvenPromise);

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

// Output
// [ 2, 4, 6 ]
</code></pre>
If you are a fan of one liner like me, then the <code>filterPromise</code> function can be written in a single line like below.
<pre><code class="language-typescript">const filterPromise = (values, fn) =>
 Promise.all(values.map(fn)).then((booleans) =>
 values.filter((_, i) => booleans[i])
 );
</code></pre>
Hope you enjoyed! Happy Hacking!

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

filter-with-promise

Filtering an array using a function that returns a promise

<img class="img-fluid rounded mx-auto d-block" src="/img/scan_function.jpg" alt="function">
<h3>Prerequisite:</h3>
<ul>
<li>Basic understanding of generic functions in typescript.</li>
<li>Basic understanding of functional programming.</li>
</ul>
I will be using <a class="markdown-a" target="_blank" href="https://lodash.com/docs/4.17.15">lodash</a> library for some of the examples and to implement the one liner.
<code>scan</code> function is a higher order function similar to <code>reduce</code>, but <code>reduce</code> returns a single value whereas a <code>scan</code> returns an array of values. Lets see some examples to understand better.
REDUCE :
Passing <code>[1 , 2, 3, 4, 5]</code> to <code>reduce</code> function with identity element as <code>0</code> and <code>sum</code> as the input function will produce <code>15</code> as the output.
<pre><code class="language-typescript">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
</code></pre>
<code>reduce</code> function takes the input function <code>(a, b) => a + b</code> and applies it on <code>0</code> (identity value) and <code>1</code>, then takes it output which is <code>1</code> 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 <code>[1 , 2, 3, 4, 5]</code> to <code>scan</code> function with identity element as <code>0</code> and <code>sum</code> as the input function will produce <code>[1, 3, 6, 10, 15]</code> as the output.
<pre><code class="language-typescript">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]
</code></pre>
As you can see from above code, similar to <code>reduce</code> function the <code>scan</code> 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 <code>15</code> which was the output of <code>reduce</code> function.
So the main idea here is,
<blockquote>
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.
</blockquote>
Lets implement the <code>scan</code> function now.
<pre><code class="language-typescript">import { range, take, reduce } from "lodash";

const scan = &#x3C;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));
</code></pre>
Don't worry, if you don't understand the above code now. Lets breakdown the above code to understand.
<ul>
<li>First parameter of the function is an <code>array</code> of type <code>T</code>.</li>
<li>Second parameter of the function is a <code>function</code> that takes two parameters of type <code>T</code>.</li>
<li>Last parameter of the function is an <code>identity</code> element of type <code>T</code>.</li>
<li>The return type of the function is an <code>array</code> of elements of type <code>T</code>.</li>
</ul>
Now lets look at the body of the function. Body of the function is formatted differently here for better understanding.
<pre><code class="language-typescript">range(1, values.length + 1)
 .map((i) => take(values, i))
 .map((a) => reduce(a, fn, identity));
</code></pre>
The <a class="markdown-a" target="_blank" href="https://lodash.com/docs/4.17.15#range">range</a> function creates a range iterator from <code>1</code> to <code>n</code>, where <code>n</code> is the length of the input array. From these numbers we use <a class="markdown-a" target="_blank" href="https://lodash.com/docs/4.17.15#take">take</a> function to take <code>i</code> elements from the <code>values</code> array each time. In other words, we make chunks of array from the given array, each holding <code>1</code>, <code>1..2</code>, <code>1..3</code> and so on until <code>1..n</code> values. This will create an array of arrays like below.
<pre><code class="language-typescript">[[1], [1, 2], [1, 2, 3], [1, 2, 3, 4], [1, 2, 3, 4, 5]];
</code></pre>
When we apply <code>reduce</code> function on each of the element (array) of the array with the input <code>identity</code> as identity element, we will get the expected result like below.
<pre><code class="language-typescript">[1, 3, 6, 10, 15];
</code></pre>
Hope you enjoyed! Happy Hacking!

Create scan function in typescript/javascript in just one line using lodash

tech RSR

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

Awesome list in rescript

Filtering an array using a function that returns a promise

Scan function in just one line in TS

tech RSR