Eskil Abrahamsen Blomfeldt

Qt for WebAssembly – check out the examples!

Published Tuesday May 22nd, 2018
13 Comments on Qt for WebAssembly – check out the examples!
Posted in cross-platform, Dev Loop | Tags: , , , ,

WebAssembly is now supported by all major web browsers as a binary format for allowing sand-boxed executable code in web pages that is nearly as fast as native machine code. Qt for WebAssembly makes it possible to run Qt applications on many web browsers without any download steps or special server requirements (other than serving the wasm file).

To give you a closer look, we compiled some demos. For best performance, use Firefox.

Here is the complete list along with some descriptions:

http://example.qt.io/qt-webassembly/opengl/hellowindow/hellowindow.html
An example which renders a Qt logo using OpenGL calls. This example shows that you can also use this for custom OpenGL code.

http://example.qt.io/qt-webassembly/SensorTagDemo/SensorTagDemo.html
A larger example of an interesting industry automation use case. In principle, it is possible to show live data retrieved using Qt WebSockets, but this is just showing generated dummy data for illustration purposes.

http://example.qt.io/qt-webassembly/quickcontrols2/gallery/gallery.html
A gallery of available controls in Qt Quick Controls 2. This shows that you can use Qt Quick and Qt Quick Controls 2 to make your web-deployed applications.

http://example.qt.io/qt-webassembly/widgets/richtext/textedit/textedit.html
A simple text editor, written with Qt Widgets. This example shows that you can also use Qt Widgets to create your web-deployed applications.

As always, let us know what you think!

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

Posted in cross-platform, Dev Loop | Tags: , , , ,

13 comments

Sergey Kovalenko says:

I think WebAssembly performance on Chromium (ver 66) is much better than on Firefox (ver 60.0.1).
Firefox runs these examples with sadly performance and 70-80% CPU load when my optimized Chromium runs them very smooth with 1-2% CPU and 20-30% GPU load.

My system is Xubuntu 18.04.
More information about Chromium tweaks you can find in my article in LinkedIn:
https://www.linkedin.com/pulse/super-speed-chromium-browser-sergey-kovalenko/

Gunnar Roth says:

On windows 7 , i definitely see the opposite, Firefox 60 runs ok, Chrome 66 is slow. But this is without your tweaks for chrome. Will try them on windows.

Gunnar Roth says:

After your your tweaks chrome performance is a lot better for the sensordemo , but not better than firefox, CPU is about 7% -10% for both. GPU load for Chrom is 0%, for Firefox 50%.
But the load and startup time is a lot better with firefox. It take 4 seconds for the first time and 1-2 secs for the second time. Chrome takes about 20 seconds always.

Sergey Kovalenko says:

Interesting results. It is very strange that GPU load with Chrome was still 0%. What graphics card did you test?

Michael Cox says:

Impressive!
Keep up the good work

Alex says:

Impressive result but so long download and compile time

Rozi says:

Great implementation examples. But in text edit example the I could select from right to left in menu bar not in left to right order though.

Eskil Abrahamsen Blomfeldt Eskil Abrahamsen Blomfeldt says:

Thanks for the feedback! But please report errors in the official https://bugreports.qt.io/ using the component “WebAssembly”, so that the reports do not get lost.

Thanks again!

Alexander says:

Pretty cool stuff. Can I access the local file system from a WebAssembly app? That’s one of the things that always annoys me when using web apps.

Eskil Abrahamsen Blomfeldt Eskil Abrahamsen Blomfeldt says:

No, the application will live in a sandbox with the same restrictions and security for the user as a web page, which I guess can be considered one of the key features of deploying through a web browser instead of an app store or installer.

We are investigating support for loading and saving files through the APIs that are available: https://codereview.qt-project.org/#/c/228599/

But for full access to the file system and other protected parts of the target device, the user will still need to deploy the application through more explicit installation steps.

Pierre Chicoine says:

It takes a very long time to load a small program. Is this permanent ?

Eskil Abrahamsen Blomfeldt Eskil Abrahamsen Blomfeldt says:

I think this varies a lot from browser to browser. When running on Firefox 60.0.1, the gallery example takes about one second to start for me. The same example in Opera 52.0 takes almost 20 seconds. Given that there is such a big difference currently, I would expect to see improvements here in the future.

The download for this example is about 5.5 MB, so on a slower connection that may also be noticeable.

Drew says:

Are there any known limitations for using a Qbs based project for WebAssembly? We were able to get the shipped examples to run but we couldn’t get any of our Qbs based projects to finish compiling without a bunch of linker errors against our own libraries.

Commenting closed.

Get started today with Qt Download now