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.