dimitris papadimitriou
dimitris papadimitriou More than 12 years’ experience as full stack developer and Software Architect . Functional javascript with categories.

Showcasing of Async Technologies - Promises,Async/await,Rxjs

Showcasing of Async Technologies  - Promises,Async/await,Rxjs

Showcasing of Async Technologies

What follows in this section is a showcase of the ways different solutions tried to solve the asynchrony problem. We are going to see in detail each concept in the following sections. The point of this section is just to let you see how the different concepts evolved from gradually from callbacks to observables.

Callbacks

This is only for understanding callbacks are the base of all the synchronous solution and in this section we’re going to see how they progressively evolve to the continuation promises in the object oriented toward this translate to events and the observer design pattern finally the reactive extension observables that we have today

Visualize This: loupe

The Continuation monad

This is only for understanding purposes. Continuations are an intermediate step between the callback solution and the Promise solution. It’s like a lost ancestor in the evolution of solutions. The only point here is that the callback is now curried (which means removed from the argument and instead is returned as a function that takes the argument as we will see in more detail) if you see the three solutions of the callback continuation and promises at side to side you will see the callback morphing to a promise through the continuation concept you will see that the promise of the continuation

Promises

The promises are the object-oriented equivalent of the continuation monad. So, it’s basically continuation monad that is widely used in the functional programming but also, we made it into an object .

Async-Await

Async/await is just additional syntactic support for promises. It’s surprisingly easy to understand and use if you grasp Promises

The await is a syntactic sugar that removes the need for the then because the engine treats the rest as been inside a then clause

Events

Now if we go one step further in an Object-Oriented direction as sidetrack, we can remove the callback from the function and make it a property of the Object that contains the function.

If we rewrite the code by just renaming the resolve to onFinished you might recognize the usual Event driven model of programming where the objects has some Events that its methods can fire and we can assign eventHandlers to those events that would be called when the events are fired.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
  class Repository {
            getClient() {
                setTimeout(() => {
                    this.onFinished({ id: 1, name: "rick" })
                }, 1000)
            }
        }

        var repo = new Repository();

        repo.onFinished = ((client) => {
            console.log(client.name)
        })

        repo.getClient();

The Events of the object-oriented programming is nothing more than assigning the callback as a property of the object.

The Observer Design Pattern

The observer design pattern is just an extension of the event driven design pattern as we saw in the previous section here instead of just one event handler, we can have multiple event handlers that we call observers.

Reactive Extensions – Observables

The observables are just promises for multiple values. The observables extract the observer design pattern mechanism into a separate construction that can be reused. So instead of implementing the observer pattern to any specific object that needs observable behavior the reactive extension libraries try to abstract the mechanics in a robust, well designed, reusable library.

now we can for example refactor our previous repository example and use the reactive extension library then instead of the explicit implementation of the observer design pattern. this would look like that:

in this example obviously because the repository returns only one value the observable here is overused and we could just have used a promise. But this first example just showcases the difference solutions of the asynchronous problem so you can see the way everything is unified.

Those are the most important async technologies in javascript. You can find more like Flutture.js and Task.js to my eBook

Asynchronous functional javascript

comments powered by Disqus