Connecting Technology for Great Experiences - How does QML and Web fit together?

Connecting Technology for Great Experiences Kenneth Rohde Christiansen Bossa Conference, Manaus, March 2010

TRYING TO STEER UP SOME DISCUSSION

TRYING TO STEER UP SOME DISCUSSION WHO AM I?

TRYING TO STEER UP SOME DISCUSSION WHO AM I? KENNETH R. CHRISTIANSEN

TRYING TO STEER UP SOME DISCUSSION WHO AM I? KENNETH R. CHRISTIANSEN WEBKIT REVIEWER

TRYING TO STEER UP SOME DISCUSSION WHO AM I? KENNETH R. CHRISTIANSEN WEBKIT REVIEWER 1+ YEAR WORKING WITH WEBKIT

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

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

WHERE I COME FROM

Been working with ﬂuid interfaces for a long time Flexibility, rapid development

Lots of prototyping, had to develop fast Example of a Media player

Experiments with Web, Qt, Declarative UI Our interfaces have all been canvas based

Targeting different display, input devices Types of display, resolution vs. dimension, keyboard vs. touch.

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.

TRENDS WHY WE CARE

Some of the current trends The background for the applications of today

Some of the current trends The background for the applications of today WEB IS EVERYWHERE!

Some of the current trends The background for the applications of today SOCIAL NETWORKING, WEB IS ALWAYS EVERYWHERE! CONNECTED

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

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

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

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

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

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

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

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

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

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

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

Understanding the tools, ﬁlling the gaps The power of Web as a technology THE WEB IS VERY POWERFUL

Understanding the tools, ﬁlling the gaps The power of Web as a technology THE WEB IS VERY POWERFUL Designed for contents (text, images, data...)

Understanding the tools, ﬁlling the gaps The power of Web as a technology THE WEB IS VERY POWERFUL Designed for contents (text, images, data...) Very ﬂexible layouting

Understanding the tools, ﬁlling the gaps The power of Web as a technology THE WEB IS VERY POWERFUL Designed for contents (text, images, data...) Very ﬂexible layouting Zero-deployment / update-ability

Understanding the tools, ﬁlling the gaps The power of Web as a technology THE WEB IS VERY POWERFUL Designed for contents (text, images, data...) Very ﬂexible layouting Zero-deployment / update-ability Lots of existing Web contents out there, and that is not going to go away.

Understanding the tools, ﬁlling the gaps The power of Web as a technology THE WEB IS VERY POWERFUL Designed for contents (text, images, data...) Very ﬂexible layouting Zero-deployment / update-ability Lots of existing Web contents out there, and that is not going to go away. Indexability, searching

What is the catch? Why are we not all just using Web It was designed for contents, patched for Web apps

What is the catch? Why are we not all just using Web It was designed for contents, patched for Web apps Expensive DOM manipulation

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 ﬂexible - a monster doing more that you normally need. Can lead to unresponsiveness, battery drain

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 ﬂexible - 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...

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 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.

So does it make sense? It does! in some situations Remember:

So does it make sense? It does! in some situations Remember: ACCESS TO WHAT MATTERS TO ME

So does it make sense? It does! in some situations Remember: ALWAYS CONNECTED ACCESS TO WHAT MATTERS TO ME

So does it make sense? It does! in some situations Remember: ALWAYS CONNECTED PERSONAL ACCESS TO WHAT DATA ONLINE MATTERS TO ME

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

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

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. Deﬁning and maintaining such one can be expensive

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. Deﬁning and maintaining such one can be expensive A Web app is the protocol itself: HTML + CSS HTTP JAVASCRIPT

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 ofﬂine capabilities.

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

So where does the Web fail Identifying some of the problems - Hard to make ﬂuid interfaces not designed for it

So where does the Web fail Identifying some of the problems - Hard to make ﬂuid interfaces not designed for it - Extra care for making things work ofﬂine

So where does the Web fail Identifying some of the problems - Hard to make ﬂuid interfaces not designed for it - Extra care for making things work ofﬂine - Limited native integration device + ui

So where does the Web fail Identifying some of the problems - Hard to make ﬂuid interfaces not designed for it - Extra care for making things work ofﬂine - Limited native integration device + ui - Depends on connectivity speed, server downtime

So where does the Web fail Identifying some of the problems - Hard to make ﬂuid interfaces not designed for it - Extra care for making things work ofﬂine - Limited native integration device + ui - Depends on connectivity speed, server downtime - Increased security ricks js injection

So where does the Web fail Identifying some of the problems - Hard to make ﬂuid interfaces not designed for it - Extra care for making things work ofﬂine - Limited native integration device + ui - Depends on connectivity speed, server downtime - Increased security ricks js injection - Memory / battery usage

But that can all be ﬁxed, right? Searching for solutions - Qt makes it easy to expose native API’s to JS

But that can all be ﬁxed, right? Searching for solutions - Qt makes it easy to expose native API’s to JS - Ofﬂine is a bit part of HTML5, but not out of the box

But that can all be ﬁxed, right? Searching for solutions - Qt makes it easy to expose native API’s to JS - Ofﬂine is a bit part of HTML5, but not out of the box - Web Runtime makes it possible to run apps locally

But that can all be ﬁxed, right? Searching for solutions - Qt makes it easy to expose native API’s to JS - Ofﬂine is a bit part of HTML5, but not out of the box - Web Runtime makes it possible to run apps locally - Sandboxing

But that can all be ﬁxed, right? Searching for solutions - Qt makes it easy to expose native API’s to JS - Ofﬂine 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

BACK TO THE NATIVE SIDE Let’s leave the Web for a while and have a look at QML

COOL STUFF DECLARATIVE INTERFACE LANGUAGE FOR QT

COOL STUFF DECLARATIVE INTERFACE LANGUAGE FOR QT ALL ‘BOUT:

COOL STUFF DECLARATIVE INTERFACE LANGUAGE FOR QT ALL ‘BOUT: FLUID INTERFACES

COOL STUFF DECLARATIVE INTERFACE LANGUAGE FOR QT ALL ‘BOUT: FLUID INTERFACES PERSONALIZATION

COOL STUFF DECLARATIVE INTERFACE LANGUAGE FOR QT ALL ‘BOUT: FLUID INTERFACES PERSONALIZATION UI

COOL STUFF DECLARATIVE INTERFACE LANGUAGE FOR QT ALL ‘BOUT: FLUID INTERFACES PERSONALIZATION UI RAPID DEVELOPMENT

COOL STUFF DECLARATIVE INTERFACE LANGUAGE FOR QT ALL ‘BOUT: FLUID INTERFACES PERSONALIZATION UI RAPID DEVELOPMENT ANIMATION

COOL STUFF DECLARATIVE INTERFACE LANGUAGE FOR QT ALL ‘BOUT: FLUID INTERFACES PERSONALIZATION UI RAPID DEVELOPMENT ANIMATION Easy to grasp, use and yet very ﬂexible

COOL STUFF DECLARATIVE INTERFACE LANGUAGE FOR QT ALL ‘BOUT: FLUID INTERFACES PERSONALIZATION UI RAPID DEVELOPMENT ANIMATION Easy to grasp, use and yet very ﬂexible “End of the Widgets”

COOL STUFF DECLARATIVE INTERFACE LANGUAGE FOR QT ALL ‘BOUT: FLUID INTERFACES PERSONALIZATION UI RAPID DEVELOPMENT ANIMATION Easy to grasp, use and yet very ﬂexible “End of the Widgets” High Reuse

COOL STUFF DECLARATIVE INTERFACE LANGUAGE FOR QT ALL ‘BOUT: FLUID INTERFACES PERSONALIZATION UI RAPID DEVELOPMENT ANIMATION Easy to grasp, use and yet very ﬂexible “End of the Widgets” High Reuse Themability / Change input methods with theme / Adapt for different devices

COOL STUFF DECLARATIVE INTERFACE LANGUAGE FOR QT ALL ‘BOUT: FLUID INTERFACES PERSONALIZATION UI RAPID DEVELOPMENT ANIMATION JavaScript scripting, JSON like format

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)

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

Wow, that sounds too good to be true But you better believe it Downsides?

Wow, that sounds too good to be true But you better believe it Downsides? It is not a standard

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

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...?

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

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-ﬁxed layout

WRT+QML Complementing Power A look at use cases for both technologies

Online Widgets with ofﬂine abbilities Give the services more control Get layout + contents from a service Make it work ofﬂine Personalization Good for widgets, Social integration

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

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...

Native and Web working together United we are strong How can we join the technologies

Native and Web working together United we are strong How can we join the technologies Manipulate / show iframes instead of Webpages in QML

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

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

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? ;-)

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

Thanks for listening Understanding the tools, we ﬁll 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

http://codeposts.blogspot.com	952
http://maemo.org	125
http://codeposts.blogspot.in	21
http://www.slideshare.net	14
http://codeposts.blogspot.com.br	5
http://qtlabs.openbossa.org	4
http://codeposts.blogspot.de	4
http://webcache.googleusercontent.com	4
http://codeposts.blogspot.fr	4
http://translate.googleusercontent.com	3
http://codeposts.blogspot.com.au	3
http://codeposts.blogspot.com.es	2
http://codeposts.blogspot.co.uk	2
http://codeposts.blogspot.it	2
http://static.slidesharecdn.com	2
http://xss.yandex.net	2
http://www.lmodules.com	2
http://codeposts.blogspot.ca	1
http://codeposts.blogspot.se	1
http://codeposts.blogspot.sg	1

Connecting Technology for Great Experiences - How does QML and Web fit together?

by Kenneth Rohde Christiansen on Mar 09, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

20 Embeds 1,154

Statistics

Connecting Technology for Great Experiences - How does QML and Web fit together? — Presentation Transcript