Web technologies in GUI apps

Question

What's your experience in using web technologies (HTML, XML, CSS, JavaScript) to implement part of the functionality of a GUI application? Pros and cons, please.

No servers, relational databases, AJAX, or cookies for session management, nor an existing webapp either, but rather a GUI app that uses web widgets (like Qt WebKit) to render and handle substantial parts of the UI, while taking advantage of a GUI framework to achieve an even richer interaction and better desktop integration.

I've already validated that the approach is possible using PyQt. Content can be rendered from the file system or from strings, and URL requests (images or clicks) can be captured and served by the form's event handlers. CSS and JavaScript are supported, perhaps with some limitations.

        # ...
        self.webView.page().setLinkDelegationPolicy(
            QtWebKit.QWebPage.DelegateExternalLinks
            )
        #... 

class TotiMainWindow(QtGui.QMainWindow):
    def linkClicked(self, url):
        pass # events arrive here

Note: This question is different from this one and this one made before, among other things because there is no requirement to use web technologies on the GUI, but there is the requirement that the application should work without a network connection available, and should integrate well with the default desktop over different platforms, without previous infrastructure requirements (no .NET, Java, browsers, or database servers).

Note: I posted a different version of this question on PMS but found very little experience with this approach there.

Closing Note

I just found most of the information I was looking for in a series of blog posts by André Pareis.

Answer 1

We did exactly this for a project back when Windows XP was new.

This gave my team several benefits:

• A good-looking UI with relatively little effort
• Easily change the style of the UI in a consistent manner using CSS
• Relatively simple integration with C++ (invoking functions from the ui and vice versa)

The drawbacks we saw were:

• Some not-so-good firewalls considered accessing internal resources (ie other html pages in the ui) to be a web request
• Adding and accessing the needed resources could in some cases be a bit cumbersome
• It was possible set properties in Internet Explorer that would prevent JS from running in the application

Note that some of Windows XP:s programs are using this approach.

This probably works best with small, more Wizard-like parts of the ui (which our ui consisted almost entirely of).

I have since then not really been involved in ui projects, so I cannot really tell you whether this approach is still valid... I know that MFC-based applications will let you use HTML-based dialogs though.

Answer 2

I think the largest advantage to using web markup like HTML/CSS and other web technologies is that desktop apps may very well have their days numbered.

As we speak, Google engineers are working on the Chromium OS, which essentially consists of a single GUI application... the browser...

Now, while nothing may never actually come of it, there is clearly a rising trend in the number of applications accessible through a web browser, accessible anywhere. It seems to me that this is the future of application development.

By using these technologies, this becomes one less headache you have to deal with when or if you determine that your app should be available as a web application.

Update: A few years ago, we developed an Agent Desktop for our call center that is essentially a local application that opens sockets to integrate with the phone system. The user interface the agents use is built with HTML, CSS, and JavaScript, and the experience is stunning. When we released our latest update in 2010 with a professional CSS redesign, our agents were all very impressed with not only how easy it was to interact but also how easy it was to use.

In the future we will port this 100% to the browser, but for now it needs to be a local application because of the COM integration with the phone system.

Answer 3

In a similar situation in 2005 I created a stand-alone webapp using XForms, CSS, JavaScript, XML and XML Schema for offline data retrieval and verification. With a good XForms -> HTML + JS transformer (Chiba) it did the job with no bug fixes after the initial release. It was used for 6-12 months (IIRC) by about a dozen engineers for a project gathering test data in the tunnel of the Large Hadron Collider. The biggest surprise of that project was just how much you get for free when going for a web platform, even for offline use. Highly recommended.

Answer 4

The major problem is that it reduces your development speed, or the quality of your user interface. A lot. Unless you're using Seaside, it is much faster to develop a desktop app.

Answer 5

There is quite some number of applications built on top of Mozilla platform. It isn't 100% web technology, as instead of HTML you use XML based XUL, but the rest is indeed web stack (JavaScript, CSS). The most successful of these it the OpenKomodo and it's commercial big brother Komodo IDE.

On the other hand, as far as Qt goes, the newest version 4.7 you can build GUI using QML language. Don't let the name mislead you, it's not markup, it acctually JavaScript with app-specific extensions.