Connecting Technology for Great Experiences - How does QML and Web fit together?
3 likes525 views
The document discusses connecting technology for great experiences. It summarizes Kenneth Rohde Christiansen's presentation at the Bossa Conference in March 2010. The presentation discusses current technology trends like the ubiquity of the web, social networking, and the importance of personal data and fluid interfaces. It also discusses the power and limitations of using the web for applications. While the web provides access to existing content and services, it can be challenging to create responsive apps due to DOM manipulation overhead and lack of offline support. The presentation also highlights benefits of using Qt's declarative QML interface language for developing fluid, personalized user interfaces that support rapid development and animation.
Connecting Technology for Great Experiences - How does QML and Web fit together?
- 1. Connecting Technology for Great Experiences Kenneth Rohde Christiansen Bossa Conference, Manaus, March 2010
- 2. TRYING TO STEER UP SOME DISCUSSION
- 3. TRYING TO STEER UP SOME DISCUSSION WHO AM I?
- 4. TRYING TO STEER UP SOME DISCUSSION WHO AM I? KENNETH R. CHRISTIANSEN
- 5. TRYING TO STEER UP SOME DISCUSSION WHO AM I? KENNETH R. CHRISTIANSEN WEBKIT REVIEWER
- 6. TRYING TO STEER UP SOME DISCUSSION WHO AM I? KENNETH R. CHRISTIANSEN WEBKIT REVIEWER 1+ YEAR WORKING WITH WEBKIT
- 7. TRYING TO STEER UP SOME DISCUSSION WHO AM I? KENNETH R. CHRISTIANSEN WEBKIT REVIEWER 1+ YEAR WORKING WITH WEBKIT 2+ YEARS WORKING WITH APP DEVELOPMENT USING DECLARATIVE LANGUAGE
- 8. TRYING TO STEER UP SOME DISCUSSION WHO AM I? KENNETH R. CHRISTIANSEN WEBKIT REVIEWER 1+ YEAR WORKING WITH WEBKIT 2+ YEARS WORKING WITH APP DEVELOPMENT USING DECLARATIVE LANGUAGE NOKIA TECHNOLOGY INSTITUTE, INdT
- 10. Been working with fluid interfaces for a long time Flexibility, rapid development
- 11. Lots of prototyping, had to develop fast Example of a Media player
- 12. Experiments with Web, Qt, Declarative UI Our interfaces have all been canvas based
- 13. Targeting different display, input devices Types of display, resolution vs. dimension, keyboard vs. touch.
- 14. Lessons learned How we learned to design our applications Clear Model/View/Controller separation is an advantage Two types of controllers: One handling interaction between Model and View and one handling user input Declarative UI language makes it possible to make the interface a “theme”, that can easily be adapted per per device, by a designer The input handling can be part of that theme: Click area size is a good example.
- 16. Some of the current trends The background for the applications of today
- 17. Some of the current trends The background for the applications of today WEB IS EVERYWHERE!
- 18. Some of the current trends The background for the applications of today SOCIAL NETWORKING, WEB IS ALWAYS EVERYWHERE! CONNECTED
- 19. Some of the current trends The background for the applications of today SOCIAL NETWORKING, WEB IS ALWAYS EVERYWHERE! CONNECTED ACCESS TO WHAT MATTERS TO ME
- 20. Some of the current trends The background for the applications of today SOCIAL NETWORKING, WEB IS ALWAYS EVERYWHERE! CONNECTED IMPORTANT PERSONAL DATA ONLINE ACCESS TO WHAT MATTERS TO ME
- 21. Some of the current trends The background for the applications of today SOCIAL NETWORKING, WEB IS ALWAYS EVERYWHERE! CONNECTED IMPORTANT PERSONAL DATA ONLINE ACCESS TO WHAT MATTERS TO ME FLUID INTERFACES
- 22. Some of the current trends The background for the applications of today SOCIAL NETWORKING, WEB IS ALWAYS EVERYWHERE! CONNECTED IMPORTANT DESIGN/FASHION PERSONAL DATA ORIENTED ONLINE ACCESS TO WHAT MATTERS TO ME FLUID INTERFACES
- 23. Some of the current trends The background for the applications of today SOCIAL NETWORKING, WEB IS ALWAYS EVERYWHERE! CONNECTED IMPORTANT DESIGN/FASHION PERSONAL DATA ORIENTED ONLINE PERSONAL ACCESS TO WHAT MATTERS TO ME FLUID INTERFACES
- 24. Some of the current trends The background for the applications of today SOCIAL NETWORKING, WEB IS ALWAYS EVERYWHERE! CONNECTED IMPORTANT DESIGN/FASHION PERSONAL DATA ORIENTED ONLINE TECHNOLOGY IS PERSONAL NOT JUST A TOOL, ACCESS TO WHAT BUT A WAY OF LIFE MATTERS TO ME FLUID INTERFACES
- 25. Some of the current trends The background for the applications of today SOCIAL NETWORKING, WEB IS ALWAYS EVERYWHERE! CONNECTED IMPORTANT DESIGN/FASHION PERSONAL DATA ORIENTED ONLINE TECHNOLOGY IS PERSONAL NOT JUST A TOOL, ACCESS TO WHAT BUT A WAY OF LIFE MATTERS TO ME FLUID INTERFACES TECHNOLOGY SHOULD NOT BE A DISTRACTION
- 26. Some of the current trends The background for the applications of today SOCIAL NETWORKING, WEB IS ALWAYS EVERYWHERE! CONNECTED IMPORTANT DESIGN/FASHION PERSONAL DATA ORIENTED ONLINE TECHNOLOGY IS PERSONAL NOT JUST A TOOL, ACCESS TO WHAT BUT A WAY OF LIFE MATTERS TO ME FLUID INTERFACES TECHNOLOGY SHOULD NOT BE A DISTRACTION BUT AN ENABLER
- 27. So Web is the future? The state of the Web SOCIAL NETWORKING, WEB IS ALWAYS EVERYWHERE! CONNECTED IMPORTANT DESIGN/FASHION PERSONAL DATA ORIENTED ONLINE TECHNOLOGY IS PERSONAL NOT JUST A TOOL, ACCESS TO WHAT BUT A WAY OF LIFE MATTERS TO ME FLUID INTERFACES
- 28. So Web is the future? The state of the Web SOCIAL NETWORKING, WEB IS ALWAYS EVERYWHERE! CONNECTED IMPORTANT DESIGN/FASHION PERSONAL DATA IN SOME AREAS, ORIENTED THE WEB IS ONLINE NOT THERE TODAY TECHNOLOGY IS PERSONAL NOT JUST A TOOL, ACCESS TO WHAT BUT A WAY OF LIFE MATTERS TO ME FLUID INTERFACES
- 29. So Web is the future? The state of the Web SOCIAL NETWORKING, WEB IS ALWAYS EVERYWHERE! CONNECTED IMPORTANT DESIGN/FASHION PERSONAL DATA IN SOME AREAS, ORIENTED THE WEB IS ONLINE NOT THERE TODAY BUT CAN IT BE? TECHNOLOGY IS PERSONAL NOT JUST A TOOL, ACCESS TO WHAT DOES IT MAKES SENSE? LIFE BUT A WAY OF MATTERS TO ME IS A MIXTURE / A HYBRID FLUID POSSIBLE? INTERFACES
- 30. Understanding the tools, filling the gaps The power of Web as a technology THE WEB IS VERY POWERFUL
- 31. Understanding the tools, filling the gaps The power of Web as a technology THE WEB IS VERY POWERFUL Designed for contents (text, images, data...)
- 32. Understanding the tools, filling the gaps The power of Web as a technology THE WEB IS VERY POWERFUL Designed for contents (text, images, data...) Very flexible layouting
- 33. Understanding the tools, filling the gaps The power of Web as a technology THE WEB IS VERY POWERFUL Designed for contents (text, images, data...) Very flexible layouting Zero-deployment / update-ability
- 34. Understanding the tools, filling the gaps The power of Web as a technology THE WEB IS VERY POWERFUL Designed for contents (text, images, data...) Very flexible layouting Zero-deployment / update-ability Lots of existing Web contents out there, and that is not going to go away.
- 35. Understanding the tools, filling the gaps The power of Web as a technology THE WEB IS VERY POWERFUL Designed for contents (text, images, data...) Very flexible layouting Zero-deployment / update-ability Lots of existing Web contents out there, and that is not going to go away. Indexability, searching
- 36. What is the catch? Why are we not all just using Web It was designed for contents, patched for Web apps
- 37. What is the catch? Why are we not all just using Web It was designed for contents, patched for Web apps Expensive DOM manipulation
- 38. What is the catch? Why are we not all just using Web It was designed for contents, patched for Web apps Expensive DOM manipulation Extremely flexible - a monster doing more that you normally need. Can lead to unresponsiveness, battery drain
- 39. What is the catch? Why are we not all just using Web It was designed for contents, patched for Web apps Expensive DOM manipulation Extremely flexible - a monster doing more that you normally need. Can lead to unresponsiveness, battery drain Summarized: You need to understand the inner working of the Web engine in order to make a responsive, nice application What triggeres a relayout? etc...
- 40. But is it possible at all? Why are we not all just using Web Yes! Google has many apps already, Palm WebOS is an even better example, providing: DESIGN/FASHION ORIENTED FLUID INTERFACE INTERFACES PERSONALIZATION
- 41. But is it possible at all? Why are we not all just using Web Yes! Google has many apps already, Palm WebOS is an even better example, providing: DESIGN/FASHION ORIENTED FLUID INTERFACE INTERFACES PERSONALIZATION But, the developer experience is still lacking, and if you look at their hardware (comparable to N900, iPhone 3GS) the interface seems slow and unresponsive.
- 42. So does it make sense? It does! in some situations Remember:
- 43. So does it make sense? It does! in some situations Remember: ACCESS TO WHAT MATTERS TO ME
- 44. So does it make sense? It does! in some situations Remember: ALWAYS CONNECTED ACCESS TO WHAT MATTERS TO ME
- 45. So does it make sense? It does! in some situations Remember: ALWAYS CONNECTED PERSONAL ACCESS TO WHAT DATA ONLINE MATTERS TO ME
- 46. So does it make sense? It does! in some situations Remember: ALWAYS CONNECTED PERSONAL ACCESS TO WHAT DATA ONLINE MATTERS TO ME + A LOT OF OTHER REASONS
- 47. The case of the established protocol Access to online data is all about services So why not just make a native app, Qt has QNetwork... + B + C
- 48. The case of the established protocol Access to online data is all about services So why not just make a native app, Qt has QNetwork... + B + C Connecting a native app with a server requires a communication protocol, that should preferrable to easy to use and extensive. Defining and maintaining such one can be expensive
- 49. The case of the established protocol Access to online data is all about services So why not just make a native app, Qt has QNetwork... + B + C Connecting a native app with a server requires a communication protocol, that should preferrable to easy to use and extensive. Defining and maintaining such one can be expensive A Web app is the protocol itself: HTML + CSS HTTP JAVASCRIPT
- 50. The case of the established protocol Access to online data is all about services For a Web application the protocol is: HTML + CSS HTTP JAVASCRIPT This makes it possible for the service provider to change the inner workings of the app+service at any point, transparent to the user. The app lives online, but can have offline capabilities.
- 51. Great integration with existing Web Services There is so much out there, in use by our target group Flickr, Twitter, Ovi Services.... Stocks, News feed, Weather forecast, Social Networking
- 52. So where does the Web fail Identifying some of the problems - Hard to make fluid interfaces not designed for it
- 53. So where does the Web fail Identifying some of the problems - Hard to make fluid interfaces not designed for it - Extra care for making things work offline
- 54. So where does the Web fail Identifying some of the problems - Hard to make fluid interfaces not designed for it - Extra care for making things work offline - Limited native integration device + ui
- 55. So where does the Web fail Identifying some of the problems - Hard to make fluid interfaces not designed for it - Extra care for making things work offline - Limited native integration device + ui - Depends on connectivity speed, server downtime
- 56. So where does the Web fail Identifying some of the problems - Hard to make fluid interfaces not designed for it - Extra care for making things work offline - Limited native integration device + ui - Depends on connectivity speed, server downtime - Increased security ricks js injection
- 57. So where does the Web fail Identifying some of the problems - Hard to make fluid interfaces not designed for it - Extra care for making things work offline - Limited native integration device + ui - Depends on connectivity speed, server downtime - Increased security ricks js injection - Memory / battery usage
- 58. But that can all be fixed, right? Searching for solutions - Qt makes it easy to expose native API’s to JS
- 59. But that can all be fixed, right? Searching for solutions - Qt makes it easy to expose native API’s to JS - Offline is a bit part of HTML5, but not out of the box
- 60. But that can all be fixed, right? Searching for solutions - Qt makes it easy to expose native API’s to JS - Offline is a bit part of HTML5, but not out of the box - Web Runtime makes it possible to run apps locally
- 61. But that can all be fixed, right? Searching for solutions - Qt makes it easy to expose native API’s to JS - Offline is a bit part of HTML5, but not out of the box - Web Runtime makes it possible to run apps locally - Sandboxing
- 62. But that can all be fixed, right? Searching for solutions - Qt makes it easy to expose native API’s to JS - Offline is a bit part of HTML5, but not out of the box - Web Runtime makes it possible to run apps locally - Sandboxing Still a lot of work to do. and remember, we want a nice Developer Experience
- 63. BACK TO THE NATIVE SIDE Let’s leave the Web for a while and have a look at QML
- 64. COOL STUFF DECLARATIVE INTERFACE LANGUAGE FOR QT
- 65. COOL STUFF DECLARATIVE INTERFACE LANGUAGE FOR QT ALL ‘BOUT:
- 66. COOL STUFF DECLARATIVE INTERFACE LANGUAGE FOR QT ALL ‘BOUT: FLUID INTERFACES
- 67. COOL STUFF DECLARATIVE INTERFACE LANGUAGE FOR QT ALL ‘BOUT: FLUID INTERFACES PERSONALIZATION
- 68. COOL STUFF DECLARATIVE INTERFACE LANGUAGE FOR QT ALL ‘BOUT: FLUID INTERFACES PERSONALIZATION UI
- 69. COOL STUFF DECLARATIVE INTERFACE LANGUAGE FOR QT ALL ‘BOUT: FLUID INTERFACES PERSONALIZATION UI RAPID DEVELOPMENT
- 70. COOL STUFF DECLARATIVE INTERFACE LANGUAGE FOR QT ALL ‘BOUT: FLUID INTERFACES PERSONALIZATION UI RAPID DEVELOPMENT ANIMATION
- 71. COOL STUFF DECLARATIVE INTERFACE LANGUAGE FOR QT ALL ‘BOUT: FLUID INTERFACES PERSONALIZATION UI RAPID DEVELOPMENT ANIMATION Easy to grasp, use and yet very flexible
- 72. COOL STUFF DECLARATIVE INTERFACE LANGUAGE FOR QT ALL ‘BOUT: FLUID INTERFACES PERSONALIZATION UI RAPID DEVELOPMENT ANIMATION Easy to grasp, use and yet very flexible “End of the Widgets”
- 73. COOL STUFF DECLARATIVE INTERFACE LANGUAGE FOR QT ALL ‘BOUT: FLUID INTERFACES PERSONALIZATION UI RAPID DEVELOPMENT ANIMATION Easy to grasp, use and yet very flexible “End of the Widgets” High Reuse
- 74. COOL STUFF DECLARATIVE INTERFACE LANGUAGE FOR QT ALL ‘BOUT: FLUID INTERFACES PERSONALIZATION UI RAPID DEVELOPMENT ANIMATION Easy to grasp, use and yet very flexible “End of the Widgets” High Reuse Themability / Change input methods with theme / Adapt for different devices
- 75. COOL STUFF DECLARATIVE INTERFACE LANGUAGE FOR QT ALL ‘BOUT: FLUID INTERFACES PERSONALIZATION UI RAPID DEVELOPMENT ANIMATION JavaScript scripting, JSON like format
- 76. COOL STUFF DECLARATIVE INTERFACE LANGUAGE FOR QT ALL ‘BOUT: FLUID INTERFACES PERSONALIZATION UI RAPID DEVELOPMENT ANIMATION JavaScript scripting, JSON like format Embed QML in QML (even with HTTP, or so I’ve heard)
- 77. COOL STUFF DECLARATIVE INTERFACE LANGUAGE FOR QT ALL ‘BOUT: FLUID INTERFACES PERSONALIZATION UI RAPID DEVELOPMENT ANIMATION JavaScript scripting, JSON like format Embed QML in QML (even with HTTP, or so I’ve heard) Some Web Integration: You can have a Web View Use images from HTTP etc
- 78. Wow, that sounds too good to be true But you better believe it Downsides?
- 79. Wow, that sounds too good to be true But you better believe it Downsides? It is not a standard
- 80. Wow, that sounds too good to be true But you better believe it Downsides? It is not a standard You cannot target the iPhone, Android, Nokia ... etc
- 81. Wow, that sounds too good to be true But you better believe it Downsides? It is not a standard You cannot target the iPhone, Android, Nokia ... etc So far unproven, how will it evolve? backward compat...?
- 82. Wow, that sounds too good to be true But you better believe it Downsides? It is not a standard You cannot target the iPhone, Android, Nokia ... etc So far unproven, how will it evolve? backward compat...? Only basic Web integration: Just a Web view
- 83. Wow, that sounds too good to be true But you better believe it Downsides? It is not a standard You cannot target the iPhone, Android, Nokia ... etc So far unproven, how will it evolve? backward compat...? Only basic Web integration: Just a Web view Layout / contents with non-fixed layout
- 84. WRT+QML Complementing Power A look at use cases for both technologies
- 85. Online Widgets with offline abbilities Give the services more control Get layout + contents from a service Make it work offline Personalization Good for widgets, Social integration
- 86. Powerful layout Remember Word vs. Pagemaker? CSS + is powerful combination HTML Make a lot of sense for text+images QML has some support for this, but it is not nearly as powerful
- 87. Sometimes Web just doesn’t make sense Let’s consider a video player When the app needs raw speed, lots of user interaction, depends on native anyway, etc...
- 88. Native and Web working together United we are strong How can we join the technologies
- 89. Native and Web working together United we are strong How can we join the technologies Manipulate / show iframes instead of Webpages in QML
- 90. Native and Web working together United we are strong How can we join the technologies Manipulate / show iframes instead of Webpages in QML Enable cross iframe communication
- 91. Native and Web working together United we are strong How can we join the technologies Manipulate / show iframes instead of Webpages in QML Enable cross iframe communication Less resources
- 92. Native and Web working together United we are strong How can we join the technologies Manipulate / show iframes instead of Webpages in QML Enable cross iframe communication Less resources Do a QML list with each item being an iframe or a web element, can it get more hybrid that that? ;-)
- 93. Native and Web working together United we are strong How can we join the technologies Manipulate / show iframes instead of Webpages in QML Enable cross iframe communication Less resources Do a QML list with each item being an iframe or a web element, can it get more hybrid that that? ;-) Shared JS runtime, bind QML props to iframe properties
- 94. Thanks for listening Understanding the tools, we fill the gaps I hope that I have provided you with some new input and steered up some discussion. KENNETH ROHDE CHRISTIANSEN ext-kenneth.christiansen@nokia.com kenneth.christiansen@openbossa.org