Angular 2 and Observables Support Microservice Integration

Spread the word

If you go to a convention and ask if someone used Angular 1, you will find that less then 50 per cent will have had an experience with the framework. In comparison, if you ask Java or C# developers, you will find a lot more transitioning to Angular 2 due to its typed approach. Tooling is important and Angular 2 seems to be very attractive to transition to.

Between Angular 1 and 2, the syntax differences are obvious, but another big difference is that Angular 2 is becoming an application platform rather than just a framework for writing browser-based applications. This means that Angular 2 component code is decoupled from the actual runtime environment, which  gives you more flexibility since the code isn’t necessarily tied to a particular environment (browser, mobile, server, web worker, etc).

It seems easier to start with Angular 2 if you haven’t worked with Angular 1 before. This seems odd, especially when making it pretty and pushing it to a cloud service has become so much easier compared to developing in Angular more than a year ago. I am guessing it all boils down to what you are used to.

One question that wasn’t very transparent in the past is: Does Google use Angular for any of its top products like Facebook uses React? React is used for Instagram and Facebook front-end.

It’s an important indicator of how much integrity these frameworks have. As of now, the only places they’re using Angular is on their Playstation YouTube Client,DoubleClick, and the Google Developers Console. The engineers at Google gave some more insights at AngularConnect in London. Apparently AdWords will migrate to Angular 2 as well as Chromecast, Google Analytics and Youtube Video Manager which are already using Angular 1.

Angular 2 fits very well into the world of Microservices. They are becoming more and more popular and many are choosing to transition away from a monolithic architecture approach.

Now, Angular 2 provides a new pattern for running asynchronous requests, called Observables. This software design pattern allows you to automatically notify observers about state changes of the observed subject.

The Http service in Angular 2 is the successor to Angular 1’s $http. Instead of returning a Promise, its http.get() method returns an Observable object. This Observable gives us methods like map() for configuring the data processing and subscribe() for observing the output.

Many times, we need to load data from more than one source, and we need to delay the post-loading logic until all the data has loaded. ReactiveX Observables provide a method called forkJoin() to wrap multiple Observables. Its subscribe() method sets the handlers on the entire set of Observables.

An example would be to populate a playlist with singers and songwriters. Maybe there is a service that provides both, maybe there isn’t. For now that’s not important. What you want is all possible data to a song from different services. Like so,

Keep in mind that Observables are the new standard for the http object in Angular 2 with an advantages over Promises. Observables may seem like an extension to couple Events and Promises. Your advantage with them is that you aren’t limited to only single operations as used to with Promises.

But if you feel like going with a Promise-based API instead of an Observable-based API, you’d simply use the Observable.toPromise() function to turn Observables into Promises after calling an http object method. To see a very good comparison about promises and observables, read this article.

Observable objects have a bad reputation as they may cause cascading updates. One observable object update can cause a bunch of other observable objects to trigger updates, which can do the same. Unlike Angular 1.x, the change follows one way, and as a result, the system is more performant and predictable.

A good way to start is to look at the documentation that is currently available. This blog post is about Components, Views, Inject, Services and bindings. Another great read is Change Detection in Angular 2. In-depth overview of the change detection module that powers Angular property bindings. Learn Typescript and try it. I found it very comfortable and it doesn’t feel like you’re doing Angular in a classic sense.