HTML5 on Embedded Devices

Sep 7, 2015

Many years ago, embedded systems were fairly complex to build. They had extremely limited resources that required specialized operating system development in order to function efficiently. However, with the constantly dropping cost of computing power, the embedded world of today is somewhat different. ARM-based platforms are available at such low cost that building an embedded system that runs a slimmed down version of Linux is quite common. From routers to thermostats, embedded Linux-based systems are everywhere.

The vast majority of embedded systems have very simple user interfaces. A thermostat might have an LCD, while a router is administered through a customized website where a PC, tablet or smartphone does the heavy lifting of rendering the page. Cases do arise, though, when the embedded device needs to build its own complicated interface. Cable set-top boxes or Amazon Fire Sticks are examples of embedded devices that must build and render fairly complex UIs. Most of these are built using specialized systems designed for embedded interface design, but an alternative path is beginning to emerge.

HTML5 along with Javascript allows web developers to build extremely captivating webpages. Further, developers who have the skills to build beautiful web interfaces are fairly easy to find. It wouldn’t be very difficult for an experienced web developer to build a clone of a set-top box interface that runs fully within a web-browser. With the right system and embedded power, it is now possible to have this type of HTML5 interface directly power an embedded device.

While the idea of building a browser-based set-top box with a few web developers instead of embedded systems specialists might sound alluring, there are many things to keep in mind.

The first thing one must remember is that embedded devices have extremely limited processing resources when compared to a PC. Websites that run perfectly fine on a PC might slow to a crawl on an embedded device. Web developers who are working on embedded devices must take great care to eliminate all non-essential calls/transitions/redraws/etc. This type of forethought and care is not something that all web developers are used to doing. Modern computers are so forgiving that spending time optimizing web code is, in most cases, not worthwhile. The end-user won’t notice anything any faster. However, on an embedded device, it is a must. Otherwise, the embedded UI will be unusable.

The second thing one must remember is that embedded devices have extremely limited memory resources when compared to a PC. Most web developers don’t have any experience hunting down memory leaks. Nor do they spend time looking at the heap stack of their website in developer tools. The amount of resources modern computers have makes these types of endeavors relatively pointless. On an embedded device, though, its very easy for an HTML5-based webpage to use up all the available RAM. Therefore, one must take great care managing the memory footprint of the application.

The third thing one must remember is that embedded devices are not the same thing as smartphones or tablets. Smartphones and tablets have a great deal of optimization done on their web browsers by the developers. Just because an HTML5-based webpage runs great on a smartphone or tablet does not mean it will run very well on an embedded device. Even if the smartphone has the same architecture as the embedded device, the operating system may not be identical.

Overall, HTML5 development on embedded systems is considerably more difficult than developing for PC browsers. Great care must be taken by developers to ensure they are writing code as efficiently as possible. Inefficiencies that make no difference on a modern computer can be the difference between an unusable and usable embedded device. With that said, if the proper care is taken, one can reasonably expect fairly rich HTML5 based webpages to run on embedded interfaces.

RECENT POSTS

Building an AI Policy for Your Company

Building an AI Policy for Your Company

Artificial Intelligence (AI) is an integral part of our present-day technology landscape. At Sourcetoad, we’ve been assisting our clients for years in leveraging this powerful tool. However, it’s become more important than ever to have an internal policy on how these...

Sourcetoad Presents: Fine-Tuning OpenAI

Sourcetoad Presents: Fine-Tuning OpenAI

Welcome to Sourcetoad’s first video in our Artificial Intelligence series! In this video, Sourcetoad’s own AI subject matter experts discuss how to fine-tune OpenAI. After watching this presentation, you’ll learn: ✅ What fine-tuning means✅ How to use fine-tuning to...

The Agile Manifesto in Practice: Part 2

The Agile Manifesto in Practice: Part 2

The Agile approach to software development first emerged in response to the inflexibility of existing project management methodologies. Unlike traditional approaches that emphasize extensive documentation at every phase of development, Agile instead values the...