Hybrid Apps (Native + Web) via QtWebKit

Hybrid Apps (Native + Web)via QtWebKit

ARIYA HIDAYATENGINEERING DIRECTOR

SF BAY MEEGO NETWORKJUNE 22, 2011

whoami

Overview

Going Hybrid?

Security

Advanced TechnologiesApp Store/

Marketplace

Platform Integration

WebKit Everywhere

Browser

Devices

Runtime

0

10000

20000

30000

40000

50000

60000

70000

80000

90000

0 1 2 3 4 5 6 7 8 9 10

Rev

isio

ns

Years

History~2000 commits/month

Extensive Tests

the rest229 MB

tests904 MB

≈ 20,000 tests

Workflow

1 Every commit needs to be reviewed

2 Broken commit must be reverted

quality control

zero-regression policy

Level of Involvement

Contributor

Committer

≈ 150 Reviewer

≈ 90accept or reject patches

checks in reviewed patches

after 10-20 patches

after 80 patches

WebKit ReviewersApple

39

Google25

Nokia7

RIM7

Misc11

1

Components of WebKit

WebKit Library

JavaScriptCore

WebCore

HTMLrendering

SVG

DOM CSS

Platform Abstractions

Network Unicode Clipboard

Graphics Theme Events

Thread Geolocation Timer

Di!erent “Ports”WebCore graphics

Mac Chromium Qt Gtk

CoreGraphics

Skia

QPainter

Cairo

graphics stack

GraphicsContext

Use

Web BrowsersArora

Demo Browserhttp://arora.googlecode.com

demos/browser

QWebView, QWebPage, QWebFrameQWebView (widget)

QWebPage (object)

QWebFrame (object)

At least one, i.e. the main frame of the page

Using WebView

QWebView webView;webView.show();webView.setUrl(QUrl("http://meego.com"));

Contents via String

QWebView webView;webView.show();webView.setContent("<body>Hello, MeeGo!</body>");

Contents via Resource

QWebView webView;webView.show();webView.setUrl(QUrl("qrc:/content.html"));

<RCC> <qresource prefix="/"> <file>content.html</file> </qresource></RCC>

Capture to Image

QWebPage page;QImage image(size, QImage::Format_ARGB32_Premultiplied);image.fill(Qt::transparent);QPainter p(&image);page.mainFrame()->render(&p);p.end();image.save(fileName);

http://labs.qt.nokia.com/2009/01/15/capturing-web-pages/



SVG Rasterizer

http://labs.qt.nokia.com/2008/08/06/webkit-based-svg-rasterizer/



Search + Preview

http://labs.qt.nokia.com/2008/11/04/search-with-thumbnail-preview/



Bridging the Two Worlds

Exposing to the Web world

QWebFrame::addToJavaScriptWindowObject(QString, QObject*)

Public functionsObject properties

Child objects


class Dialog: public QObject{ Q_OBJECT

public: Dialog(QObject *parent = 0);

public slots: void showMessage(const QString& msg);};

page()->mainFrame()->addToJavaScriptWindowObject("Dialog", new Dialog);


<input type="button" value="Try this" onClick="Dialog.showMessage('You clicked me!')">

instance of Dialog object public slot

Signal and Slot

foobar.modified.connect(refresh);

QObject instance JavaScript function

signal

foobar.modified.connect(obj, refresh);

any object

Triggering Action from Native

class Stopwatch: public QObject{ Q_OBJECT

public: Stopwatch(QObject *parent = 0);

signals: void tick(int t);

private slots: void update();

private: int m_index;};

Stopwatch::Stopwatch(QObject *parent) : QObject(parent) , m_index(0){ QTimer *timer = new QTimer(this); timer->setInterval(1000); connect(timer, SIGNAL(timeout()), SLOT(update())); timer->start();}

void Stopwatch::update(){ emit tick(m_index++);}

Triggering Action from Native

<script>Stopwatch.tick.connect(function(t) { document.getElementById('tick').innerText = t;});</script>

instance of Stopwatch object

signal

Coming back to the Native

QVariant QWebFrame::evaluateJavaScript(QString)

mostly key-value pair(like JavaScript objects)

Other Bridging Solutions

http://labs.qt.nokia.com/2010/11/16/some-webkit-hybrid-stu!/

Custom network protocolQNetworkAccessManager

http://labs.qt.nokia.com/2010/11/16/some-webkit-hybrid-stuff/






Platform Integration

Application

Menu and Menu Bar

Dialogs

Notifications

System Access

Debugging

Web Inspector

settings()->setAttribute(QWebSettings::DeveloperExtrasEnabled, true);

Deployment

O!ine PackagingCache ManifestLocal Storage

QtWebKit boilerplate

Tools

PhoneGapAppUp Encapsulator

Real-world Hybrid Apps

Sencha AnimatorExt Designer

Technologies

Key Technologies

JavaScript

Libraries and Frameworks

Content Editing

http://labs.qt.nokia.com/2009/03/12/wysiwyg-html-editor/



Consume Web 2.0

http://labs.qt.nokia.com/2009/03/08/creating-a-google-chat-client-in-15-minutes/



Vector Graphics

http://raphaeljs.com/polar-clock.html



Canvas-based Game

http://ariya.blogspot.com/2010/09/invade-destroy.html



Diagrams & Visualization

http://thejit.org/JavaScript InfoVis Toolkit

http://thejit.org/

http://thejit.org/

CSS3 Animations

http://mozillademos.org/demos/planetarium/demo.html



Accelerated Composition

GPU FTW

http://www.webkit.org/blog-files/leaves/

Element GL texture

MovementTransformation matrix



Sencha Animator

Device Access

http://ariya.github.com/js/marblebox/



WebGL for 3-D

http://webglsamples.googlecode.com/hg/aquarium/aquarium.html



PhiloGL: WebGL Framework

http://senchalabs.github.com/philogl/



Tools

Web Inspector

Network Log

28: GET http://www.google.com/m/gp292: Response 200 application/xhtml+xml; charset=UTF-8 0 bytes http://www.google.com/m/gp311: GET data:image/gif;base64,R0lGODlhiA...312: GET data:image/gif;base64,R0lGODlhJA...312: GET data:image/gif;base64,R0lGODlhGA...312: Response 0 image/gif 3611 bytes data:image/gif;base64,R0lGODlhiA...312: Finish fail data:image/gif;base64,R0lGODlhiA...312: Response 0 image/gif 284 bytes data:image/gif;base64,R0lGODlhJA...312: Finish fail data:image/gif;base64,R0lGODlhJA...312: Response 0 image/gif 178 bytes data:image/gif;base64,R0lGODlhGA...312: Finish fail data:image/gif;base64,R0lGODlhGA...317: Response 200 application/xhtml+xml; charset=UTF-8 0 bytes http://www.google.com/m/gp324: Finish fail http://www.google.com/m/gp328: GET http://www.google.com/m/gn/user?...329: Finish success http://www.google.com/m/gn/user?...

forget to run

the tests

Typical Scenario

This is awesome!

Test Framework

specrunner SpecRunner.html5 specs, 0 failures in 0.013s

specrunner SpecRunner.htmlFAIL: 5 specs, 1 failure in 0.014s

Selenium, Watir, Squish Web, JSUnit, Jasmine, QUnit, ...

Headless WebKit

if (phantom.state.length === 0) { phantom.state = 'pizza'; phantom.open('http://www.google.com/m/local?site=local&q=pizza+in+new+york');} else { var list = document.querySelectorAll('div.bf'); for (var i in list) { console.log(list[i].innerText); } phantom.exit();}

http://phantomjs.org

UI Designer

IDE: AKShell

IDE: Cloud9

Recorder and Replayer

Get + Compile

Using git

git clone git://git.webkit.org/WebKit.gitcd WebKit

≈ 1.2 GB .git

Build

Tools/Scripts/build-webkit --qt

--debug for “Debug” mode

Launch

Tools/Scripts/run-launcher --qt

Conclusion

Today

Web technologies are moving really fast

Various frameworks and libraries boost the productivity

Hybrid approach helps the migration

Tools need to catch-up

Future

More bindings to the native world

Platinum-grade productivity tools

Ubiquitous mesh and cloud solutions

THANK YOU!

[email protected]

ariyahidayat

ariya.blogspot.com

Technology

Hybrid Apps (Native + Web) via QtWebKit