Qt Quick - Guidelines

From Qt Wiki
Jump to: navigation, search

The article provides guidance to use QML in an efficient way to get the best out of it. In the following sections we try to understand QML internals briefly before jumping to other aspects of QML.

  • How QML works? - An brief overview about how QML applications are handled/rendered by Qt.
  • How to be productive with QML? - Tools that improve efficiency and productivity.
  • Can my QML application be faster? - Analyze application runtime and tips to improve it.
  • References - Coding conventions and practices, and so on.

How QML works?

QML is a declarative language based on JavaScript, intended for designing fluid UIs faster than ever. It is useful to understand how this language is interpreted and the backends involved in the process, so that you get the best out of it. Each line of QML code is parsed and interpreted at runtime by the QML engine, which builds a tree-model of the UI items. The tree-model is then passed to the Qt Quick SceneGraph, which renders the UI items on to a graphics device.

How to be productive with QML?

Developing application using a declarative language such as QML can be challenging unless there is proper tooling that improves efficiency. Qt offers the following tools that improves developer experience and productivity:

  • Qt Creator IDE - Offers syntax highlighting and auto-completion, which is key for an IDE.
  • Qt Quick Designer - Offers easier UI design experience with simple drag-n-drop actions, without the need for prior knowledge of QML.

In addition to these tools that eases your application development effort considerably, the following tools enable you reduce debugging effort:

  • QML Profiler - Enables understanding your QML code in detail such as the number of objects created, events dispatched, and so on.
  • QML Lint - Checks your QML code for obvious syntax errors.
  • Gammaray - Enables introspecting your QML application. It relies on the existing QObject introspection mechanism in Qt to enable you observe and manipulate your application at runtime.

Besides these, the following environment variables also helps you with additional information about your application, enabling you to identify potential problems much earlier:

  • QSG_RENDER_TIMING=bool - Provides a number of useful timing information about the application.
  • QSG_VISUALIZE=[batches|changes|overdraw|clip] - Enables you to visualize the application and identify bottlenecks that are unnecessary. For example, setting the variable to overdraw visualizes the Qt Quick items overlay, so that you can remove unnecessary overlays.
  • QV4_FORCE_INTERPRETER=1 - Disables the JIT for JavaScript code and enables default JavaScript bytecode interpreter, which provides better backtraces than JIT. This is done automatically by Qt Creator.
  • QML_IMPORT_TRACE=1 - Enables debugging module imports.

You can also use the following environment variables to enable several checks:

  • QSG_SANITY_CHECK=1
  • QML_CHECK_TYPES=1
  • QML_PARENT_TEST=1
  • QML_LEAK_CHECK=1 - Reports memory leaks if any.