Time written.July 17, 2020

Handling Async code

#Webdev

TL;DR

Asynchronous code in JavaScript can become messy. Asynchronous operations such as http requests, can be made to behave by using a few different methods. These include the Async/Await API, vanilla callbacks, the promise API, or by using the Fluture library. Below is an outline of methods for handling async code. The Fluture library is objectively a great choice since it is elegant, efficient and reliable. A caveat is that there is often a right tool, or tools for each and every job. To use a small brush to paint the living room wall for instance would be daft.

STL;DR - Still Too Long; Didn't Read

Fluture is a great library. Small paintbrushes = bad.

Fundamental

I am passionate about writing readable, reliable code. Functional paradigms(pure functions) and the idea of keeping it simple (K.I.S.S) should always be utilised, to ensure that code is readable, reusable and reliable. In JavaScript it is possible to do this.

As programs get bigger, they also become more complex and harder to understand.1

JavaScript is a single thread language, which means that it is inherently synchronous. This means it processes one statement at a time. If you call two functions they will be run in the order they are called. Some operations in JavaScript can take a little while to complete. An example is the setTimeout method, or an http request. The JavaScript interpreter then looks at subsequent lines in the same file without waiting for the result. Such operations are asynchronous and can become messy.

Asynchronous behaviour

There are a few methods of how to handle Asynchronous code. Each method has strengths, and may suit a particular situation. Some methods are eloquent and scalable, while some are more simple and don't scale well. Methods include:

An loose analogy for the difference between Promises and Futures, that is Fluture, would be: To imagine pouring water first down a system of open pipes and then down a system of closed pipes. In the closed scenario any changes to the water or any other changes will only be seen once the water reaches the end of the last pipe. With Promises it is possible to execute a function in a ‘.then()’ callback, before the promise is consumed. This is not possible with Futures. This analogy is not a perfect representation of either Futures or Promises. but explains one difference between the two in a way that I have found helpful.

Async/Await The async and await keywords enable asynchronous, promise-based behaviour to be written in a cleaner style, avoiding the need to explicitly configure promise chains.2

Await expressions suspend progress through an async function, yielding control and subsequently resuming progress only when an awaited promise-based asynchronous operation is either fulfilled or rejected.3

  • Compatible with modern browsers
  • less code, cleaner looking in more simple operations
  • error handling is not required (though can be added with try/catch)

Vanilla callbacks A callback function is a function that is called inside another function.

  • Works in IE11, and modern browsers
  • Readable, in simple functions
  • Not readable/ doesn’t scale well in larger chains of functions

Promise API (Promises) A Promise is an object representing the eventual completion or failure of an asynchronous operation.4

Essentially, a promise is a returned object to which you attach callbacks, instead of passing callbacks into a function.5

  • Compatible with modern browsers
  • Simple to use, gentle learning curve, widely used, which means many tutorials
  • Hungry execution operations inside each callback can manipulate environment before the whole Promise chain is consumed
  • error handling is not required, this is bad practice

Fluture (Futures) Fluture is an abstraction which serves to reduce the complexity of dealing with JavaScripts asynchronous nature.6

Future instances are slightly different from Promise instances, in that they represent an asynchronous computation as opposed to an asynchronously acquired value.7

  • Universally compatible (includes IE11)
  • Lazy in execution – only consumed triggers internal operations, when a Future is consumed.
  • Nicer than promises to debug
  • Stack safe composition and recursion
  • Great documentation on Github
  • Fairly steep learning curve - Introduction to functional paradigms
  • Less tutorials

When learning about Fluture, as per a colleague’s recommendation, it wasn’t easy to find tutorials. I relied on some articles by broccoli code and others.

Much like Promises, Futures represent the value arising from the success or failure of an asynchronous operation (I/O). Though unlike Promises, Futures are lazy.8

Summary

It is equal parts, reliability, and ninja skill points that make Futures a great complement to a js file and Should where possible be preferred to control any asynchronous code, though in a shared codebase, it may make those less familiar with functional programming paradigms or node callbacks scratch their heads at first. The learning curve attached to the Fluture library can seem steep, but this investment will pay off and will absolutely make you a better developer.

That it is important to choose the right tool for the job. To use a tiny brush to paint the living room wall is a poor choice. Times when each may be appropriate.

References

1 Eloquent JavaScript, on Functional programming;

2-3Async functions, MDN;

4-5Using Promises;

6-7How to use Flutures;

8Interview with Aldwin Vlasblom.

Gatsby Website made by Jack Murphy | Cookies | Style guide