Creating a Battery viz Using Node.js: Client
In the first part of this mini-series titled “Creating a Battery viz Using Node.js: Getting Started and Server”, we discussed the details of the service we’re building and what you’ll learn. We then covered why we need a server and why I chose to create a RESTful service. While discussing how to develop the server, I took the chance to discuss how you can identify the current operating system and also how to use Node.js to run commands on it.
In this second and final part of this series, you’ll discover how to build the client part to present the information to the users in a nice way.
To present information to the users in a nice way, we should update the status of the battery every X minutes (or seconds), without reloading the page. We should be able to pause/resume updates, to avoid flooding our system when we don’t need the information, or even when we are not looking at the page. To achieve this goal, we have to:
- Schedule Ajax calls to our backend service over regular intervals of time;
- Use a declarative framework that updates the DOM automatically and efficiently in response to changes to the data;
- Exploit some jQuery utility function to make our life easier;
- Use some nice images and CSS to make the dashboard visual appealing (as a bonus!).
Discussing Ajax and asynchronous calls is certainly out of scope of this article (I’ll provide a few useful links at the end of the post). For our purpose we can even treat them as black boxes that allow us to ask the server for some data, and execute some action once this data is sent back.
Let’s take a minute, instead, to discuss reactive design and declarative frameworks.
An HTML page is, per-se and by creation, a static entity. That means that for a pure HTML page the content shown on the page remains the same every time it is rendered in a browser, and only depends on its HTML tags.
Continue reading %Creating a Battery viz Using Node.js: Client%