Connection-Aware Components in Angular
The navigator.connection object contains a read-only property named effectiveType, which returns the effective connection type. That type is determined using a combination of recently observed RTT (round-trip time) and downlink values. (at the time of writing, browser support is limited)
The effective connection type can be either: slow-2g,2g,3g , or 4g.
By combining the Network Information API with Angular, we can write components that render different elements for different connection speeds. For example, if we observe a slow connection, we can render a placeholder or a lower resolution version of our image or video in order to improve our page loading time.
First, let’s create a nice observable wrapper for the connection change event.
The connection$ observable will notify us of the current effectiveType value, both on initial page load and on change.
Let’s create the connection component:
The code is straightforward. The connection component is grabbing the provided slow and fast templates from its view, and rendering the correct template based on the effectiveType property.
Let’s see it in action:
This is one way to implement this. It depends on your needs, so for example, you can implement a simple directive that displays a different source based on the connection.
This article was inspired by the React version of it.
🔥 Last but Not Least, Have you Heard of Akita?
Akita is a state management pattern that we’ve developed here in Datorama. It’s been successfully used in a big data production environment for over seven months, and we’re continually adding features to it.
Akita encourages simplicity. It saves you the hassle of creating boilerplate code and offers powerful tools with a moderate learning curve, suitable for both experienced and inexperienced developers alike.
I highly recommend checking it out.
Follow me on Medium or Twitter to read more about Angular, Akita and JS!
