• Home
  • blog
  • Creating a Battery viz Using Node.js: Client

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!).

Reactive Design

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.
To bring the ability to change the appearance of the page dynamically, a long, long time ago Netscape introduced JavaScript, which allows, for example, to respond to mouse or keyboard events and change images or text accordingly.

As time passed, templates like Mustache or JSPs were also introduced to allow a certain degree of customization to the page at the moment of its creation, dynamically. For example, we can use a Mustache template in combination with JavaScript to load a different header panel for the page according to the language we set.

There are many libraries that help developers binding data to DOM nodes; most of them use JavaScript to describe the DOM elements to which the data should be translated, and requires updates to the page to be triggered manually (via JS). So we end up relying on the application’s logic for deciding when the visualization should be updated and what changes ought to be made in response to data changes.

Declarative frameworks, instead, bind the data to DOM elements, and automatically update the DOM (in a minimal way) every time the data changes. Crucial point: this binding is also provided using templates in the presentation (the HTML markup) instead than in JavaScript.

Continue reading %Creating a Battery viz Using Node.js: Client%