Bringing your Web investment to Nokia devices

Kenneth Rohde ChristiansenBossa Conference, Manaus, March 2010

Bringing your Web investment to Nokia devicesA look at Qt`s Web and Hybrid offerings

A LOOK AT QT’S WEB AND HYBRID OFFERINGS


WHO AM I?


WHO AM I? KENNETH R. CHRISTIANSEN


WHO AM I? KENNETH R. CHRISTIANSEN WEBKIT REVIEWER


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


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

2+ YEARS WORKING WITH


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

2+ YEARS WORKING WITHNOKIA

TECHNOLOGY INSTITUTE, INdT

INTRODUCINGTHE WORLD WIDE WEB

If somehing has had a huge impact on the

last decade it has been the Web

Looking back at the last 10 yearsThe impach of Web as a technology




It has changed out lifes, how we aquire information, how we interact with other people, how we share




It has changed out lifes, how we aquire information, how we interact with other people, how we share

It is leaving the desktop machines are moving to all new kind of devices, such as mobile phones, TVs, gaming devices; everything is more connected

It is changing how we write applications,

where information is stored, and how

we share data


AJAX was the next big playfield changer

AJAX, the playfield changerThe impach of Web as a technology



It made web applications a reality, brought new services such as GMail, Google Maps, Facebook, etc



It made web applications a reality, brought new services such as GMail, Google Maps, Facebook, etc

...but it also left a lot to be desired

Missing functionality, lots of assumptions about being online, hard to develop for

webapps

JS libraries, the new HTML5 features have made this easier but at the same time the user requirements for application interfaces HAVE CHANGED

webapps

The fact is that the web has not designed for apps, butpatched for it.

webapps

That said, things are about to change...

webappsApps are different in contents


More connected


More connected

Aggregating information


More connected


Run unmodified almost everywhere


More connected



Deployment and updating is costly


Net result: everyone are doing web

More connected



Deployment and updating is costly

webappsNOKIA OVI SERVICESPALM

WEBOS

GOOGLE MAPS, PICASA, FLICKR,

GOOGLE DOCSAPPLE

IWORKS.COM

MICROSOFT OFFICE LIVE

CHROME OS

A phone without a great Web browser is soon to be the past / Video Games build web services and communities around their games / Settop boxes get movie review a.o from the internet

A phone without a great Web browser is soon to be the past / Video Games build web services and communities around their games / Settop boxes get movie review a.o from the internet

Maybe things have already changed...

SO WHAT ARETHE NOKIA OFFERINGS?

Right now and in the near future

Today we will look at what you choices arewhen targeting Nokia devices

Currently, not all that great,but things are about to change

- Have existing web service

- Want to share user interface code

- Update user interface on demand

- Target many different platforms:

could be Android, iPhone, Nokia ...

Some common reasons

So you have decided to make a web app

USING THE DEFAULT BROWSER

Symbian comes w/ limited WebKit browser

- S60 Port, not Qt-based

Maemo comes with MicroB browser

- Mozilla engine, desktop like

Downsides...

It’s a browser, there’s chrome, yack!

Test the Ovi store on N900 for yourself

MicroB doesn’t support any of the CSS animations, transformation etc.

Scrolling lists feels like scrolling pages

What are the competitors doing?

iPhone WebKit has extensions to hide the chrome

Still, no fixed elements. Solution? Yes, we get back to that.

ROLLING YOUR OWN THING

To make a web app, you basically need a launcher providing a web view + web contents

Create a window, add a QWebView, adjust the settings, load the contents

That is it!

...but wait a sec

Rolling your own thing involves “native code”

Why would we ever want to go there?Isn’t the web all about avoid native code?

Remember the

...but wait a sec

Rolling your own thing involves “native code”

Why would we ever want to go there?Isn’t the web all about avoid native code?

Use-Cases!Remember the

Imagine you are a settop box company. Your boxes has a tv and a web interface, plus a nice web site

Sharing and reusing web code is a goalSo is, not reduced functionality

Use-Case

Keywords: HW accessNice, fast UX

With Qt WebKit you can expose QObject derived instances to the JavaScript runtime

Enabling device access, image manipulation on the native side

Introducing the Qt bridge

It’s simple, fast, works well

We also allow you to create QGraphicsItem or QWidget based plugins for the web view.

Want more?

We also allow you to create QGraphicsItem or QWidget based plugins for the web view.

Want more?

Together we call this wrote approach for

THE HYBRID APPROACH

NON-NATIVEAPPROACH, DOES IT EXIST?

Out of the box Web runtime?How to go about it

WebRuntime provides exactly this

- A runtime for running web apps

- An implementation of a recent version of the W3C Widgets 1.0 spec + extensions

On the Symbian platform

Web Widgets 1.0 in a nutshellWhat is it all about

A Zip file containing resources:

Samsung also supports the spec

html, js, images

A config.xml providing metadata

size, title, icon etc

Validation, security in place

So what is the point?What is it all about

Widgets 1.0 provides spec on it’s own for adding for instance an important view mode feature

The CSS view mode media feature provides the ability to use custom CSS depending on the current mode

@media handheld and (view-mode: mini) { body { background-color: black; } }@media tv and (view-mode: fullscreen) { ... }@media all and (view-mode: floating) { ... }

View Mode Media FeatureJust an example

Widgets 1.0 specifies 4 modes

mini: a docket representation for example in a panel, think Windows Vista, no interactivity, etc

floating: the widget representation, floating on the Desktop or phone Home Screen

Plus 2 application modes: application and fullscreen

View Mode Media FeatureJust an example

It will also be possible to change mode via JS (a DOM event) as well as receive notificatings of changes

note: using config.xml you can define which modes you support

Widgets 1.0 all in allA summary

Provides the launcher for making installable web apps.

+ additional security / validation+ different representation modes + switching+ slightly more complicated than the Apple approach if your whole app lives online:

You need to create a fake package and install it,Creating a desktop link is not enough

WEB RUNTIME

== WIDGETS 1.0 ?

Back to Web RuntimeRelation to Widgets 1.0

Web Runtime is based on, but not limited to W 1.0

- will provide more desktop integration (menu integration exists in current public API)

- provides JavaScript API’s for accessing device functionality

Back to Web RuntimeRelation to Widgets 1.0

Platform Services JavaScript API accessed through the nokia.device object:

This is where the security / trusted widgets becomes important

Contacts

Camera

MessagingLocation

Media management

Calendar

Platform supportCan I use it?

But this was all Symbian only?

No... At Maemo Summit ’09 it was announced that Nokia is dedicated to support Web Runtime on the Maemo platform, and that the next release will be Qt WebKit based. ;-)

What does this mean?Qt Webkit based Web Runtime

it means WebKit!

Just like the iPhone / Android - all apps should work more or less out of the box

Issues could be due to a.o port differences, user agent

Mobile features:

Frame Flattening, Touch JS API, onorientationchange and soon Geolocation and friends.

Mobile WebKitWhat to be aware of

Due to nice working, fast scrolling, zooming etc, Mobile WebKit implementations:

Do no support CSS themable scrollbars and normally use scroll indicators instead

Prevent any web app from having fixed elements, such as fixed header, footer and scrollable central area

Qt WebKit on mobile will behave similarly

WebKit featureThere are some positive point in using WebKit as wel

WebKit provides many CSS extensions- most pushed to standardization (if of no use: removed)- most of they are currently in draft state

It provides many new interesting features from the upcoming DOM, CSSOM and HTML specs

Many, foundation for making web apps

Unfortunately, we [Qt] do not yet support it all

WebKit featureThere are some positive point in using WebKit as wel

Examples:

WebDatabase, Local/Session, Web Application Cache,CSS Media Types and Features, (Shared) Web Workers

It is all about the UXThe user interface is also quite important today

For making interfaces the most interesting features are:CSS transitions, animation and transformations

Provides ways of transforming and animating elements using CSS or via JavaScript using the CSSOM

Specs originate from WebKit

Was designed considering hardware acceleration

Want real OpenGLThe user interface is also quite important today

Qt WebKit supports WebGL, an OpenGL ES JavaScript API for the Web

- Basic support is in place, done by Tieto

- Obviously require OpenGL (ES)

Back to that UI header issueFixed elements, a no-go

The CSS transformations + HW acceleration, or actually the fact they live outside the DOM, makes it possible to emulate the fixed header + provide fast kinetic lists implementations

So far the most successful implementation of this is the PastryKit API from Apple

PastryKit provides a mini web toolkit for the iPhone

It is used by the iPhone 3.0 user guide

Back to that UI header issueFixed elements, a no-go

Basically impossible to tell that it is not native

List scroll like iPhone lists and not like web pages

ROUNDING UP

Want do do web apps targeting Nokia Devices?

Web Runtime is the answer, but Symbian only for now

Rounding upNokia devices

Want to do web apps targeting other kind of devices such as custom hardware, settop boxes or the desktop?

The Hybrid Approach is a very powerful solution

Rounding upOther devices

reuse of application code and service is possible to a good extend

Both approaches uses Qt WebKit

Rounding upTwo good approaches

It has a great API. We believe it is far the best native and most powerful WebKit API, and so does many of our users

Qt WebKit provides a similar experience as other desktop and mobile ports or WebKit

Qt WebKitA good WebKit port all around

It is a bit behind Apple and Google port in terms of feature support and performance (crucial for mobile devices)

additionally distributed with Qt 4.7 will be a game changer

...but we are catching up quickly and our upcoming

Qt WebKitA good WebKit port all around

Qt WebKit 2.0 add-on for Qt 4.6

- Vastly improved performance- Additional feature compliance/support- Maemo5 support- Mobile experience closer to iPhone / Android- Base for future Web Runtime- Same great API as ever!

Thanks for listening

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

I hope the talk provided some insights into the current and future Nokia Web offerings

mailto:[email protected]




Technology

Bringing your Web investment to Nokia devices