
Web Based Qt Design Viewer - w-m
https://www.qt.io/blog/web-based-qt-design-viewer
======
danShumway
I got called out by a few of the maintainers back when Qt first started
targeting WASM for criticizing their reliance on rendering binary blobs of
pixels to a canvas instead of writing native components in HTML.

At the time, I was told that this was basically just a tech demo, and
accessibility was actually the browsers' fault because there wasn't a
Javascript API, and that all of the touch controls were going to be fine, and
implementing all of the browsers' input methods by themselves was actually
better than messing with CSS, and everything would be fine if I was patient.

So now, checking in, I can see that scrolling still doesn't work on my Mac,
that the demos still aren't responsive and completely ignore the window width,
that I still don't have any accessibility options, that keyboard shortcuts
like `tab` still don't work, that text still isn't selectable or searchable,
and that right-click is still broken.

For the cluster example[0] I'm downloading _30 MB!_ of code to render just
three gauge charts on a page that uses 14MB of RAM. CPU fans immediately spin
up -- I'm plugged in, but I can only imagine what this demo would do to my
battery life.

I'm very excited about WASM, and there are some communities doing some really
exciting things you should check out. Rust is well on its way to being a
first-class language on the web. .NET had some really interesting demos. .NET
actually renders your components as HTML, so there's potential you could use
C#/.NET for practical web development, and not just for a quick port of an
existing app. There are people doing cool things here.

But I don't think Qt is built for the web. The devs are trying to cram a
square peg into a round hole, and I'm skeptical that their future efforts will
be any better. My understanding is that even on native platforms, Qt does a
lot of behind-the-scenes rendering computations that then gets painted out as
a pixel array. If that's true, that could explain their insistence on doing
the same thing here, but... that doesn't make it any better.

Don't use a WASM compiler that spits its entire interface into a canvas as a
pixel array. I've seen a few people call this Flash 2.0, and honestly I think
that's doing a disservice to Flash. Flash had better accessibility controls
than this.

[0]: [http://qt-webassembly.io/designviewer/#ClusterTutorial.qmlrc](http://qt-
webassembly.io/designviewer/#ClusterTutorial.qmlrc)

~~~
vunie
Demos. Allowing a users to test-run your application in-browser instead of
just looking at screenshots is a game changer. I wouldn't be surprised if this
was the primary motivation for the wasm port in the first place.

I agree with others in that using wasm to build a web app would be lunacy.

~~~
pookeh
> I agree with others in that using wasm to build a web app would be lunacy.

Figma:

1\. [https://www.figma.com/blog/building-a-professional-design-
to...](https://www.figma.com/blog/building-a-professional-design-tool-on-the-
web/)

2\. [https://www.figma.com/blog/webassembly-cut-figmas-load-
time-...](https://www.figma.com/blog/webassembly-cut-figmas-load-time-by-3x/)

~~~
vunie
My bad. That statement did not come out right.

wasm is great. I just don't think Qt's wasm port is in a state where companies
can just compile their desktop application, throw the resulting module on a
web server, and then expect a decent result.

Ignoring the fact that most desktop applications aren't designed to be ran on
a mobile-sized screen, Qt's accessibility support is non-existent (at least
that was the case when I last evaluated their tech preview).

So to rephrase: Naively porting desktop applications and presenting them to
customers as a first-class product would be lunacy.

~~~
de_watcher
QML is the best you can get for adapting to the screen sizes. But it's mostly
the embedded where it shows.

------
onion2k
The output reminds me of Flash. That's not necessarily a bad thing considering
how good Flash was at some things (especially without the security holes) but
still, it _feels_ wrong.

~~~
Asooka
Tried the first demo. Couldn't select text. Couldn't right-click. Scrolling
didn't work.

I predict this will be what news sites are built on a few years from now in
order to "protect" their content.

~~~
gpderetta
The technology itself is amazing, and as long as it was used for replacement
for desktop and mobile ask it would be great, but I have the same fear that it
might replace proper web sites.

Hopefully the need to be discoverable by search engines will mean that most
sites will still use the dom, but at some point Google might provide a
proprietary crawling interface...

------
rpmisms
"Holy crap" has become my refrain when seeing any new webassembly project.
This, along with Windows 95* in the browser, just blow me away.

*[http://copy.sh/v86/?profile=windows95](http://copy.sh/v86/?profile=windows95)

------
giancarlostoro
This is amazing. WebAssembly is going to take the web into interesting waters.

~~~
pjmlp
Yeah, back to Flash, ActiveX, Silverlight, Java days, just now you cannot turn
it off.

~~~
smhenderson
At least there is nothing to install for WASM. Plus you're getting updates
when the browser updates and don't have to worry about updating other things
independently.

I do agree there is some potential for misuse here but that's pretty much true
of any web based tech in the last couple decades.

~~~
tenaciousDaniel
^ this is the single most important point to make here. The design issues with
Flash were _not_ the reason it was abandoned. It was abandoned because it was
not a browser standard, and Apple decided not to support it with iOS. The idea
of rich, interactive content that lies beyond the scope of html is _still a
great idea_ , even if the some of the results were kinda crazy.

~~~
pjmlp
Thing is, Flash wasn't abandoned at all, just in the minds of anti-Flash
crowd.

It is nowadays called Animate and it also supports AOT compilation to native
code, including iOS deployments.

~~~
tambourine_man
> Thing is, Flash wasn't abandoned at all, just in the minds of anti-Flash
> crowd.

Oh, come on. Are people building full websites in Animate, like we used to in
Flash?

Even “export to canvas/svg” features haven’t caught on. Most web banners I see
are being hand coded.

What precompiled Animate iOS smash hit have seen on the App Store lately?

How many copies of Animate (excluding the “All Apps” plan) do you think Adobe
sells (rents)?

I’d go the other route: Flash just isn’t dead in the minds of pro-Flash crowd.

~~~
pjmlp
Then you need to have a better look into Adobe shops.

As part of the pro-Flash crowd I am happy that Animate is not the only option,
we have Blazor, Unity, Qt and plenty of other stuff in the process of taking
advantage of WebAssembly, WebGL and eventually WebGPU.

The Pandora box is already open.

~~~
tambourine_man
We are all glad the pandora box is open. I’m just saying Animate is next to
irrelevant in most applications.

Do you have links to great content being created on this platform?

------
mk89
One of the most beautiful things I have seen in 2019. Brilliant!

------
arximboldi
This looks pretty cool! I am actually shopping for a GUI framework for a new
project and WebAssembly support is a potential critical feature.

Does someone know if WebAssembly support is available on the open-source Qt?

Also: is it one of those features that is a pain in the ass to set up from
CMake instead of QMake?

~~~
jariel
Most of QT is LPGL.

Remember that WA lives in a black box with nary any access to networking,
other APIs etc. and communication in/out of the block via shared memory is
very, very low level.

QT is still heavily reliant on QMake in reality, but that should be a small
part of the decision equation.

~~~
Data_Junkie
Qmake the most underrated thing EVER.

------
tenaciousDaniel
As someone who is completely ignorant about QT, what are the arguments for
using it? I looked at their product page and it seems _incredibly_ expensive.
Why pay to develop for a particular platform?

~~~
dx87
It simplifies developing cross-platform native apps. Imagine electron apps,
except it uses less resources, and has a consistent look and feel with the
rest of the OS. You also don't have to pay if you don't want, but Qt is
licensed under the LGPL so you have to be aware of what you can and can't do
under that license.

~~~
ken
Every Qt application I've ever used has been ... off.

Granted, it's closer than Swing. That's a pretty low bar. We need to either
start qualifying this ("it's a good GUI toolkit _for a cross-platform one_ "),
or accepting that this is a scale (10 is "actually native", 0 is "just looks
like Motif everywhere"). I'd give Qt 8/10 -- it's pretty good, and the
screenshots look great but after a moment using it I'll say "wait, I think I
know why everything feels just a little bit off".

~~~
jcelerier
> Every Qt application I've ever used has been ... off.

even Microsoft OneDrive ? even battle.net ? even your AMD drivers ? even
Telegram ?

~~~
wwright
Those programs definitely do not use the same UI conventions as the rest of
the platform.

------
Hokusai
Very interesting. I have some questions thou.

How well does this play with web searches? Do I will be able to find a Qt
application searching for words on its interface? Do we need a store like
[https://addons.mozilla.org/](https://addons.mozilla.org/) to find the
content?

And, mainly, is this going to substitute all web information or just will move
desktop apps to the web?

I would like that documents continue being documents, and applications should
be applications. But, like with Flash, many people may disagree on that point.

~~~
ahartmetz
Unless hooks for that are added in the future, it isn't searchable, and it's a
platform for apps. It uses WebGL for display, not the DOM, not even Canvas.

I use and like Qt, but I also think that documents should be just documents -
without gratuitous JS framework bullshit.

~~~
Data_Junkie
You miss THE ENTIRE FUCKING POINT OF THE THING. You can search for the page
that loads the program. Doesn't have to be one or the other. Jesus.

~~~
ahartmetz
There is, in fact, a big difference between fulltext search and title search.
And why so aggressive?

------
Phillips126
Genuinely curious how websites built in this fashion will adhere to
accessibility guidelines, especially with companies (like Target[0]) getting
sued recently.

Additionally, can these sites be responsive such that the content will look
good on desktop and mobile?

[0] [https://arstechnica.com/uncategorized/2008/08/target-to-
pay-...](https://arstechnica.com/uncategorized/2008/08/target-to-
pay-6-million-to-settle-site-accessibility-suit/)

------
dkersten
Unfortunately the demo crashes for me:

 _Error: Out of executable memory in function at index 31948_

------
rerpha
QML, unless on it's own or paired with C++, is utter rubbish.

~~~
tenaciousDaniel
This is my first time hearing about it. I read through a basic description and
it sounds interesting _in theory_. What makes it rubbish?

~~~
jcelerier
as someone who has shipped a few projects made mostly in QML, it's clearly not
rubbish

~~~
malkia
I sometimes wish the effort that went behind QML went somewhere else. That to
be said, clearly other folks are finding benefits in it, just not for the app
I have to support (yet).

------
finchisko
History repeats itself. We had Flash. It was amazing back then. After while,
people realized that Flash is actually against core philosophy of web - easy
information sharing. Flash sites were poorly indexed by search engines, power
hungry and with lot accessibility issues.

Not qt is trying to do basically same what Macromedia did with Flash. Enable
rich binary components on a web, with exactly same issues Flash had.

Don't take me wrong, webassembly is great, so is qt. Maybe you can create very
specialized electron app with that, but please don't overuse it for generic
web content.

~~~
pjmlp
The core philosophy of the Web is interactive documents.

That was lost the moment the powers to be, decided it should compete with OSes
as application platform.

~~~
danShumway
My 'hot take' I've had for a while is that most applications, including native
ones, are just interactive documents.

I can count on one hand the number of native apps I use that couldn't have
their interfaces trivially represented by HTML and CSS.

If you're not building Blender, Photoshop, or Maps, odds are pretty good that
your native app is just a document. And even in the case of apps like
Photoshop, only the main view is special -- everything else is just menus and
toolbars.

People draw a hard line between a document and an app, and I've just never
been able to see that line.

~~~
shaan7
If I were able to not see that line, my life will be a lot easier, maybe you
can help me with it. Can you try to define, in your head, what do you call a
"document"? (Doesn't have to be a mathematical definition)

P.S. Just in case it does sound like it - no, I'm not trolling. That ^ is a
genuine question.

~~~
danShumway
It's not my intention to be terse or dismissive, but I'm going to give a very
short, incomplete answer because a long one would take too long for me to
write. I would need to think a lot more to come up with something more
descriptive.

If I can translate your application's current state to an org-mode document
(or any other hierarchical document format) without losing any significant
information, then your interface is an interactive document. Maybe your
backend is better suited for C, or needs native capabilities or something. I
don't care about that. The actual interface itself is just hierarchical
information.

HTML is just a way of organizing information into a tree. It's not a layout
tool (even though some web devs treat it like one), it is a display format.
CSS is the incidental styling that gets applied on top of that format.

For example, I have KeepassX sitting open in front of me. It has a row of
buttons on the top, a tree view, and a currently selected record in a table.

Very roughly, the HTML equivalent of that is:

    
    
      <ul class="toolbar">
        <li>Open Vault</li>
        <li>Save Valut</li>
        <li>Add Record</li>
        <li>Edit Record</li>
        <!-- etc... -->
      </ul>
    
      <ul class="folders">
        <li>My Passwords</li>
        <!-- etc... -->
      </ul>
    
      <table class="entries">
         <tr>
             <th>Title</th>
             <th>Username</th>
             <th>URL</th>
         </tr>
         <tr data-selected="true">
            <td>Some Site</td>
            <td>danshumway</td>
            <td>somesite.com</td>
         </tr>
      </table>
    

When I click one of the entries in that table, I'm taken to a new interactive
document (basically a form) that has some fields I can change to edit my
password. At no point in KeepassX do I ever see a state that couldn't be
described purely in a format like org-mode.

So now I try to resize KeepassX, and when it gets to below about 400-450
pixels, it refuses to get any smaller. It's not responsive. This is because it
was written in some native format that was only thinking about grids and
pixel-perfect positioning, and the idea that rendering _content_ was a
different concern than rendering _style_ never occurred to anybody.

A number of native formats like GTK _already_ use XML to lay out their
interfaces. The only difference is that they're using XML as a layout tool and
not as a display target. But for an app like KeepassX, rendering to an XML-
like format would be a strict improvement over whatever the heck it's doing
now.

