GUI Engine Evaluation Metrics
There are at least dozens of open source GUI engines on github. How to evaluate their pros and cons, and how to choose the GUI engine you need? This is a daunting task. Everyone's needs are different, and GUI developers have different intentions. It is difficult to find a unified standard to select the best GUI. QT is the most powerful, there is no one, but it may not be suitable for you.
In any case, there are always some indicators that can provide valuable reference, although these indicators have different weights in different usage scenarios, different company backgrounds, and different personal preferences. But it does not eliminate the value of these indicators, the key lies in how to adjust their proportions according to their own needs.
In "This open source 6,000-line UI framework, can it beat QT, MFC? " In this article, Zhuge Buliang's 37 questions gave me great inspiration. In the process of developing AWTK, I reread this article many times. This article can be called a guiding light for GUI engine developers.
If Zhuge Daxia doesn't mind, in order to liven up the atmosphere, I will call the indicators mentioned in this article "Zhuge Buliang-Li Xianjing GUI Engine Evaluation Index". Putting Zhuge Daxia in the front is to express my gratitude to him. The name is put in it, and it is up to me to bear the blame of some people.
Let's get started first, it's a throwback. The follow-up will continue to improve, I hope everyone will also add their own indicators when choosing a GUI engine.
1. Basic Indicators
1.1 The mentality of developers
When you use their GUI, they thank you for your support, and still feel that you owe them? If they're not thankful, you'd better not use it. Otherwise, when you have a problem, how can you expect them to help you solve it?
1.2 Help Documentation
Is there an API Manual, User Manual, Frequently Asked Questions, Porting Documentation, and HowTo, and are the documentation regularly updated?
1.3 Sample code
Are there simple getting started examples, usage of various controls, examples of full functionality?
1.4 Code style
Whether the directory name, file name, class name, function name, function parameter, local variable name, global variable name, comment and indentation are consistent.
1.5 Programming languages
For GUI engines, it is important to support multiple programming languages to meet the needs of different developers. For users, the most important thing is whether the GUI provides the programming language you need.
1.6 Supported Platforms
For a GUI engine, it is important to support multiple platforms and meet the needs of different developers. For users, it is also important to support multiple platforms. If you are developing an embedded system now, you may have to develop an APP to control your device after a while. There is no need to waste time learning different GUIs.
Whether the GUI supports the interface style of the target platform, whether it provides a cross-platform runtime library, whether it wraps the basic native functions of the platform, and whether it can extend new functions.
1.7 Visual interface design tools
The WYSIWYG way of developing the interface can reduce the learning threshold and improve the development efficiency.
1.8 Whether the visual interface design tool is developed with the GUI itself
With the interface design tool developed by the GUI itself, it can be verified whether the function of the GUI itself is powerful and stable.
In addition, the interface design tool developed by the GUI itself can be used to make the interface design tool easy to use. For example, the TabControl control can switch pages during design, which is easy to implement only with the interface design tool developed by the GUI itself.
1.9 Simulate running in the development environment
The operating environment and the development environment are often different. If you have to deploy it every time to see the effect, the development speed will definitely not be up.
1.10 Use XML/JSON and other data to describe the interface
XML/JSON is a declarative syntax, which is not only easier to write by hand than to write a program, but also facilitates the support of tools.
For embedding low-end embedded systems, XML/JSON is not efficient, and the best way is to convert it to an efficient binary format at runtime. Just like code, the code before compilation is shown to people, and the code after compilation is shown to the machine.
1.11 Use XML/CSS and other data to describe the style of the interface
XML/JSON is a declarative syntax, which is not only easier to write by hand than to write a program, but also facilitates the support of tools.
Separating the interface style from the UI description file and code is also conducive to later maintenance. After all, the interface effect is the easiest to change.
For embedding low-end embedded systems, XML/JSON is not efficient, and the best way is to convert it to an efficient binary format at runtime. Just like code, the code before compilation is shown to people, and the code after compilation is shown to the machine.
1.12 Font format
Do you support bitmap fonts? Are vector fonts supported? Are custom font formats supported? Does it support loading only part of the font into memory? Are the supporting tools complete?
1.13 Image format
Does it support common png/jpg/gif/bmp formats? Does it support vector graphics such as SVG? Can it be extended to support new formats?
1.14 Input method
Does it support pinyin input method? Does it support T9 input method with soft keyboard? Does it support the T9 input method of the hard keyboard? Does it support voice input? Does it support handwriting input method? Can it be extended to support new inputs?
1.15 Basic Architectural Patterns
Is there built-in support for architectural patterns like MVC, MVP, and MVVM? Does it support Vue, React and applet-like development?
2. Functional indicators
2.1 HD screen
Does it support HD screens? When running on a PC, the interface becomes blurred, and when running on a mobile phone, the font becomes smaller, which are all features that do not support high-definition screens. Without support for high-definition screens, there is no need to talk about cross-platform.
2.2 Vector API
The vector graphics API is very important, and the powerful vector graphics API can achieve many magical effects. Personally, I think HTML5 Canvas 2D API is the best vector graphics API. Similar APIs are easily implemented with open source libraries such as cairo, skia, agge and nanovg.
GUI must provide an abstract interface, which can seamlessly switch to the optimal implementation in different situations. For example, use agge on the embedded platform, use cairo on the embedded linux platform, and use skia or nanovg on the PC.
2.3 Window animation
Does it support window animations? Are the types of window animations adequate? Is it possible to extend own window animation. How efficient are window animations? Is window animation easy to use?
2.4 Control animation
Are control animations supported? Which control animations are supported? Does it support custom control animations? Is the control animation easy to use? What are the parameters of the control animation? Is it possible to stop, pause and play control animations.
2.5 Are the built-in controls rich?
Are there any controls you need now and those you might use in the future.
2.6 Is the combination of controls convenient?
Some GUIs divide controls into leaf node controls and container controls. Label, image, edit and button are all leaf node controls. This is very inflexible. It is not convenient to put a picture or animation in the button, a picture in the label, and a "clear"/"search" button in the edit. Why?
2.7 Custom Controls
No GUI can meet all needs, and it would be a shame if it didn't support custom controls. For such a simple need, in some GUIs it is necessary to modify the code of the GUI engine, which is no fun.
2.8 Layout parameters
Controlling the layout of controls through layout parameters allows applications to be adapted to different screen sizes. Does it support layout parameters, is the layout function powerful, and is it possible to extend custom layouts?
2.9 Control custom properties
If the control supports custom properties, users can store their own data in the control and avoid using global variables, which is a very convenient feature.
If the control supports custom properties, it is also very convenient to extend the GUI. For example, the binding rules of AWTK-MVVM use user-defined properties. It is easy to port AWTK-MVVM to Qt, because Qt also supports custom properties. , it is a lot of trouble to transplant to emwin.
2.10 Control: label
Label is the simplest control, and it is not easy to do well. Just as fried rice is the basic skill of a chef, labeling is the basic skill of a GUI developer. Does it support style (various parameters such as font, color and alignment)? Does it support unicode's newline rules? Does it support scrolling? Does it support ellipsis display? Does it support bidi algorithm? Support for animations (like typing effects and dialing). Does the scroll display support scrolling when it has focus?
Of course, it is better to divide the label and scroll_label into two controls. The implementation is simple and there is no need to support unnecessary features on low-end platforms. In short, these features are there when the user needs them.
2.11 Control: image
Does it support rotation and scaling? Are rotation and scaling animations supported? Does it support various drawing effects such as centering, tiling, x-tile, y-tile, nine-square, three-square, zoom, and scale? Does it support display text? Does it support clicks? Does it support checking?
2.12 Control: edit
It's easy to support edit, but easy to do well: Does it support copy, cut, and paste? Does it support undo and redo? Does it support selection via keyboard and mouse? Does it support input method? Can a soft keyboard be automatically selected based on various input types? Can the soft keyboard be customized? Can I specify whether the floppy disk will automatically open when the focus is obtained? Can I specify whether the floppy disk closes automatically when it loses focus? Does it support setting a validity check function? Does it support autofix input value when losing focus? Does it support prompting an input error when the focus is lost? Does it support input prompts? Does it support prompts when input changes? Does it support input in formats such as time, date and IP address?
2.13 Control: button
Does it support long press? Does it support setting long press time? Does it support repeated triggering? Does it support icons? Are child controls (like pictures and animations) supported?
2.14 Controls: Soft Keyboard
Does the soft keyboard use XML/JSON descriptions? Can the soft keyboard (keyboard layout and style) be customized? Do I need to modify the code to customize the soft keyboard? Can the soft keyboard use pure arrow keys to switch focus?
2.15 Control: table view
Does it support placing progress bars, select boxes, buttons, pictures and editors? Does it support the separation of View and Model? Can it support tens of millions of data?
2.16 Control: code editor
Some experts often use two indicators to measure the function of GUI: 1. Can you use it to develop a notepad? 2. Can I use it to develop an interface designer? If you support the code editor, you can use it to implement a more powerful notepad.
2.17 style
Does it support setting the corner radius? Is it supported to set rounded corners for some corners? Is it possible to set the top, bottom, left and right borders separately? Does it support custom states?
2.18 Dialog Highlighting
When a dialog pops up: Is it supported to dim the dialog? Is there support for dynamic dimming of dialogs? Does it support dynamic blurring of dialogs? Whether to support the new highlight strategy.
2.19 Keyboard switching focus
Does it support keyboard switching focus? Does it support switching focus up, down, left and right (some devices only have arrow keys and confirmation keys)? Is it supported to set the key value for switching focus?
2.20 Screenshot
Does it support screenshots?
2.21 Operation feedback
Does it support key tones? Different controls pay to support different key tones? Does it support touch screen vibration?
2.22 Accessibility
Does it support overall font enlargement? Does it support screen reader software?
2.23 Storage Interface
Does it provide cross-platform storage interfaces such as file systems, configuration information and databases.
2.24 Resource management
Is there a unified resource management interface? Resource management is also very troublesome: for example, pictures, which may be stored in flash, may be stored in the file system, or may be placed on the server; different files need to be loaded for ordinary screens and high-definition screens; different languages may also require Load different files; the same software runs on different systems, and may need to load different formats. Some systems can only use bitmaps, and some systems can use png/jpg; pictures need to be cached, and the cache needs to be cleaned up. All of this stuff, it would be a nightmare to let the app handle!
A powerful resource manager that masks all these details so that the application doesn't need to be aware. For example, if you need the image "earth", you don't need to care about its location and format, and you don't need to care about the impact of screen density and language, the system automatically loads the best image file.
3. Performance
3.1 Efficient Algorithms
Whether to support dirty rectangle algorithm, 3 framebuffer and binary format. The use of XML during development is convenient for programmers to modify, and the efficient binary format is used at runtime to improve operating efficiency.
3.2 2D hardware acceleration
Whether to support common acceleration interfaces, such as STM32's DMA2D and NXP's PXP. Whether the manufacturer can extend its own acceleration interface.
3.3 3D Hardware Acceleration
Whether to support OpenGL, DirectX, Vulkan and Metal etc.
3.4 Low-end platforms
What kind of hardware platform can it support at least? Powerful functions are usually relatively large, which is a great test for the configurability of GUI.
3.5 Startup time
1 second to start? 5 seconds to start? Wait half a minute?
4. Internationalization
4.1 Unicode。
Are UTF-8 and UTF-16 encodings supported?
4.2 Multi-language input method.
Does it support T9 input method? Is it possible to support new input methods?
4.3 String translation.
Does it support string translation? Does it support real-time language switching (without restarting)?
4.4 Image translation.
Does it support image translation (that is, when switching languages, automatically switch some images)?
4.5 Bidirectional typesetting of text.
Is bidirectional typesetting of Arabic text supported?
4.6 Code conversion function.
Is there a cross-platform encoding conversion function provided?
5 Software Quality
5.1 Unit Testing
Are there complete unit tests? Do all unit tests pass?
5.2 Memory exhaustion processing flow
Does it crash directly when memory is exhausted? Or let the application exit gracefully?
5.3 Memory leak checking mechanism
Is there a memory leak checking mechanism? Is it possible to perform memory leak and overflow checking with valgrind?
5.4 Code static checking.
Has it passed cppcheck , infer or other static checking tools?
5.5 Event recording and playback functions
Is it possible to record events of user actions and stress test them by replaying them?
5.6 Appuim for automated testing
Is Appuim supported to automate integration tests via scripts such as javascript?