Note: It’s better to read this article from your mobile device to try all the cool stuff.
Javascript is one of the most popular programming languages and alongside with HTML and CSS, they represent the core technologies behind the World Wide Web. As the majority of the internet browsers have a built-in engine to execute Javascript, it can work on almost every device we use nowadays. Javascript has APIs which can deal with Text, Arrays, Dom, and so many other things. In this article, we are going to explore some APIs and libraries which probably you haven’t used before. These APIs with a little of imagination can significantly affect the user experience and performance of your applications.
- Page Visibility API
Since all web browsers introduce tabs to allow users to browse many websites in the same window, it is hard for a developer to determine if his application is currently in use by the user. The Page Visibility API provides events which you can listen to in order to know if your page is visible to the user or not. When a user minimizes the browser or switches to another tab, this API sends a “visibilitychange” event. By listening to this event, you can execute some actions when your page is active or not. With such capability, a developer can change the application behavior in the runtime which can reflect on the application performance and user experience by scaling back work when the page is not active.
Use Cases:
A potential use case for this API is when your application frequently sends ajax requests to your backend to keep the user’s dashboard up to date. Then you can pause these requests when the user is not browsing your application anymore. This way will reduce the traffic on your backend servers and also will make your application consume less memory and power which increases the user experience of your app. Another use case is to pause videos or audios that your application play when the user is switching taps or when his device is in the standby mode. Here is an example to pause a video when switching tabs:
Demo: Page Visibility API_A demo of the W3C Page Visibility API. In this example, the video should stop playing when you view another tab._daniemon.com
http://daniemon.com/tech/webapps/page-visibility/
- Online and Offline Events
Not all the web applications handle the case when the user loses internet connection; maybe the application will show an alert message that the process failed but will not do anything about it. So, in order to make your application handle such situation in a right way, you should listen to the online and offline events which will help you to save current work status to the browser internal storage and resync all unfinished tasks when the connection back.
Use Cases:
All of us have experienced that case when you fill a form and then when you try to submit it, you get an error message about lost connection and then you have to refill all the fields again. It would be a happy user experience to find all your information saved and refilled for you. Another use case I had before was to let users share comments over a document, and when a user loses the internet connection I show an alert message to tell the user he/she is offline and start to internally save and aggregate the written comments to push them to the backend as soon as the connection is back. Here is an example:
There are two events which you can detect to handle the orientation of a device. The first one is “DeviceOrientationEvent” which is fired when the device’s accelerometer detects a change to the orientation, and by using the data sent by this event, a developer can immediately use this data to make his/her application screens responsive. The second event is “ DeviceMotionEvent,” which is fired when a change in the device’s acceleration happened.
Use Cases:
Detecting changes in the device orientation can be helpful in geolocation applications to provide step by step navigation. Also, in the gaming applications to handle the direction of the player’s character. Another simple use case is to kill the waiting time for your users by providing a simple waiting message that responds to movement. It will keep your users busy for a while playing around and make them feel that your application not so slow which is very useful if your application needs to preprocess a lot of data. Here is an example.
Device orientation_Device orientation is not supported on your device._googlesamples.github.io
- Navigation Timing API
Well, we always talk about enhancing the performance of the application, but you can’t improve what you can’t measure. Here it comes the “Navigation Timing API” which can provide you with data about the performance of your web page. Maybe you used to do this benchmarking with some javascript-based libraries; however, the navigation timing API can provide more reliable and accurate information. This API can even offer some information that was hard to collect before that, such as the unload time for the previous page, domain lookups or the total time to execute the windows load handler. I recommend to have a look at these examples here:
Navigation Timing API_The Navigation Timing API provides data that can be used to measure the performance of a web site. Unlike…_developer.mozilla.org
Finally, if you know another great API, it would be beneficial to share it with us.
**More to Read:**- Software Architecture: Architect Your Application with AWS- Software Architecture — The Difference Between Architecture and Design- Advanced Coding Skills, Techniques, and Ideas