connecting technology for great experiences - how does qml and web fit together?

Connecting Technologyfor Great Experiences

Kenneth Rohde ChristiansenBossa Conference, Manaus, March 2010

TRYING TO STEER UP SOME DISCUSSION


WHO AM I?


WHO AM I? KENNETH R. CHRISTIANSEN


WHO AM I? KENNETH R. CHRISTIANSEN WEBKIT REVIEWER


WHO AM I? KENNETH R. CHRISTIANSEN WEBKIT REVIEWER1+ YEAR WORKING WITH WEBKIT


WHO AM I? KENNETH R. CHRISTIANSEN WEBKIT REVIEWER1+ YEAR WORKING WITH WEBKITAPP DEVELOPMENT USING DECLARATIVE LANGUAGE

2+ YEARS WORKING WITH


WHO AM I? KENNETH R. CHRISTIANSEN WEBKIT REVIEWER1+ YEAR WORKING WITH WEBKITAPP DEVELOPMENT USING DECLARATIVE LANGUAGE

2+ YEARS WORKING WITHNOKIA

TECHNOLOGY INSTITUTE, INdT

WHEREI COME FROM

Been working with fluid interfaces for a long timeFlexibility, rapid development

Lots of prototyping, had to develop fastExample of a Media player

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

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

Lessons learnedHow we learned to design our applications

Clear Model/View/Controllerseparation is an advantage

Two types of controllers:

One handling interactionbetween Model and Viewand one handling user input

Declarative UI languagemakes it possible to make the interface a “theme”, thatcan easily be adapted perper device, by a designer

The input handling can bepart of that theme:

Click area size is a goodexample.

TRENDSWHY WE CARE

Some of the current trendsThe background for the applications of today

WEB IS EVERYWHERE!


SOCIAL NETWORKING,

ALWAYS CONNECTED

WEB IS EVERYWHERE!


ACCESS TO WHAT MATTERS TO ME

SOCIAL NETWORKING,

ALWAYS CONNECTED

WEB IS EVERYWHERE!


IMPORTANT PERSONAL DATA

ONLINE


SOCIAL NETWORKING,

ALWAYS CONNECTED

WEB IS EVERYWHERE!



ONLINE


FLUID INTERFACES

SOCIAL NETWORKING,

ALWAYS CONNECTED

WEB IS EVERYWHERE!


DESIGN/FASHION ORIENTED


ONLINE


FLUID INTERFACES

SOCIAL NETWORKING,

ALWAYS CONNECTED

WEB IS EVERYWHERE!




ONLINE


FLUID INTERFACES

SOCIAL NETWORKING,

ALWAYS CONNECTED

PERSONAL

WEB IS EVERYWHERE!




ONLINE

TECHNOLOGY IS NOT JUST A TOOL, BUT A WAY OF LIFEACCESS TO WHAT

MATTERS TO ME

FLUID INTERFACES

SOCIAL NETWORKING,

ALWAYS CONNECTED

PERSONAL

WEB IS EVERYWHERE!




ONLINE


MATTERS TO ME

FLUID INTERFACES

SOCIAL NETWORKING,

ALWAYS CONNECTED

PERSONAL

WEB IS EVERYWHERE!

TECHNOLOGY SHOULD NOT BE A DISTRACTION




ONLINE


MATTERS TO ME

FLUID INTERFACES

SOCIAL NETWORKING,

ALWAYS CONNECTED

PERSONAL

WEB IS EVERYWHERE!

TECHNOLOGY SHOULD NOT BE A DISTRACTIONBUT AN ENABLER




ONLINE


MATTERS TO ME

FLUID INTERFACES

SOCIAL NETWORKING,

ALWAYS CONNECTED

PERSONAL

WEB IS EVERYWHERE!

So Web is the future?The state of the Web



ONLINE


MATTERS TO ME

FLUID INTERFACES

SOCIAL NETWORKING,

ALWAYS CONNECTED

PERSONAL

WEB IS EVERYWHERE!


IN SOME AREAS, THE WEB IS NOT THERE TODAY



ONLINE


MATTERS TO ME

FLUID INTERFACES

SOCIAL NETWORKING,

ALWAYS CONNECTED

PERSONAL

WEB IS EVERYWHERE!


IN SOME AREAS, THE WEB IS NOT THERE TODAY

BUT CAN IT BE?

DOES IT MAKES SENSE?

IS A MIXTURE / A HYBRID POSSIBLE?

THE WEB IS VERY POWERFUL

Understanding the tools, filling the gapsThe power of Web as a technology



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.






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



Expensive DOM manipulation




Extremely flexible - a monster doing more that you normally need. Can lead to unresponsiveness, battery drain




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

But is it possible at all?Why are we not all just using Web

Yes! Google has many apps already, Palm WebOS isan even better example, providing:

DESIGN/FASHION ORIENTED INTERFACE

FLUID INTERFACES

PERSONALIZATION

But is it possible at all?Why are we not all just using Web

Yes! Google has many apps already, Palm WebOS isan even better example, providing:

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.

DESIGN/FASHION ORIENTED INTERFACE

FLUID INTERFACES

PERSONALIZATION

So does it make sense?

It does! in some situations

Remember:



Remember:




Remember:


ALWAYS CONNECTED



Remember:

PERSONAL DATA ONLINEACCESS TO WHAT

MATTERS TO ME

ALWAYS CONNECTED



Remember:

PERSONAL DATA ONLINEACCESS TO WHAT

MATTERS TO ME

ALWAYS CONNECTED

+ A LOT OF OTHER REASONS

The case of the established protocol

So why not just make a native app, Qt has QNetwork... + B + C

Access to online data is all about services



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




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


HTML + CSSJAVASCRIPTHTTP

A Web app is the protocol itself:


This makes it possible for the service providerto change the inner workings of the app+service at any point, transparent to the user. The app lives online, but can have offline capabilities.

HTML + CSSJAVASCRIPTHTTP


For a Web application the protocol is:

Great integration with existing Web Services

Stocks, News feed, Weather forecast, Social Networking

There is so much out there, in use by our target group

Flickr, Twitter, Ovi Services....

So where does the Web failIdentifying 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






- Increased security ricks js injection

- Memory / battery usage

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





- Sandboxing

Still a lot of work to do.

and remember, we want a nice Developer Experience

BACK TOTHE NATIVE SIDE

Let’s leave the Web for a while and have a look at QML

COOL STUFF DECLARATIVE INTERFACE LANGUAGE FOR QT


ALL ‘BOUT:


ALL ‘BOUT: FLUID INTERFACES


ALL ‘BOUT: FLUID INTERFACES PERSONALIZATION


ALL ‘BOUT: FLUID INTERFACES PERSONALIZATION UI


ALL ‘BOUT: FLUID INTERFACES PERSONALIZATION UI RAPIDDEVELOPMENT


ALL ‘BOUT: FLUID INTERFACES PERSONALIZATION UI RAPIDDEVELOPMENT ANIMATION



Easy to grasp, use and yet very flexible




“End of the Widgets”




“End of the Widgets”High Reuse




“End of the Widgets”High Reuse

Themability / Change input methods with theme / Adapt for different devices



JavaScript scripting, JSON like format




Embed QML in QML (even with HTTP, or so I’ve heard)




Embed QML in QML (even with HTTP, or so I’ve heard)

Some Web Integration:

You can have a Web ViewUse images from HTTP etc

Wow, that sounds too good to be trueBut you better believe it

Downsides?


Downsides?

It is not a standard


Downsides?


You cannot target the iPhone, Android, Nokia ... etc


Downsides?



So far unproven, how will it evolve? backward compat...?


Downsides?




Only basic Web integration: Just a Web view


Downsides?




Only basic Web integration: Just a Web view

Layout / contents with non-fixed layout

WRT+QML Complementing Power

A look at use cases for both technologies

Online Widgets with offline abbilitiesGive the services more control

Get layout + contentsfrom a service

Make it work offline

Personalization

Good for widgets,

Social integration

Powerful layoutRemember Word vs. Pagemaker?

Make a lot of sense for text+images

QML has some support for this,

but it is not nearly as powerful

is powerful combinationCSS +HTML

Sometimes Web just doesn’t make senseLet’s consider a video player

When the app needs raw speed, lots of user interaction,

depends on native anyway, etc...

Native and Web working togetherUnited we are strong

How can we join the technologies



Manipulate / show iframes insteadof Webpages in QML




Enable cross iframe communication





Less resources





Less resources

Do a QML list with each item beingan iframe or a web element,can it get more hybrid that that? ;-)




Shared JS runtime, bind QML propsto iframe properties


Less resources

Do a QML list with each item beingan iframe or a web element,can it get more hybrid that that? ;-)

Thanks for listening

KENNETH ROHDE CHRISTIANSENext-kenneth.christiansen@[email protected]

Understanding the tools, we fill the gaps

I hope that I have provided you with some new inputand steered up some discussion.

mailto:[email protected]




connecting technology for great experiences - how does qml and web fit together?

Technology

deployment update

today social networking

run apps locally

expose native apis

web fail identifying

web social networking

make uid interfaces

format embed qml