S O F T WA R E

ENGINEERING

Qt QML v HTML5 –
a practical comparison
The Sequality bottling demo application
This white paper describes the development work needed to create
Qt and HTML5 versions of the same application, and compares
the technologies from a technical and economic perspective.

Sequality, 05/2017
 Executive summary

Background
Sequality is an Austrian software engineering company Over the past year, more
that creates industrial applications, user interfaces for
touch displays, and software for embedded hardware and more customers had
systems. been asking if they should use
Over the past year, more and more customers had HTML5 or Qt using the QML
been asking if they should use HTML5 or Qt using the declarative UI language to develop
QML declarative UI language to develop software for
embedded devices, and wanted to better understand
software for embedded devices,
the differences in using the two technologies. and wanted to better understand
In order to give the most objective advice to their the differences in using the two
customers, Sequality decided set up a test: give the technologies”
same developer 160 hours to create a demo of an
embedded system using Qt and 160 hours to create
the demo using HTML5. These demos would show From an end-user perspective, the Qt QML version
exactly how the two technologies compare – in terms behaved exactly as expected regardless of the browser
of development, performance, and sustainability – or screen being used to view it. This is because Qt-
when used to create the same product. This white based applications are compiled for the target, meaning
paper describes the development work needed to that in terms of user observation, they behave exactly
create the Qt and HTML5 demos, as well as the end the same no matter which platform they run on.
results. HTML5-based applications, on the other hand, run
on the browser of the target, for example Chrome,
The developer tasked with creating the demos was
meaning different platforms can show different
experienced with using HMTL5 and C++, but had little
behavior as the browser might use different rendering
experience creating user interfaces using Qt and QML.
engines depending on the platform.
The demos were created independently without any
In terms of the sustainability of the technology, Qt QML
vendor input.
is a mature technology (compared to most JavaScript
frameworks) that has been developed to ensure
Results backwards compatibility. The AngularJS framework for
The demos showed that although the same amount
HTML5 is relatively new, and a valid concern is whether
of development time was spent on both versions,
it will be replaced by a new framework in the future.
implementation with Qt QMLdelivered a more
In contrast, QML is very likely to still be supported in 5
functional and complete user interface than the
years.
HTML5 version. The testing and debugging process
was found to be more straightforward with Qt QML, Overall, Sequality found that the development of the
not least because it didn’t need testing on multiple applications was very different and one needs to carefully
browsers. consider the benefits and drawbacks of each technology
before deciding which one to use.
In general, the Qt QML version responded more quickly
and enabled features, like keyboard and multi-touch, If the outcome of such an evaluation does not show
that were not supported by HTML5 without additional major advantages of a particular technology, we would
implementation. recommend Qt over HTML5. In our showcase, the Qt-
based application was generally faster, more responsive,
and easier to implement.

2 Sequality, 05/2017
 The bottling demo

Application requirements Development approach

The bottling demo application represents a fictional
bottling plant supervisory control and data acquisition
Qt demo
A developer who was quite experienced in C++ and
(SCADA) system. The dashboard-like user interface
Qt but with little QML experience implemented the
contains most of the user interface (UI) elements that are
application in 160 hours. The developer was able get
common in modern applications.
help from others with Qt and QML knowledge to get
The application was designed to visualize the process at things done more efficiently.
the bottling plant. The following elements are shown in
the UI: HTML5 demo
• Drink ingredients Once the Qt demo was complete, the same developer
developed the HTML5 version of the bottling demo.
• An animated bottle filling process
The developer had knowledge of HTML5, but was not
• The bottle labeling process
experienced with AngularJS. 160 hours were also spent
• Distribution (stock, maps, etc.) developing this demo.
• Metadata (users, alerts, etc.)
Implementation details
The application also required the following elements:
of the Qt version
The application uses QuickControls 2 with custom
• Usability across multiple screens with adaptive
styling. The user interface is written in QML with
design, including a 1024 x 600 touch screen, a 2560
models and logic implemented in C++ classes.
x 1600 high-definition 10-inch tablet, and a 15-inch
Temperature and pie indicators use a mixed approach
1024 x 768 capacitive touch screen
with graphics made with QPainter and wrapped into
• The ability to compensate for the very high pixel QML components.
density on a high-definition tablet so that fonts and
icons are easily readable for average users Overflow animation of progress bars and pie indicators
consists of two animations being run depending on
• A user interface with a flat or minimalist design
value change:
• A slider panel for settings similar to an iPhone
• A simple NumberAnimation running if the next value
• Different color design themes switchable at run
is greater than the previous value
time, for example a day and night design theme
• A sequential animation consisting of two
• A UI with pop-overs and pin dialogs
NumberAnimations otherwise:
• Icons for main menu items
• NumberAnimation from previous value to
• Fading animations when switching screens and maximum value
changing the size of navigation bars
• Unanimated reset of the current value to 0
• Round animated progress controls
• NumberAnimation from 0 to the next value

3 Sequality, 05/2017
 Implementation details of the Results after 160 hours
HTML5 version of development
There are different ways to handle complex animations
in HTML applications:
• jQuery/JavaScript approach. Although it provides
the best portability and enables complex animations
easily, it was not used because it is outdated and very
slow
• CSS3 animations:
• transition: activates on property changes.
Used in simple animations and corresponds to
NumberAnimation in QML
• animation with keyframes: can be used to
implement complex animations
Overflow animation is not implemented in the HTML5
demo because there’s no easy way to reproduce complex
sequential animation from arbitrary value to arbitrary
value:
• CSS3 transitions: it was necessary to animate from
the previous value to the max, then from 0 to the
next value. This would require at least two separate
animations that must be watched to detect their
start and end. Another challenge was that the value is
changed but the animation is incomplete View a video comparing the Qt QML and HTML5
• CSS3 keyframes: the nature of keyframes requires demos at https://vimeo.com/207307640
specifying static to/from values to animate. This
was not possible within the scope because the
Note: neither demo is a fully featured application.
values are dynamic and there are at least 100 * 100
For example, some buttons don’t work and with the
combinations of values (for percentage indicators)
HTML5 demo there are bigger issues concerning
Hardware setup (both versions) browser compatibility and touch gestures. However,
these demos clearly show the strengths and
• Raspberry Pi 3 weaknesses of the technologies.
• 1.2GHz 64-bit quad-core ARMv8 CPU
• 1 GB RAM (50% shared with GPU) Features comparison
• VideoCore IV 3D graphics core
Qt HTML5
• 15 inch capacitive Touch-Display, 1024 x 768
Dynamic theme switching x x
Software setup (both versions)
Lists x x
• 32-bit Raspbian Jessie (March 2017)
• Qt/QML Demo: Qt 5.7.0, the “vanilla” version, cross- Table view x x
compiled for Raspberry Pi 3 without custom patches Dynamic search x x
• HTML5 Demo: stock Chromium browser from
Raspbian repositories Swipe gestures x x

Map x

Virtual keyboard x

4 Sequality, 05/2017
 Comparison of the Qt QML
and HTML5 demos

Performance Styling facilities

• The Qt QML UI was faster than the HTML5 UI
with our setup. The performance difference is likely
Qt QML approach
• QML applications do not offer any decoupling of
due to the lack of proper OpenGL support by the
styling, layouts, and actual components
Chromium browser on Raspberry Pi, whereas the
Qt QML demo is rendered using OpenGL by the • The property binding mechanism helps to
nature of Qt Quick Scene Graph implement model view-based architectures
• Usage of AngularJS didn’t affect performance in the • Colors, font faces, and styles must be specified
HTML5 demo since data binding or DOM generation explicitly for each component without any property
is not used extensively. The whole DOM tree is inheritance
generated once at application start, and there is a • Sizes are specified in pixels only, so implementing
small number of models watched by Angular engine an application that should run on devices with
• Enabling GPU rendering on Chromium in chrome:// different DPIs might be tricky, the property binding
gpu doesn’t fix the HTML5 demo’s performance mechanism is used to bind QML element sizes to
problem. In fact, the CPU is utilized even more, which available pixel space
leads to overheating • Dynamic theming can be achieved using a singleton
object referenced by all other components. In this
Power consumption case property binding helps to achieve dynamic
• The Qt QML UI used less power than the HTML5 colors, font sizes, and faces
demo – HTML5 is rendered on the CPU only and
• Dynamic layout requires either instantiating several
therefore CPU utilization remains high
components/layouts or using components in
Loader. With a high degree of responsiveness in the
Browser engine
requirements, the application structure might quickly
• Browser Engine Blink was the layout and rendering
become confusing
engine used by the Chromium browser on Raspberry
Pi, Chrome browser on Android, and Chrome browser • Code reuse might be achieved by nesting QML
on Windows Desktop and various Linux flavors. The objects or using C++ classes and class inheritance
HTML5 demo was tested on Chromium for Raspberry
Pi, Chrome on Android, and Chrome on Windows, HTML5/CSS3 approach
and the touch event processing varied on these three • HTML applications can be easily styled with CSS
platforms. For example, the slider widget didn’t work • Very good decoupling of styling and markup is possible
as expected on Raspberry Pi, but the same code works • Support for CSS breakpoints and usage of Flex layout
well on Android and Windows. Moreover, Chrome on enables the creation of fluid and responsive user
iOS uses WebKit as the layout engine due to Apple interfaces with little overhead
Store’s limitations, meaning additional testing effort is • Important property inheritance (font face, size) works
required when targeting this platform automatically
• Both demos use V8 as the JavaScript engine • Sizes can be specified in relative units, which helps a
lot in displaying UIs on devices with different DPIs
• Dynamic theming or a totally different layout within
the same screen size can be achieved by loading
another CSS file

5 Sequality, 05/2017
 • Usage of external CSS authoring tools like Less or Sass • QML still doesn’t have any common patterns for
provide for a high degree of code reuse like variables, modularization adopted by most developers, so it’s not
functions, and mixins uncommon to see different approaches from project
• CSS authoring tools usually contain functions to to project
convert and manipulate color models, so it’s easy to • The interface of a component is defined by its
create different color schemes declared properties, slots, or Q_INVOKABLE
methods
Features comparison • There is no concept of property visibility in QML
components per se, all exposed non-read-only
Qt QML HTML5
properties can be overwritten by component users
Decoupling of styling and • QML offers many choices on code recycling: inline
x
components components, components in separate files in the
Dynamic layout of project structure, libraries in import paths (can also be
x x
components manipulated from C++ code), or creating components
Styling property inheritance x dynamically from a string
• Singleton entities can be exposed to QML in three
Dynamic font faces x x
ways: registering a singleton type, setting a context
Relative units for sizes x property, or declaring a QML component singleton in
qmldir
Code reuse x x
• All of them require special treatment if the object
Manipulating color models x x being instantiated has dependencies from other QML
or C++ objects, i.e. how to ensure in C++ code that
another QML singleton is instantiated
Project structure and • Developers tend to put all context properties and type
modularization registrations to main.cpp or to plugin.cpp which leads
to enormous wiring of these files with dependencies
An important aspect of any project is keeping it
and prevents good decoupling of otherwise
structured, comprehensible, and modularized. Project
independent modules
parts should be decoupled as much as possible so that a
change in one module causes as few problems as possible • Making a QML component singleton requires putting
to other modules. it into a library
• QML nests scope by default and it can’t be turned off
Some frameworks, like AngularJS, offer a project
– misuse leads to loss of readability very quickly
structure model from the beginning. Some mature
programming languages like C++ have project structure • Keeping QML parts of the project neat and
patterns that are used by most programmers. maintaining readability requires good discipline from a
programmer
Defining module interfaces in any way makes it easier
• Working with actual data doesn’t require any extra
to wire project parts together. Singleton entities are
servers or applications, Qt offers networking, file I/O,
required in most data processing applications. Although
database drivers, etc
they might not be technically implemented (as a singleton
is considered anti-pattern) data models are a good
HTML5/CSS3/AngularJS approach
example of a semantic singleton entity.
Note: AngularJS was chosen to implement this demo.
Given the dependencies – for example, the fact that Other frameworks might require other techniques.
Users must be instantiated before Theming because
• With its directives and components, Angular allows
Theme depends on User – the task of maintaining a
the introduction of new tags to HTML markup,
singleton in an application might become tricky.
effectively incapsulating implementation details
• Directives and components require an HTML
C++/Qt/QML approach
template and a controller (a controller is optional
• Implementing logic in C++ and keeping views in QML
for a directive)
is a way of naturally modularizing a project
• Controllers, directives, components, and HTML
• C++ programmers tend to put C++ classes into two
templates are usually stored separately in separate
files: a header and an implementation
files

6 Sequality, 05/2017
 • The interface of a component or directive is defined Testing and debugging
by its bindings. Bindings also declare data flow (two-
way or one-way in either direction)
Qt/QML
• Styling done in CSS is completely decoupled from all QML applications use a rendering engine provided with
other parts of the code, although maintaining good Qt. Normally the Qt version required can be shipped
readability and structure requires effort and external with the application, which guarantees a consistent
tools environment for the application.
• Angular offers a convenient dependency injection
mechanism HTML5/AngularJS
• Angular offers a single mechanism for singleton Generally, AngularJS applications consist of many
entities JavaScript sources that are concatenated together
(possibly with dependency resolution) and loaded as a
• Angular has a concept of scopes that optionally allows
single bundle by the browser. Usage of transpilers and
the capture of data from parent scopes, though misuse
polyfills (for example, writing in ES6 and transpiling it to
easily leads to loss of readability
ES5 in the end product) increases debugging effort as the
• A special topic is managing separate component/ produced code is partly not the same as the actual one.
directive/template files in AngularJS projects: Using source maps helps but they have to be correctly
• in the most basic scenario, all these files must be placed and recognized by the browser. Typos or errors
manually included in the index.html, which leads to in AngularJS code are often silently ignored and have
a radical increase in loading time to be investigated very thoroughly. There is quite a
• in the more common scenario, these files are steep learning curve with AngularJS when it comes to
processed by an external tool to produce a single data bindings and manipulating DOM in components,
output file which is included in the index.html leading to increased development efforts for quite simple
• Actual data processing (working with a database, interactions like swipes or drags.
file I/O, working with sensors) would require an AngularJS has encouraged test-driven development from
HTTP- or a WebSocket-Server that processes the beginning (see Google’s tutorials on AngularJS). QML
upon request from the web interface. This and Qt provide unit-testing frameworks as well, although
introduces additional complexity to the project do not push into using them. Overall, a TDD approach
might be extremely useful for end-product quality but
Features comparison requires a lot of effort in the creation and maintenance
HTML5, of tests with good coverage. This effort often not only
C++, Qt,
CSS3, or compares to, but also exceeds the effort of writing the
or QML
AngularJS actual code that is being tested.
Well-defined initial project The fact that HTML5 applications can be executed
x x
structure on a number of platforms – and a number of browser
Code recycling using engines on each platform – multiplies the testing
x x
components time correspondingly. Requiring a specific version
Managing component of a browser might not be an option for tablets or
x x smartphones where updates are installed automatically.
dependencies
Even on desktop computers, the default setting is
Effort to maintain project
x x nowadays to install browser updates without any
structure
interference from the user.
Working with data directly x

7 Sequality, 05/2017
 Sustainability of the technology problems: they don’t support newer CSS/JavaScript
features and might behave differently when rendering.
A supported version bump in the future doesn’t help
Web applications
if some users keep the older version of their browsers
With the rapid development of web applications
and are therefore unable to use the application
in recent years, new client-side and server-side
anymore.
frameworks are constantly emerging. Major new
versions of frameworks are released in short cycles The fine granularity of popular frameworks forces
and adopt new patterns in web engineering. This might developers to use several frameworks in one project
discard backwards compatibility and support for older to achieve their goal. Each framework or library has its
versions, increasing maintenance costs. Projects with own style, integration level, documentation, release
a longer lifespan may use outdated frameworks and cycle, and level of support.
libraries until it becomes cheaper to write everything
Though the web application stack will somehow
from scratch using completely new technology and
stabilize in the next few years, it’s important to make
architecture.
good decisions on what technologies to use, so that
Moreover, the JavaScript language itself has undergone the project won’t have to be rewritten from scratch
revision in recent years. It now incorporates features multiple times.
like scoped variables, classes, and modules (in
ECMAScript 6), leaving web developers to deal with Sustainability of C++/Qt/QML
lack of support for all the features of the language in C++ is a mature language that has proven to be
major browsers. Supersets of ES6 like TypeScript are conservative and slow changing. The adoption of the
actively used as well, and are not directly supported by major C++11 standard in projects followed by its C++14
browsers, forcing web engineers to use transpilation to extension is fairly slow because of a lack of support by
the most portable old version of JavaScript. Luckily, the major compilers. The 4th edition of Stroustrup’s The
new versions of the language are supersets of the older C++ Programming Language including C++11 features
versions and maintain backwards compatibility. was published in 2013, two years after the standard
Apart from using existing frameworks, there’s always was ratified. All the C++ standards up to and including
a temptation to make your own in-house solution to C++17 are backwards compatible with the older
exactly fulfill the requirements of the project. This version.
might be considered feasible as long as the developers The Qt framework has been on the market since 1995,
working on it don’t leave the project, otherwise it with major versions released in 1999 (Qt 2, lifespan of
would be yet another framework to learn with most 2 years), 2001 (Qt 3, lifespan of 4 years), 2005 (Qt 4,
probably non-existent or minimal documentation and lifespan of 7 years) and 2012 (Qt 5, lifespan of at least
no internet resources – creating the need to rewrite 5 years). Source compatibility was largely maintained
the application using existing frameworks or inventing a during the transition from Qt 4 to 5, whereas previous
new one. transitions broke the compilation process. That is, the
The nature of web engineering forces developers to transition should have been made either completely or
use a complex multi-step build process to produce a not at all. Qt 4 introduced Qt3-support classes for a
working application. Not only do frameworks change, smoother transition to the newer version of the library.
but the build tools change rapidly as well – like Grunt, Paradigms and approaches used in Qt have remained
Gulp, webpack, etc. mostly the same throughout recent major releases.
Another question to consider is the browser on the That means having learned Qt once, one is able to
client side. With multiple rendering engines on the develop Qt applications for at least the current and
market, the application has to be tested for all of them next major release. With a median cycle of major
and on all platforms. With extremely short release releases every 4 years, this typically means sustainable
cycles of browsers (like Firefox) and seamless updates project development for at least 8 years.
(like Chrome or Edge), it’s virtually impossible to As for now, Qt 5.x is developed in a 6-month cycle with
keep up. Targeting older browser versions also brings API and ABI compatibility.

8 Sequality, 05/2017
 The Qt framework covers most areas of
application development one might need in a
project offering uniform class names, a single
paradigm throughout the whole framework,
accurate documentation, and good portability.
QML appeared in 2010 in Qt 4.7 and has been
developed and polished constantly ever since.
There’s been evolutionary development of the
language from the beginning while maintaining
backwards compatibility. Moreover, the module
version system ensures the correct outcome of an
application being processed by newer versions of
QML engines.
As mentioned earlier, unlike any HTML5
framework or library, Qt is a general-purpose
framework and more or less self-contained – an
application using Qt wouldn’t require additional
libraries for widgets, networking, databases, serial
bus, etc.

9 Sequality, 05/2017
 Summary: comparing
Qt QML with HTML5

Performance Animations
• Qt QML has built-in support for animations in the
Overall language, and transitions can be fine tuned
• Both technologies are capable of separating design • With HTML5, there are several ways to implement
from business logic animations, which can make it quite tricky to get
• Both technologies are capable of rendering pixel- exactly what you want from an animation
perfect UI designs on multiple platforms • Modern embedded applications benefit by having a
dedicated OpenGL-capable graphics processer that
Speed can render animations in a smooth way. Making use
• The QML version of the demo is faster than the of the OpenGL processer in an HTML5-browser-
HTML5 version based setting is somewhat tricky – whether actual
• With HTML5, latency time between user interaction rendering can be done with the help of OpenGL
and user interface response is higher with our setup depends on the browser. In the HTML5 demo with
our setup, most rendering is done only on the CPU.
Features In the QML demo, all rendering is done by the
• The QML version has complex swipe gestures OpenGL-based engine
(setup-slider, multi-touch zooming) that are not
available in HTML5 out of the box Testing and debugging
• The QML version has a virtual keyboard – no such • Both HTML5 and QML can get somewhat tricky
component is available with HTML5 out of the box to test, which is true for most complex interactive
visualizations
Platform
• With QML, complex logic is usually implemented in
• Qt-based applications are compiled for the target,
conventional C++ code, which offers the benefit of a
meaning that in terms of user observation, they
strictly typed programming language - an advantage
behave exactly the same no matter which platform
when testing and debugging applications
they run on
• With AngluarJS, all logic is written in a weakly typed
• HTML5-based applications run on the browser of
environment, unless you use TypeScript, which is
the target (e.g. Chrome), meaning different platforms
again a technology that has to be learned and used
can show different behavior as the browser might
use different rendering engines depending on the • Generally speaking, one uses third-party tools (e.g.
platform. Browser testing is a major development Babel, require.JS, webpack) to generate the runnable
cost factor in HTML5 based applications HTML5/AngularJS application out of a project. As
a result, the code running in the browser is often
Connection to hardware not the same as the code written in your IDE. In our
• Low-latency sensor connections to direct hardware opinion, writing applications in AngularJS requires a
components are easier with C++/Qt as you have more profound knowledge of the whole technology
direct contact to the embedded hardware stack to develop and debug complex applications.
• With HTML5, if the application has to react quickly Additionally, the technology-stack-components within
to sensor input (for example, CAN-Bus-Value, GPIO- an AngularJS application change rather rapidly, which
Pin, RS232, bluetooth, gyrometer), it can get very makes it even harder to follow and understand
difficult to route this signal through the http-server,
browser, and javascript to the HTML5 frontend

10 Sequality, 05/2017
 Sustainability considerations
• Qt has been around since the 1990s and Qt QML
since 2011
• Modern HTML5-based applications that use
frameworks like AngularJS are relatively new
and undergo changes from year to year – a valid
question is whether AngularJS (or any other
currently trendy Javascript-library) will still be a
relevant HTML5-technology in 10 years

11 Sequality, 05/2017
 About Sequality
Sequality software engineering is an
Austrian software consulting company
that is your partner for creating solutions
in the area of industrial applications,
touch display user interfaces, and
embedded software applications.
Usability plays an important role when
creating our applications. Together
with usability engineers and UX
designers, we can ship leading-edge UI
technology applications that contain
user-friendly functionality, look great,
and deliver a seamless user interface
experience.

sequality software engineering e.U.• Softwarepark 26A-4232 Hagenberg

www.sequality.at • t. +43 7236 26 101 • m. +43 676 97 72 681
[email protected] • [email protected]

S O F T WA R E
ENGINEERING
Copyright © 2017 Sequality. All rights reserved.