QML vs. HTML5

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.

[embed]https://youtu.be/Z4CwVN9RRbE[/embed]

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


Blog Topics:

Comments

Commenting for this post has ended.

C
Circumspect
1 point
55 months ago

Looks very cool!

Juan Gonzalez Burgos
1 point
55 months ago

Great job! I suceeded to make it work with a new project. But how to make it work with an existing project? Say I already have an exitsing qmake pro file? I have tried to open it Qt VS Tools/Open Qt Project File (*.pro), but it just loads the Windows configurations and I have not been able to find a way to add a Linux configuration. It seems that adding a Linux configuration is only possible for new project throgh the application wizard.

M
Miguel Costa
1 point
55 months ago

At the moment this is only possible with new projects created in VS. We will be expanding the .pro import functionality to more closely follow the new-project wizard experience, so that it will be possible to select project configurations.

Игорь
0 points
56 months ago

Well, Under Linux you are able to skip entire thing of Visual Studio, Windows 10 and WSL and simply cross-compile for RaPI ARM 🤔

M
Miguel Costa
0 points
56 months ago

Indeed, it's even possible to run msvc in Linux! Using Windows, Visual Studio, etc. is a matter of choice and not an absolute requirement. Hopefully, if you have chosen to use this environment, you'll find our work useful. 😊

Игорь
1 point
56 months ago

Sure it is useful! Thanks. Just reminded

M
Miguel Costa
0 points
56 months ago

👍

nsnip
0 points
55 months ago

Have you tested this out with a raspberry pi 4? What about with VS 2017?

M
Miguel Costa
0 points
55 months ago

Haven't tested with the Pi 4, but I assume the same will apply. As for VS2017, it also supports compilation in Linux but AFAIK it does not have support for WSL, so an SSH connection to a build host will be the only option.

F
Frank168
0 points
53 months ago

Cannot select both the configuration of windows and linux. It says "Configuration, Platform must be unique". Anyone knows why it's like that? Thanks!

C
Claudio Manuel de Melo Marques
0 points
50 months ago

I'm having the same problem... Do you have discovered what is going wrong?

Peter Hric
0 points
52 months ago

Sounds very encouraging :) However, is this possible also using VSCode from Windows, or Linux ? I wonder why is there not a word mentioned about VSCode, nowdays going forward so rapidly .. Thank you !