Stefan Larndorfer

QML vs. HTML5

Published Friday July 28th, 2017
16 Comments on QML vs. HTML5
Posted in Automotive, Biz Circuit & Dev Loop, C++, cross-platform, Declarative UI, Design, effectiveness, efficiency, Embedded, Embedded World, framework, Guest Blog, HTML vs Qt, Internet of Things, OpenGL, Performance, QML 을 시작합시다., Qt, Qt Quick, Qt Quick 2, Qt Quick 2.0, Qt Quick Controls, UI

Guest post by Stefan Larndorfer at sequality

Mobile devices have set the standard in terms of responsiveness and user-friendliness for HMIs across industries. Manufacturers of cars, medical equipment, industrial automation systems and consumer electronics now want to replicate this great user experience for their embedded devices. To find out which technology strategy we should select we set up a test where one of our developers was allocated 160 hours to create a demo application of an embedded system using Qt & QML and same number of hours to create the very equivalent application using HTML5.

Over the past year, more and more customers have been asking us at sequality if they should use HTML5 or Qt using the QML declarative UI language to develop software for embedded devices.

In order to give the most objective advice to our customers, we decided set up a test: give the 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 exactly how the two technologies compare – in terms of development, performance, and sustainability – when used to create the same product. The developer tasked with creating the demos was experienced with using HMTL5 and C++, but had little experience creating user interfaces using Qt and QML. The demos were created independently without any vendor input.

QML vs. HTML 5 test results

The demos showed that although the same amount of development time was spent on both versions, implementation with Qt QML delivered a more functional and complete user interface than the HTML5 version. The testing and debugging process was found to be more straightforward with Qt QML, not least because it didn’t need testing on multiple browsers. In general, the Qt QML version responded more quickly and enabled features, like keyboard and multi-touch, that were not supported by HTML5 without additional implementation.

From an end-user perspective, the Qt QML version behaved exactly as expected regardless of the browser or screen being used to view it.

This is because Qt based applications are compiled for the target, meaning that in terms of user observation, they behave exactly the same no matter which platform they run on. HTML5-based applications, on the other hand, run on the browser of the target, for example Chrome, meaning different platforms can show different behavior as the browser might use different rendering engines depending on the platform.

In terms of the sustainability of the technology, Qt QML is a mature technology that has been developed to ensure backwards compatibility. The AngularJS framework for HTML5 is relatively new, and a valid concern is whether it will be replaced by a new framework in the future. In contrast, QML is very likely to still be supported in 5 years.

Overall, Sequality found that the development of the applications was very different and one needs to carefully consider the benefits and drawbacks of each technology before deciding which one to use.

If the outcome of such an evaluation does not show major advantages of a particular technology, we would recommend Qt over HTML5. In our showcase, the Qt based application was generally faster, more responsive, and easier to implement.

Want to know more?

Download the QML vs. HTML 5 Whitepaper.

Visit us at our booth at Qt World Summit 2017.

 

About

Stefan Larndofer is the CEO and Founder of sequality software engineering. Sequality provides high-quality software engineering services, specializing in user interaction (graphical user interfaces, touch screen software, C++/Qt, embedded Linux) technology. Sequality delivers software with a great user experience, inspired by mobile devices. www.sequality.at

Do you like this? Share it
Share on LinkedInGoogle+Share on FacebookTweet about this on Twitter

Posted in Automotive, Biz Circuit & Dev Loop, C++, cross-platform, Declarative UI, Design, effectiveness, efficiency, Embedded, Embedded World, framework, Guest Blog, HTML vs Qt, Internet of Things, OpenGL, Performance, QML 을 시작합시다., Qt, Qt Quick, Qt Quick 2, Qt Quick 2.0, Qt Quick Controls, UI

16 comments

Christian Feldbacher (V-Play) Christian Feldbacher (V-Play) says:

Great post!
We published a similar one which covers the pros & cons of Qt vs HTML 5 here:
https://v-play.net/competitor-comparisons/qt-vs-html5-cross-platform-apps

Cheers, Chris

Josue A Gomes says:

How Qt addresses the issues reported? Like: style, layout and component coupling, absolute sizes, etc.

José says:

As QML is natively component based, it’s easy to implements styles

Matthew P Cleere says:

Please have a test run of QtQuick/QML. You will then plainly see the answers to your “issues”. “Absolute sizes”? Easy, just use Width = parent.width or something equally as simple. “Coupling?” The signals and slots system eliminates that. Cheers!

Josue A. Gomes says:

“Easy, just use Width = parent.width or something equally as simple.”

Aren’t you just using parent’s absolute width in this case?

““Coupling?” The signals and slots system eliminates that.”

How signals/slots can decouple styles and components?

Bruno says:

Although qt performance is better, angular 2/4 uses typescript instead of JavaScript, which makes easier to grow and maintain complex projects.
Also, it’s easy to find and use free ready made components using npm for html/angular. There are a few free components available for qt and basic operations like a simple REST call is still cumbersome with qt, specially when compared with async / await and angular http client.

Andrew Wooldridge says:

You should compare against ReactJS and React Native. More of an apples to apples comparision.

Martin Kutny says:

It would be great if web browsers supported QML as an alternative to HTML. As a language, QML is much better suited for writing modern, fluid, data-driven UI code than HTML/JS can ever be. I argument the case for QML on my blog – https://blog.kutny.net/2017/07/29/can-qml-become-the-next-standard-for-web-ui/

Although open source, QML is a commercial product, do you think it has the potential to become a web standard?

Attila Csipa says:

The *language* already failed to gain traction on the web, even before HTML5. Of course, in those days it wasn’t called QML, but JavaFX Script and it went down with the Java-as-app-tech ship.

https://en.wikipedia.org/wiki/JavaFX_Script#Syntax

As QML is a single-company play, there is little change for adoption on the level that is expected from the web ecosystem. That doesn’t diminish all it’s good aspects, but as you asked about it specifically as a web standard, I don’t see any chance for that.

Martin Kutny says:

I see your point. If, for a moment, we don’t consider any commercial, licensing, standardization, etc. matters, do you think, that from a purely technical standpoint, QML would be a beneficial technology (to users and developers) if already natively supported in browsers?

Jean-Michaël Celerier says:

> The *language* already failed to gain traction on the web, even before HTML5. Of course, in those days it wasn’t called QML, but JavaFX Script and it went down with the Java-as-app-tech ship.

JavaFX script only has the same syntax as QML. The semantics of the language aren’t the same at all : you can’t do reactive property bindings with it. It’s feasible to write entire apps in QML; not in JavaFX script.

Burkhard Stubert (Embedded Use) says:

What are the startup times from switching on power to interacting with the HMI for the QML and Web version (on the Raspberry Pi 3)?

How much RAM and flash memory do the QML and Web versions need (on the Raspberry Pi 3)?

Thanks,
Burkhard

Tomas says:

Was it AngularJS 1 or newer? Also, since Html5 was not hardware accelerated, how can you even compare it?

vasya says:

Need more tags.

olivia johnson says:

Qml is part of QT so when they say Qml app it’s pretty clear that the app is running on some version of QT.
But HTML5? Was it an SPA running in Chrome? Or maybe something using Cordova? Or what exactly was this HTML5 demo?
This isn’t even comparing apples and oranges. This is apple with fruit comparison 🙂

Mikhail Kandel says:

I’m frustrated that I need to register to read the white paper.

Commenting closed.

Get started today with Qt Download now