Running QtQuick Applications on the Web

09.03.2015 No comments

QML is the language that makes writing Qt application UIs easier than ever before. QmlWeb now brings this ease to the web.

Traditionally desktop applications were written in languages like C or C++. Web technologies like HTML and PHP were mainly used to write static websites. With the rise of modern web applications and technologies like HTML 5, CSS 3 and ECMAScript 5, those technologies became more and more popular. But technological development on the desktop side continued as well. Modern technologies like QML + QtQuick allow us to write complex user interfaces easier than ever before in a declarative manner.

For companies the separation between desktop and web technologies means that they have to maintain two seperated groups of developers, one for doing desktop applications, and one for web development. Because of that the demand has risen to use web technologies on the desktop and especially for mobile applications as well.

QmlWeb takes the opposite approach. The JavaScript library understands QML and is able to render a QtQuick based application to a website using the webbrowser’s Document Object Model and CSS. It is capable of property bindings, anchor-layouting and most kinds of simplifications offered by QML. Impressive animations are only a few simple lines of QML code away. States and components help to keep even complex applications well-stuctured and easy to read. Many of the little pains webdevelopers often have to struggle with are becoming just a single line of QML code.

To achieve this, QmlWeb e.g. implements a system to track dependencies between properties and automatically update dependant properties on change. Positioning, which is one of the most inconvenient things in CSS, is completely done in JavaScript and then exposed to the browser using absolute positioning in CSS.

The talk will provide an overview of what QmlWeb is, how it works internally and what its current state of development is. It will demonstrate how developers can reuse their existing knowledge from the desktop for web applications. Therefore, it will include a live demo, in which a small web application using QmlWeb will be written. The talk will show what pieces of QtQuick are supported, what is still missing and also what features QmlWeb adds to match with the web. QmlWeb will be compared to other technologies to display where its advantages and where its limits are. At the end the audience should have an idea of what QmlWeb can do and should be able to decide whether QmlWeb could be suitable for his/her next web application.