Angular 2 is here. The Angular team had stormed the Angular developer community by announcing that its new version will be a complete rewrite with no backward compatibility. AngularJs was originally built for designers for rapid prototyping performance had never been its strength. Angular 2 was being written to build large enterprise-grade apps.
When Angular team released the first beta of Angular 2 in December 2015 we were in the process of building the HyperTrack Dashboard for our users to track pickups and deliveries in real-time. We found the following fundamental design decisions in Angular very interesting.
In Angular 2 the framework is decoupled from the DOM via a higher level API. This makes it really easy to use web workers to get a performance boost and also to implement features like the trip replay feature on the dashboard.
Angular 2 uses
system.js which is a universal module loader. This allows you to structure your code properly and makes maintaining large code bases easier.
Angular 2 uses Rx.js to make http calls by default. Rx.js uses
Observables instead of
promises. Unlike promises which get executed right when created observables get executed only when they are subscribed to. The following examples illustrate the advantages of using this pattern.
Concatenate paginated data: We display a list of all live trips. We used only endpoint which are available to our customers which provides a paginated array of live trips.
We could fetch data from
next_url wait for the response concatenate the data to results array and again fetch next page data and do this in a loop. Instead we used the
concat operator of Rx.js to get a single
observable which emits the concatenated data for us.
this.pageService.all(url) would emit array of all live trips.
Poll on an endpoint: If we want to poll an endpoint to update the data on the client side we can use
interval operator of Rx.js.
this.driverService.pollLiveTrips(driverId) emits the latest data after every fixed interval. When the component which uses this polling endpoint gets destroyed using
ngOnDestroy lifecycle hook we should
unsubscribe to the observable
Fetch additional data from a different endpoint: Suppose we have a trip entity which contains driver id. We can fetch driver data using RESTFull endpoint e.g.
Expected response is
The following Rx.js operator uses these two endpoints to get final expected response from a single observable using
flatMap operator and
We can use these operators to build some useful utilities which otherwise takes lot more code to accomplish the same result.
Angular 2 made our web development a wonderful experience. When we started it was still in beta but our bet on Angular 2 has paid off. As the framework matures further we are looking forward to taking advantages of other upcoming features like offline compilation server-side rendering progressive apps and more to provide a modern and performant web experience on the dashboard.
To start using our new dashboard sign up for our API access here.
Subscribe to HyperTrack Blog: Imagine. Build. Repeat.
Get the latest posts delivered right to your inbox