3. A LOOK AT QT’S WEB AND HYBRID OFFERINGS
WHO AM I?
4. A LOOK AT QT’S WEB AND HYBRID OFFERINGS
WHO AM I? KENNETH R. CHRISTIANSEN
5. A LOOK AT QT’S WEB AND HYBRID OFFERINGS
WHO AM I? KENNETH R. CHRISTIANSEN WEBKIT REVIEWER
6. A LOOK AT QT’S WEB AND HYBRID OFFERINGS
WHO AM I? KENNETH R. CHRISTIANSEN WEBKIT REVIEWER
2+ YEAR WORKING WITH WEBKIT
7. A LOOK AT QT’S WEB AND HYBRID OFFERINGS
WHO AM I? KENNETH R. CHRISTIANSEN WEBKIT REVIEWER
2+ YEAR WORKING WITH WEBKIT 2+ YEARS WORKING WITH
APP DEVELOPMENT USING DECLARATIVE LANGUAGE
8. A LOOK AT QT’S WEB AND HYBRID OFFERINGS
WHO AM I? KENNETH R. CHRISTIANSEN WEBKIT REVIEWER
2+ YEAR WORKING WITH WEBKIT 2+ YEARS WORKING WITH
APP DEVELOPMENT USING DECLARATIVE LANGUAGE NOKIA
TECHNOLOGY INSTITUTE, INdT
10. Looking back at the last 10 years
The impach of Web as a technology
If somehing has had a huge impact on the
last decade it has been the Web
11. Looking back at the last 10 years
The impach of Web as a technology
If somehing has had a huge impact on the
last decade it has been the Web
It has changed out lifes, how we aquire
information, how we interact with other
people, how we share
12. Looking back at the last 10 years
The impach of Web as a technology
If somehing has had a huge impact on the
last decade it has been the Web
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
13. Looking back at the last 10 years
The impach of Web as a technology
It is changing how we write applications,
where information is stored, and how
we share data
14. AJAX, the playfield changer
The impach of Web as a technology
AJAX was the next big playfield changer
15. AJAX, the playfield changer
The impach of Web as a technology
AJAX was the next big playfield changer
It made web applications a reality, brought
new services such as GMail, Google Maps,
Facebook, etc
16. AJAX, the playfield changer
The impach of Web as a technology
AJAX was the next big playfield changer
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
18. webapps
JS libraries, the new HTML5 features have made this
easier but at the same time the user requirements for
application interfaces HAVE CHANGED
19. webapps
The fact is that the web has not designed for apps, but
patched for it.
That said, things are about to change...
23. webapps
Apps are different in contents
More connected
Aggregating information
Run unmodified almost everywhere
24. webapps
Apps are different in contents
More connected
Aggregating information
Run unmodified almost everywhere
Deployment and updating is costly
25. webapps
Apps are different in contents
More connected
Aggregating information
Run unmodified almost everywhere
Deployment and updating is costly
Net result: everyone are doing web
26. CHROME
OS webapps
NOKIA OVI
PALM SERVICES
WEBOS
GOOGLE MAPS,
APPLE PICASA, FLICKR,
IWORKS.COM GOOGLE DOCS
MICROSOFT
OFFICE LIVE
27. 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
28. 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...
30. Today we will look at what you choices are
when targeting Nokia devices
Right now and in the near future
Currently, not all that great,
but things are about to change
31. So you have decided to make a web app
Some common reasons
- Have existing web service
- Want to share user interface code
- Update user interface on demand
- Target many different platforms:
could be Android, iPhone, Nokia ...
32. USING THE DEFAULT BROWSER
Symbian comes w/ limited WebKit browser
- S60 Port, not Qt-based
Maemo comes with MicroB browser
- Mozilla engine, desktop like
33. 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
34. What are the competitors doing?
iPhone WebKit has extensions to hide the chrome
Still, no fixed elements. Solution?
Yes, we get back to that.
35. 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!
36. ...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
37. ...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
Use-Cases!
38. Use-Case
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 goal
So is, not reduced functionality
Keywords: HW access
Nice, fast UX
39. Introducing the Qt bridge
With Qt WebKit you can expose QObject derived
instances to the JavaScript runtime
Enabling device access, image manipulation on the
native side
It’s simple, fast, works well
40. Want more?
We also allow you to create QGraphicsItem or
QWidget based plugins for the web view.
41. Want more?
We also allow you to create QGraphicsItem or
QWidget based plugins for the web view.
Together we call this wrote approach for
THE HYBRID APPROACH
43. Out of the box Web runtime?
How to go about it
On the Symbian platform
WebRuntime provides exactly this
- A runtime for running web apps
- An implementation of a recent version
of the W3C Widgets 1.0 spec + extensions
44. Web Widgets 1.0 in a nutshell
What is it all about
A Zip file containing resources:
html, js, images
A config.xml providing metadata
size, title, icon etc
Validation, security in place
Samsung also supports the spec
45. 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) { ... }
46. View Mode Media Feature
Just 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
47. View Mode Media Feature
Just 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
48. Widgets 1.0 all in all
A 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
50. Back to Web Runtime
Relation 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
51. Back to Web Runtime
Relation to Widgets 1.0
Platform Services JavaScript API accessed through
the nokia.device object:
Contacts
Location
Messaging
Camera
Media
management
This is where the security / trusted Calendar
widgets becomes important
52. Platform support
Can 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.
; -)
53. 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.
54. Mobile WebKit
What 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
55. WebKit feature
There 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
56. WebKit feature
There are some positive point in using WebKit as wel
Examples:
WebDatabase, Local/Session, Web Application Cache,
CSS Media Types and Features, (Shared) Web Workers
57. It is all about the UX
The 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
58. Want real OpenGL
The 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)
59. Back to that UI header issue
Fixed 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
60. Back to that UI header issue
Fixed elements, a no-go
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
Basically impossible to tell that it is not native
List scroll like iPhone lists and not like web pages
62. Rounding up
Nokia devices
Want do do web apps targeting Nokia Devices?
Web Runtime is the answer, but
Symbian only for now
63. Rounding up
Other 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
64. Rounding up
Two good approaches
Both approaches uses Qt WebKit
reuse of application code and service is possible to a
good extend
65. Qt WebKit
A good WebKit port all around
Qt WebKit provides a similar
experience as other desktop and
mobile ports or WebKit
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
It is a bit behind Apple and Google port in terms of feature
support and performance (crucial for mobile devices)
66. Qt WebKit
A good WebKit port all around
...but we are catching up quickly and our upcoming
Qt WebKit 2.0 add-on for Qt 4.6
additionally distributed with Qt 4.7 will be a game changer
- 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!
67. Thanks for listening
I hope the talk provided some insights into the current and
future Nokia Web offerings
KENNETH ROHDE CHRISTIANSEN
ext-kenneth.christiansen@nokia.com
kenneth.christiansen@openbossa.org
