Next Generation Hybrid Applications

Utilizing your Web Development Skills with Qt based Solutions

Pekka Kosonen
Head Of Technology Development
Nokia
In the year 2010
- Hybrid application?

A mashup? A Widget? Thin/Thick client? A full blown

application?

Always connected?

Utilizes web services?

Differ in mobile vs. desktop context?

Combines several technologies - web and native?

Ask google

Mashup_(web_application_hybrid)
A web page or application that combines data or functionality
from two or more external sources to create a new service.
Mashups and portals are both content aggregation technologies.

Web pages -> Web sites -> Dynamic web sites -> Server-
driven/Database driven Web Sites -> Web Applications
Hybrid is the next logical step
More program than web site
Greater interaction with the end user's computer/OS
The ability to operate without an internet connection present
“best of both worlds"
Today
Adobe AIR
Adobe AIR is a standalone runtime library

Web Runtimes
Many vendors provide web runtimes
Usually a sandbox environment where you can plugin web widgets
Some amount of platform services offered

Microsoft Silverlight
Web browser plug-in that follows along the lines of Flash
Designed to be an application platform from day one

Developing Hybrid Applications for the iPhone

Using HTML, CSS, and JavaScript
to Build Dynamic Apps for the iPhone
Industry buzz?

a hybrid app is everything that a web application is, but

carries the concept of "more program than web site"

…and a gazillion other widget runtimes

What are the good things to “steal”
from the web world?

HTML5 Portability

Ease Speed
JavaScript
Resource pool

WebKit Innovation
…but the real world is still
fragmented and not complete

Device API access

How easily can you extend it?

Security Speed
UX
Install base
Discoverability
Continued googling...
Found out that there’s a presentation coming about hybrid applications.

Need to go there!

Then I noticed it’s mine…

http://www.see2009.org/page.cfm/action=Seminars/SeminarID=145

Next Generation Hybrid Applications

– Utilizing your Web Development Skills
with Qt based Solutions
Hybrid app seems to be something like

A mashup? A Widget? Thin/Thick client? A full blown application?

Seems like more than a mashup or a widget.

Always connected?
Doesn’t need to be connected.

Utilizes web services?

Most likely. At least needs to have the means to

Combines several technologies - web and native?

Seems so...

Differ in mobile vs. desktop context?

Different features that are important (like location on mobile)
 Approachability of
Programming

Hybrid Development
Environment

Un
at Are
Easy

ta a
in Qt context

in
WRT

ab
le
Easily approachable web technologies Difficult
Qt C++

with powerful and scalable Qt C++

Size of
Project
Small Large

A rich selection of features for hybrid development Hybrid Applications

QtWebKit module:
embed web content from servers, Qt C++
local files or application’s resources Application
into Qt applications
QtScript module: HTML, CSS,
JavaScript
make Qt applications scriptable
QtXMLPatterns module:
shape and mash up XML date yielding HTML output Browser/ Standalone
QNetworkAccessManager: Web runtime
Application *)
interact with server side URL APIs
Widgets accessing
platform services
with JS

QWebView *view = new QWebView(parent);

view->load(QUrl("http://qt.nokia.com/"));
view->show();

Public
Interact with Web Services
QtWebKit allows
Intuitive use of network resources,
Easy to embed web content into an application
Exposing QWidget to HTML
and QObject to JavaScript
Calling JavaScript from Qt and vice versa
Content may be enhanced with native controls

JS

Qt

OS specific
APIs
 function setStatus() {
twit.updateStatus( statusupdate.text );
Javascript }
statusupdate.returnPressed.connect(this,setStatu
s);

QWebFrame *frame = view->currentFrame();

//You can inject JavaScript to be executed
frame->evaluateJavaScript(“myAmaging JS Stuff”);
//You can expose any QObject to the web view
MyQTwitter *twit = new MyQTwitter()
frame->addToJavaScriptWindowObject(“twit”,twit);

//do what ever you want with native APIs

//that you can call directly from Qt
CRRSensorApi::FindSensorsL(sensorList);
Swing both ways? Go hybrid!
combining the best of both worlds
Run JS and HTML inside Qt application…
WRT Widget Qt application
Webkit QWebView running webkit
Widgets HTML,
CSS, Same HTML, CSS,
JavaScript JavaScript

Platform
Services

Native APIs
Platform
Services
implementation Accessing Native APIs through JS
Download the core of the hybrid app

Stored locally -> easy to update

Webview Demo
Core app ready – install new JS in

In the demo there’s BBC News, games like

Rock-Paper-Scissors, Tic-Tac-Toe, Calculator and Bubble
Anything from web can be pulled to the hybrid container

Statistics:
300 lines of Qt code
Size of .sis file: 20 kB
Development time: approx. 5 hours

Browser/ Standalone Qt C++ Hybrid

Web runtime application *) Application

HTML, CSS,
JavaScript

Cool guys swing both ways

Go hybrid with Qt and Web!
Are we making a Web Runtime?

1) Web developer injects JS+HTML+CSS to the framework.

If it spits out an executable we’re not making a web runtime (I think).

2) The framework is installed to device -> developer writes

plugins (with JS/HTML/CSS) we are closer to making own WRT (I think)

What’s important in the FW

Industry compliancy – especially in the APIs that are offered to JS
developers

Extendability – The features what are offered out of the box are
NEVER enough. You want to extend and we’ll let you.

UI libraries – easy to use nice looking stuff (TODO show flickr demo
and refer to declarative UI)

Security
 Architecture - Yes we have some!
Framework
From us
QWebView running
Webkit
From real
developers
Qt script The hybrid app’s core
generator – JS, html,..
pushing stuff to From Qt
the web view

Accessing Native APIs through JS Native –

already there
Service FW from Qt Mobility APIs
3rd party Qt Mobility
plugins APIs

OS and native APIs

http://labs.trolltech.com/page/Projects/QtScript/Generator
As a hybrid app developer you…
...can use your web skills (HTML, CSS, …) to do the UI
Or, since QWebView has NPAPI -> Flash
Or, you can go nuts and even push native Qt components to webview

...write JS to access platform features

If there’s a not a ready service provider implemented feel free to do it
(and publish it for others please!)?

...get a Qt application – which is a native application!

No runtime performance hits
Sources are protected

And it works where ever Qt is supported!

Distribute it to Ovi store and target 130 million smartphones with Qt 4.6!
Remember to open the bank vault before the money trucks arrive!
The things to take home with you

Qt is available everywhere
On desktops OSs as well as smartphones
With Qt and Mobility APIs you can make full blown mobile applications

With Qt webkit web developers can create native applications

No feature restrictions

We’re making this easier with a framework that

Takes in pure web content : JS, HTML, CSS, …
Spits out a native Qt application
Provides the usual platform services out of the box
Can be extended with your own service providers (Qt Service FW
plugins)

Later on
Provide a JS UI library
Deeper tool integration (Qt Creator)
 If you want to know what Qt is
about ;)
Come check tomorrow
9:30 - 12:00 Qt fireworks - demonstrating the potential of Qt.
13-14 Introducing Qt to Symbian Developers

http://www.slideshare.net/pkosonen
 We’ll be making it really easy for you
 All you need is Qt Creator – no SDKs ;)

 Integrated with Remote Device Access (RDA) - you don’t

even need a device ;)
 http://www.forum.nokia.com/rda
 No promises here about dates or months yet…

Combine hybrid framework with this one

– isn’t it creepy how easy we can make it for you?
http://www.youtube.com/watch?v=TmFn90Zx2oo
 qt.nokia.com

Thank you very

many!
Questions?
pekka.kosonen@
nokia.com

24

http://www.slideshare.net/pkosonen