Low-end hardware makes you think

Mitchel Kuijpers

Mitchel Kuijpers

Published: 27 October, 2014

wallboard-previewOur development teams have a massive hunger for data. To satisfy this need, all rooms are equipped with a tv and a Raspberry Pi mounted on the back. Over time this resulted in a proliferation of wallboard wannabees running all over the office. Recently we have taken on the assignment to converge everything to a standardized look-and-feel while still enabling all teams to visualize their own data.

We started with an inventory of the existing wallboards. We can summarize the conclusion in one word: slow. They were all tragically unresponsive. One board would crash by even moving the mouse, others would take 5 seconds for a simple rerender. We know the Raspberry PI isn't the fastest bit of hardware around, but then again, it runs Linux, it runs a browser, we must be able to do better than this.

Some not-so-scientific research learned us that Raspbian Linux with the chromium browser is the best combination. Raspbian is optimized for hard floating points and chromium... well we just tried a lot of browsers and it didn't get any better. We found out that the bottleneck on the existing boards is rerendering. Some boards used JQuery, some used AngularJS and we assumed the problem was with the DOM manipulation approach of these frameworks.

To mitigate this problem we wrote a quick proof of concept using ReactJS. ReactJS is a lot smarter about DOM updates, see their documentation for more details about how this works. The biggest challenge is to trust ReactJS to take care of all the rendering and not be smart about this yourself. We've fallen into the trap of mix-and-matching in straight DOM-manipulating libs (for drag-and-drop and charting) only to find out that this reintroduces the performance issues. Whenever you find yourself checking for new data to prevent unnecessary rendering, this is a sign you are doing things wrong. ReactJS fixes this for you. For example, we have fallen back on using D3 for our charting calculations only and not for actual DOM manipulations, we got our inspiration for this here.

We think there is a lesson learned here. There are a lot of big frameworks that seem pretty fast when you are using them on your overpowered desktop. The truth is that most of them are using the wrong abstraction because the DOM is the slowest thing there is in Javascript. Think about this when writing an application front-end. Maybe you don't have to run it on a Raspberry PI but there are plenty other reasons like for example battery usage of a mobile phone.

We are currently working on the REST API for creating boards and adding data to a board. Next to that we have a nice CEC implementation to switch boards with the TV remote. This is how it looks:

wallboard-preview

If these photo's of our wallboard got you curious about the product we're building, leave a comment and we'll let you know when we have more to show you.

 

Did you enjoy reading?

Share this blog with your audience!