Qt vs. HTML5: the battle of embedded devices

By Carl Engh, director of product marketing, The QT Company

When one thinks of web application development, the first thing that comes to most people’s minds is Hypertext Markup Language, more commonly known as HTML. Having been around for almost a quarter of a century, HTML is the grandfather of web page and application development. It is the tried and true method, the bread and butter, the one-size-fits-all Swiss Army Knife of web development.

Sometime within those 25 years, the rise of the smartphone and social media turned web development on its head. Web pages were no longer just something you had access to after waiting 10 minutes for your AOL dialup. Applications started to pop up in various shapes and sizes – desktop web browsers, mobile apps, tablet browsers, the list goes on. New development tools started poking holes into the HTML armour, as native applications began to show more promise in terms of performance, productivity and functionality.

Now that embedded devices have displays and touchscreens, they are no longer just a bunch of electronic switches and mechanical buttons, embedded devices have cast off their former headless nature and have now adopted connectedness to the ever-growing Internet of Things (IoT). Embedded devices now need user interfaces and connectivity features in order to stay relevant, and operators expect the same user experiences they have on their personal devices. In order to create user interfaces for these devices, many companies have adopted HTML. HTML was never intended for embedded systems and has its shortcomings when compared to other development approaches and native languages.

Enter Qt QML, by The Qt Company. QML, another language that has been in the industry for almost a decade, is a cross-platform declarative development user interface language designed to allow developers to use one codebase for all their desktop, mobile and embedded devices. Similar to development tools tailored toward smartphones, coding languages like QML have gained a substantial market share, and many companies have forfeited HTML due to its limitations.

Sequality Software Engineering recently conducted a report that threw down the gauntlet between QML and HTML5 for embedded device application development. The report, titled Qt QML vs HTML5 – a practical comparison, put the two languages to the test on an equal playing field. Here’s how it played out.

The criteria

A developer was selected to create two identical demos of an embedded system: one with QML (Qt), one with HTML5 (angularJS). This developer had knowledge of C++, Qt and HTML5; however, the developer had little to no experience with QML nor angularJS. The developer had 160 hours to develop each demo. The demo would be judged upon development, performance and stability.

The findings

Development: A key differentiator during development was the testing process. Qt-based applications are compiled for the target. On the other hand, HTML5 applications are dependent on which browser they run in. This means that different browsers can exhibit different behaviour. This results in additional testing required for each browser configuration that would not be necessary with Qt QML.

Another key differentiator was the availability of out-of-the-box features. Out of the box, Qt offers complex swipe gestures such as a setup-slider and multi-touch zooming, as well as a virtual keyboard. HTML5 does not support these features without additional implementation, which adds to development time as well, as it increases dependencies to multiple sources, which can make it difficult to maintain. As a result, within the 160 hours, the developer was able to include virtual keyboard and multi-touch zooming into the Qt QML demo, but not the HTML5 demo.

Performance: Overall, both QML and HTML5 were able to separate the design from the business logic. They were also both able to render the UI designs on multiple platforms. Overall, the Qt QML delivered a more functional and complete user interface than the HTML5 version, as noted with the above features. The Qt QML version also performed faster than the HTML5 version. The HTML5 version had issues with 1-2 seconds of lag time between user interaction and user interface response when switching tabs. This added latency was detrimental to the user experience especially when compared side-by-side to the QML demo.

Sustainability:  A major disadvantage when choosing HTML5 is the necessity to also choose a JavaScript framework. During this exercise, angularJS was chosen. However, there is currently an ongoing battle of dominance between angularJS and React. And, if history is any indication of the future, there will be a plethora of other JavaScript frameworks to choose from. Some will stay around, some will die out. The future is uncertain and there is a lot of pressure to pick the right one in order to futureproof your technology choice and avoid having to make constant switches. On the other hand, Qt QML is provided by an established single vendor with a 25 year history. It has been developed to ensure backwards compatibility and will receive incremental improvements and added features in years to come.

Another definition of “sustainability” to consider is power consumption. The Qt QML user interface uses less power overall than the HTML5 user interface. This is because the HTML5 user interface is rendered only on the CPU, so it relies heavily on CPU power consumption to operate.

The results

While HTML serves its purpose on the web and is easily deployable across desktop and mobile platforms it has its shortcoming when it comes to embedded development. Embedded devices often have less hardware resources available and so much more work is needed in order to optimise the performance and utilise the scarce resource more efficiently. QML and Qt on the other hand are designed to get the most out of limited resources and is therefore maybe a better choice for embedded development.

If you’d like to learn, download the full report here: https://info.qt.io/html5

Check Also

MIKROE’s universal FUSION development board for all Microchip PIC microcontrollers ‘equipped with everything developers need’

MikroElektronika (MIKROE), the embedded solutions company that dramatically cuts development time by providing innovative hardware …