Performance Tips & Tricks for Qt-QML Apps               Rajesh Lal, Nokia
High Performance QML Applications                         +                      =      Qt Quick                    QML   ...
Agenda               QML    Qt Quick         7 Tips   Tools               App3
What is Qt Quick                   • QML                   • IDE – Qt Creator                   • Qt UI Designer          ...
What is QML                    • Qt Meta-Object Language                    • JavaScript based                    • Qt Dec...
QML         Powerful      Declarative    User Interface         language6
QML Elements    Graphics   Animation      Binding     Items       State       Property    Shapes     Transitions   JavaScr...
What is a Qt QML App                                      Logic in                                      JavaScript or     ...
Qt-QML App                            QML App. Viewer                                                  Property Bind      ...
What is Performance     •   Short response time     •   High Throughput     •   Low utilization of resources     •   High ...
7 Tips for     High Performance QML Application11
Tip 1     Divide and Rule12
1: Divide and Rule     •   Divide application UI into multiple QML files     •   Each Logical entity as a separate QML fil...
1: Divide and Rule     Rule     • Use main.qml as the main UI        ₋ With different States & Transitions        ₋ Create...
1: Divide and Rule15
Tip 2     Load and Unload16
2: Load and Unload     •   Use Loader to control the memory usage     •   Load the absolute Minimum at the startup     •  ...
2: Load and Unload18
Tip 3     Use Asynchronous Threads19
3: Asynchronous Threads     •   Use WorkerScripts for Remote API Calls     •   Use Threads for time consuming operations  ...
3: Asynchronous ThreadsLogin call in MyApp.QML    MyAppScript/Login.QML file 21
3: Asynchronous ThreadsJs/dologin.js22
Tip 4        Optimize for Images     (Greatest User of Memory)23
4: Optimize for Images     •   Optimize Images to reduce memory footprints     •   Specify exact size of the image     •  ...
Tip 5     Beware of String Operations25
5: Beware of String Operations     •   Strings are immutable     •   multiple + operator = multiple memory allocations    ...
Tip 6     Know States, Transitions, & Animations27
6: Know States, Transitions, & Animations     •   In transition, animated area should be small     •   Animate different i...
Tip 7     Follow Best Practices29
7: Best Practices     •   For best performance use C++ instead of JavaScript     •   Insert properties at top of element d...
Tools     QML Performance Monitor     http://www.youtube.com/watch?v=XdI9C53uJw8     Valgrind     http://valgrind.org/docs...
Thank You @rajeshlalnokia
Upcoming SlideShare
Loading in …5
×

Performance Tips & Tricks for QT/QML Apps: MeeGo Conference San Francisco, Hyatt Regency, May 23-25,2011 @iRajLal

9,803 views
9,441 views

Published on

Learn the Best practices for QML Application Architecture, Know the Tips and tricks related to show QML in a MeeGo device. Best practices for Qt/QML development and conventions to avoid in QML development. Learn the programming guidelines that apply to QML.

A refreshing list of Tips and Tricks and to optimize your QML applications and know what to avoid.

Published in: Technology
5 Comments
6 Likes
Statistics
Notes
No Downloads
Views
Total views
9,803
On SlideShare
0
From Embeds
0
Number of Embeds
695
Actions
Shares
0
Downloads
117
Comments
5
Likes
6
Embeds 0
No embeds

No notes for slide

Performance Tips & Tricks for QT/QML Apps: MeeGo Conference San Francisco, Hyatt Regency, May 23-25,2011 @iRajLal

  1. 1. Performance Tips & Tricks for Qt-QML Apps Rajesh Lal, Nokia
  2. 2. High Performance QML Applications + = Qt Quick QML MeeGo Apps Qt UI Creation Kit Most Advanced UI High Performance2
  3. 3. Agenda QML Qt Quick 7 Tips Tools App3
  4. 4. What is Qt Quick • QML • IDE – Qt Creator • Qt UI Designer • Plugin for Mobility API • Quick Components The Fastest way to develop for MeeGo4
  5. 5. What is QML • Qt Meta-Object Language • JavaScript based • Qt Declarative runtime • CSS-JavaScript like syntax The Most Advanced UI technology for Mobile5
  6. 6. QML Powerful Declarative User Interface language6
  7. 7. QML Elements Graphics Animation Binding Items State Property Shapes Transitions JavaScript Text Transform. C++7
  8. 8. What is a Qt QML App Logic in JavaScript or UI in QML C++ API calls (main.qml) A Qt Container (main.cpp) Qt Quick Application8
  9. 9. Qt-QML App QML App. Viewer Property Bind 1+ QML Files JavaScript Import libraries Logic C++ Binding Import JS files UI 1 | 2 | 3 Qt Container(main.cpp)9
  10. 10. What is Performance • Short response time • High Throughput • Low utilization of resources • High availability • High Speed • Instant • Smoothness10
  11. 11. 7 Tips for High Performance QML Application11
  12. 12. Tip 1 Divide and Rule12
  13. 13. 1: Divide and Rule • Divide application UI into multiple QML files • Each Logical entity as a separate QML file • Think Object Oriented Programming • Do not use 1 Large QML file13
  14. 14. 1: Divide and Rule Rule • Use main.qml as the main UI ₋ With different States & Transitions ₋ Create Multiple Views .QML files ₋ Import folders containing other QML files ₋ Local instances of imported QML elements14
  15. 15. 1: Divide and Rule15
  16. 16. Tip 2 Load and Unload16
  17. 17. 2: Load and Unload • Use Loader to control the memory usage • Load the absolute Minimum at the startup • Dynamically Load and Unload UI Components • Create Components when required17
  18. 18. 2: Load and Unload18
  19. 19. Tip 3 Use Asynchronous Threads19
  20. 20. 3: Asynchronous Threads • Use WorkerScripts for Remote API Calls • Use Threads for time consuming operations • Load large images asynchronously • Use caching for remote data/image (cacheBuffer in listview/Gridview)20
  21. 21. 3: Asynchronous ThreadsLogin call in MyApp.QML MyAppScript/Login.QML file 21
  22. 22. 3: Asynchronous ThreadsJs/dologin.js22
  23. 23. Tip 4 Optimize for Images (Greatest User of Memory)23
  24. 24. 4: Optimize for Images • Optimize Images to reduce memory footprints • Specify exact size of the image • Avoid resizing/scaling an image in QML • Lazy load large images (asynchronous=true) • Don’t cache large images (cache=false) • Smooth filter = better visual quality, but slower24
  25. 25. Tip 5 Beware of String Operations25
  26. 26. 5: Beware of String Operations • Strings are immutable • multiple + operator = multiple memory allocations • Use StringBuilder for more efficient strings • Define ₋ #define QT_USE_FAST_CONCATENATION ₋ #define QT_USE_FAST_OPERATOR_PLUS26
  27. 27. Tip 6 Know States, Transitions, & Animations27
  28. 28. 6: Know States, Transitions, & Animations • In transition, animated area should be small • Animate different items sequentially when possible • Avoid multiple timers during animation • Avoid JavaScript operations during animation • Use ScriptAction & StateChangeScript28
  29. 29. Tip 7 Follow Best Practices29
  30. 30. 7: Best Practices • For best performance use C++ instead of JavaScript • Insert properties at top of element declarations • Create application logic outside QML • Don’t build multiple layer of QML hierarchies • Use Qts i18n for internationalisation & localisation30
  31. 31. Tools QML Performance Monitor http://www.youtube.com/watch?v=XdI9C53uJw8 Valgrind http://valgrind.org/docs/manual/mc-manual.html QML Performance Guidelines http://doc.qt.nokia.com/4.7/qdeclarativeperformance.html31
  32. 32. Thank You @rajeshlalnokia

×