Case study: QML for the web

Abstract

QML is a declarative programming language for defining user interfaces with advanced animation effects. A QML application consists of element declarations for structuring the user interface, and Javascript code for defining the application and animation logic. QML is used mainly for defining user interfaces of Qt applications, but it can be used also for writing standalone applications. This paper presents an approach that allows QML applications to run in a standard web browser. The chosen approach was to reimplement the QML execution engine by writing a QML parser and execution engine in Javascript to render the application to a HTML5 Canvas element. We discuss our implementation techniques for QML property bindings and for redefining variable scope in Javascript. For demonstrating the results, we executed two simple QML applications in a web browser, and gathered preliminary performance benchmark of the engine. In our measurements we found that with a good Javascript-engine, it is possible to achieve reference 60 fps speed of QML applications in a non-trivial case.