Presentation for http://www.see2009.org/, held in 26.10.2009. Shows how web developers can utilize their web development skills in native applications with Qt.

1. Next Generation Hybrid Applications
Utilizing your Web Development Skills with Qt based Solutions
Pekka Kosonen
Head Of Technology Development
Nokia

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

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

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

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

7. What are the good things to “steal”
from the web world?
HTML5 Portability
Ease Speed
JavaScript
Resource pool
WebKit Innovation

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

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

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

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

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

13. 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);

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

15. Download the core of the hybrid app
Stored locally -> easy to update

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

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

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

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

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

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

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

23. qt.nokia.com
Thank you very
many!
Questions?
pekka.kosonen@
nokia.com
24
http://www.slideshare.net/pkosonen