Modern complex web applications heavily rely on the client-side by leveraging the enhanced capabilities of modern web browsers and cheaper computational and resource costs at the client end devices. They are far beyond the simple content-based static websites and not even matchable to simple dynamic apps anymore as well. Long and complex user journeys and complex business logic validations are expected to be handled at the client end.
One of the main considerations in web application developments is how well an application is performing at the client-side over the volume of data being transferred/handled becomes heavier and heavier.
This is where the asynchronous and concurrent programming techniques are also applied to client-side implementations.
At a very high level, the difference between asynchronous and concurrent programming is,
Asynchronous nature is the ability to do another task while waiting for some already triggered other task to complete. If any task is blocked within the sequence of synchronous processes, the whole application should wait. But in contrast, In an asynchronous process, the application can continue with other non-blocking tasks until the blocking task completes.
Concurrency is the ability to compute multiple tasks in parallel at the same time. The only trade-off compared to sequential programming is that both asynchronous and concurrent programming will add an extra computational and resource overhead. But we should still bear the cost to achieve the required level of functional and non-functional requirements. It is not a tradeoff anymore.
In this article, I will discuss two main asynchronous supporting framework utilities and their differences.
Promises
Observables
As mentioned both are async supporting entities. Since most of the async solution applicable use cases can be overcome by applying one of these entities, at a glance, some may conclude even whether they are the same?
Let’s discuss.
Observables facilitate more features than Promises and some valuable extra steps have been taken on performance and resource utilization by design. Due to those facts, now we often use Observables over Promises and even Angular itself has defaulted to Rx.js Observables instead of Promises for dealing with HTTP. Here are some key differences from the angular Official Guide where I have detailed them with examples.
As per the all key points discussed above
- Eager vs Lazy
- Single value vs Multiple values
- Asynchronous vs Synchronous/Asynchronous
- Not cancellable vs Cancellable
- Operators
Read more and find well explained code examples and illustrations https://hdsajitha.medium.com/promises-vs-observables-what-is-ahead-of-the-pack-7567d5f6582a
Observables are having more pro-features and far more controllability than Promises. Personally, as most of the other devs, I prefer Observables over Promises and I hope I have given you enough reasons for that.
Please find my git repo and the example workspace below.
https://github.com/sajithahd/Angular-Examples--observables-vs-promises
and the working stackblitz
https://stackblitz.com/edit/angular-observables-vs-promises
Image Credit:snopes.com