hybrid apps (native + web) using webkit
DESCRIPTION
In term of innovations and mobile availability, WebKit is known to be the premier web rendering engine with the leading support for web standards such as HTML5, CSS3, and SVG. On MeeGo platform, WebKit can be leveraged easily via the use QtWebKit module which combines powerful WebKit features with the ease of use of Qt. The ground of developing applications using native technologies has been much explored, however there are still confusions, myths and misunderstanding as to what can be achieved with web technologies and hybrid native-web approach. This talk will highlight several tools and best practices in developing and testing good looking, feature-rich, and hardware-accelerated applications using web technologies targeting MeeGo platform in particular.TRANSCRIPT
![Page 1: Hybrid Apps (Native + Web) using WebKit](https://reader033.vdocuments.site/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/1.jpg)
Hybrid Apps (Native + Web) using WebKit
ARIYA HIDAYAT, SENCHA
![Page 2: Hybrid Apps (Native + Web) using WebKit](https://reader033.vdocuments.site/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/2.jpg)
whoami
![Page 3: Hybrid Apps (Native + Web) using WebKit](https://reader033.vdocuments.site/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/3.jpg)
Overview
![Page 4: Hybrid Apps (Native + Web) using WebKit](https://reader033.vdocuments.site/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/4.jpg)
Going Hybrid?
Security
Advanced TechnologiesApp Store/
Marketplace
Platform Integration
![Page 5: Hybrid Apps (Native + Web) using WebKit](https://reader033.vdocuments.site/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/5.jpg)
WebKit Everywhere
Browser
Devices
Runtime
![Page 6: Hybrid Apps (Native + Web) using WebKit](https://reader033.vdocuments.site/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/6.jpg)
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
![Page 7: Hybrid Apps (Native + Web) using WebKit](https://reader033.vdocuments.site/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/7.jpg)
Extensive Tests
the rest229 MB
tests904 MB
≈ 20,000 tests
![Page 8: Hybrid Apps (Native + Web) using WebKit](https://reader033.vdocuments.site/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/8.jpg)
Workflow
1 Every commit needs to be reviewed
2 Broken commit must be reverted
quality control
zero-regression policy
![Page 9: Hybrid Apps (Native + Web) using WebKit](https://reader033.vdocuments.site/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/9.jpg)
Level of Involvement
Contributor
Committer
≈ 150 Reviewer
≈ 90accept or reject patches
checks in reviewed patches
after 10-20 patches
after 80 patches
![Page 10: Hybrid Apps (Native + Web) using WebKit](https://reader033.vdocuments.site/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/10.jpg)
WebKit ReviewersApple
39
Google25
Nokia7
RIM7
Misc11
1
![Page 11: Hybrid Apps (Native + Web) using WebKit](https://reader033.vdocuments.site/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/11.jpg)
Components of WebKit
WebKit Library
JavaScriptCore
WebCore
HTMLrendering
SVG
DOM CSS
![Page 12: Hybrid Apps (Native + Web) using WebKit](https://reader033.vdocuments.site/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/12.jpg)
Platform Abstractions
Network Unicode Clipboard
Graphics Theme Events
Thread Geolocation Timer
![Page 13: Hybrid Apps (Native + Web) using WebKit](https://reader033.vdocuments.site/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/13.jpg)
Di!erent “Ports”WebCore graphics
Mac Chromium Qt Gtk
CoreGraphics
Skia
QPainter
Cairo
graphics stack
GraphicsContext
![Page 14: Hybrid Apps (Native + Web) using WebKit](https://reader033.vdocuments.site/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/14.jpg)
Use
![Page 15: Hybrid Apps (Native + Web) using WebKit](https://reader033.vdocuments.site/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/15.jpg)
Web BrowsersArora
Demo Browserhttp://arora.googlecode.com
demos/browser
![Page 16: Hybrid Apps (Native + Web) using WebKit](https://reader033.vdocuments.site/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/16.jpg)
QWebView, QWebPage, QWebFrameQWebView (widget)
QWebPage (object)
QWebFrame (object)
At least one, i.e. the main frame of the page
![Page 17: Hybrid Apps (Native + Web) using WebKit](https://reader033.vdocuments.site/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/17.jpg)
Using WebView
QWebView webView;webView.show();webView.setUrl(QUrl("http://meego.com"));
![Page 18: Hybrid Apps (Native + Web) using WebKit](https://reader033.vdocuments.site/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/18.jpg)
Contents via String
QWebView webView;webView.show();webView.setContent("<body>Hello, MeeGo!</body>");
![Page 19: Hybrid Apps (Native + Web) using WebKit](https://reader033.vdocuments.site/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/19.jpg)
Contents via Resource
QWebView webView;webView.show();webView.setUrl(QUrl("qrc:/content.html"));
<RCC> <qresource prefix="/"> <file>content.html</file> </qresource></RCC>
![Page 20: Hybrid Apps (Native + Web) using WebKit](https://reader033.vdocuments.site/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/20.jpg)
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/
![Page 21: Hybrid Apps (Native + Web) using WebKit](https://reader033.vdocuments.site/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/21.jpg)
SVG Rasterizer
http://labs.qt.nokia.com/2008/08/06/webkit-based-svg-rasterizer/
![Page 22: Hybrid Apps (Native + Web) using WebKit](https://reader033.vdocuments.site/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/22.jpg)
Search + Preview
http://labs.qt.nokia.com/2008/11/04/search-with-thumbnail-preview/
![Page 23: Hybrid Apps (Native + Web) using WebKit](https://reader033.vdocuments.site/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/23.jpg)
Bridging the Two Worlds
![Page 24: Hybrid Apps (Native + Web) using WebKit](https://reader033.vdocuments.site/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/24.jpg)
Exposing to the Web world
QWebFrame::addToJavaScriptWindowObject(QString, QObject*)
Public functionsObject properties
Child objects
![Page 25: Hybrid Apps (Native + Web) using WebKit](https://reader033.vdocuments.site/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/25.jpg)
Exposing to the Web world
class Dialog: public QObject{ Q_OBJECT
public: Dialog(QObject *parent = 0);
public slots: void showMessage(const QString& msg);};
page()->mainFrame()->addToJavaScriptWindowObject("Dialog", new Dialog);
![Page 26: Hybrid Apps (Native + Web) using WebKit](https://reader033.vdocuments.site/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/26.jpg)
Exposing to the Web world
<input type="button" value="Try this" onClick="Dialog.showMessage('You clicked me!')">
instance of Dialog object public slot
![Page 27: Hybrid Apps (Native + Web) using WebKit](https://reader033.vdocuments.site/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/27.jpg)
Signal and Slot
foobar.modified.connect(refresh);
QObject instance JavaScript function
signal
foobar.modified.connect(obj, refresh);
any object
![Page 28: Hybrid Apps (Native + Web) using WebKit](https://reader033.vdocuments.site/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/28.jpg)
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++);}
![Page 29: Hybrid Apps (Native + Web) using WebKit](https://reader033.vdocuments.site/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/29.jpg)
Triggering Action from Native
<script>Stopwatch.tick.connect(function(t) { document.getElementById('tick').innerText = t;});</script>
instance of Stopwatch object
signal
![Page 30: Hybrid Apps (Native + Web) using WebKit](https://reader033.vdocuments.site/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/30.jpg)
Coming back to the Native
QVariant QWebFrame::evaluateJavaScript(QString)
mostly key-value pair(like JavaScript objects)
![Page 31: Hybrid Apps (Native + Web) using WebKit](https://reader033.vdocuments.site/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/31.jpg)
Other Bridging Solutions
http://labs.qt.nokia.com/2010/11/16/some-webkit-hybrid-stu!/
Custom network protocolQNetworkAccessManager
![Page 32: Hybrid Apps (Native + Web) using WebKit](https://reader033.vdocuments.site/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/32.jpg)
Platform Integration
Application
Menu and Menu Bar
Dialogs
Notifications
System Access
![Page 33: Hybrid Apps (Native + Web) using WebKit](https://reader033.vdocuments.site/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/33.jpg)
Debugging
Web Inspector
settings()->setAttribute(QWebSettings::DeveloperExtrasEnabled, true);
![Page 34: Hybrid Apps (Native + Web) using WebKit](https://reader033.vdocuments.site/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/34.jpg)
Deployment
O!ine PackagingCache ManifestLocal Storage
QtWebKit boilerplate
Tools
PhoneGapAppUp Encapsulator
![Page 35: Hybrid Apps (Native + Web) using WebKit](https://reader033.vdocuments.site/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/35.jpg)
Real-world Hybrid Apps
Sencha AnimatorExt Designer
![Page 36: Hybrid Apps (Native + Web) using WebKit](https://reader033.vdocuments.site/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/36.jpg)
Technologies
![Page 37: Hybrid Apps (Native + Web) using WebKit](https://reader033.vdocuments.site/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/37.jpg)
Key Technologies
![Page 38: Hybrid Apps (Native + Web) using WebKit](https://reader033.vdocuments.site/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/38.jpg)
JavaScript
![Page 39: Hybrid Apps (Native + Web) using WebKit](https://reader033.vdocuments.site/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/39.jpg)
Libraries and Frameworks
![Page 40: Hybrid Apps (Native + Web) using WebKit](https://reader033.vdocuments.site/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/40.jpg)
Content Editing
http://labs.qt.nokia.com/2009/03/12/wysiwyg-html-editor/
![Page 41: Hybrid Apps (Native + Web) using WebKit](https://reader033.vdocuments.site/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/41.jpg)
Consume Web 2.0
http://labs.qt.nokia.com/2009/03/08/creating-a-google-chat-client-in-15-minutes/
![Page 42: Hybrid Apps (Native + Web) using WebKit](https://reader033.vdocuments.site/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/42.jpg)
Vector Graphics
http://raphaeljs.com/polar-clock.html
![Page 43: Hybrid Apps (Native + Web) using WebKit](https://reader033.vdocuments.site/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/43.jpg)
Canvas-based Game
http://ariya.blogspot.com/2010/09/invade-destroy.html
![Page 44: Hybrid Apps (Native + Web) using WebKit](https://reader033.vdocuments.site/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/44.jpg)
Diagrams & Visualization
http://thejit.org/JavaScript InfoVis Toolkit
![Page 45: Hybrid Apps (Native + Web) using WebKit](https://reader033.vdocuments.site/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/45.jpg)
CSS3 Animations
http://mozillademos.org/demos/planetarium/demo.html
![Page 46: Hybrid Apps (Native + Web) using WebKit](https://reader033.vdocuments.site/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/46.jpg)
Accelerated Composition
GPU FTW
![Page 47: Hybrid Apps (Native + Web) using WebKit](https://reader033.vdocuments.site/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/47.jpg)
Sencha Animator
![Page 48: Hybrid Apps (Native + Web) using WebKit](https://reader033.vdocuments.site/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/48.jpg)
Device Access
http://ariya.github.com/js/marblebox/
![Page 49: Hybrid Apps (Native + Web) using WebKit](https://reader033.vdocuments.site/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/49.jpg)
WebGL for 3-D
http://webglsamples.googlecode.com/hg/aquarium/aquarium.html
![Page 50: Hybrid Apps (Native + Web) using WebKit](https://reader033.vdocuments.site/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/50.jpg)
PhiloGL: WebGL Framework
http://senchalabs.github.com/philogl/
![Page 51: Hybrid Apps (Native + Web) using WebKit](https://reader033.vdocuments.site/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/51.jpg)
Tools
![Page 52: Hybrid Apps (Native + Web) using WebKit](https://reader033.vdocuments.site/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/52.jpg)
Web Inspector
![Page 53: Hybrid Apps (Native + Web) using WebKit](https://reader033.vdocuments.site/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/53.jpg)
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?...
![Page 54: Hybrid Apps (Native + Web) using WebKit](https://reader033.vdocuments.site/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/54.jpg)
forget to run
the tests
Typical Scenario
This is awesome!
![Page 55: Hybrid Apps (Native + Web) using WebKit](https://reader033.vdocuments.site/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/55.jpg)
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, ...
![Page 56: Hybrid Apps (Native + Web) using WebKit](https://reader033.vdocuments.site/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/56.jpg)
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
![Page 57: Hybrid Apps (Native + Web) using WebKit](https://reader033.vdocuments.site/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/57.jpg)
UI Designer
![Page 58: Hybrid Apps (Native + Web) using WebKit](https://reader033.vdocuments.site/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/58.jpg)
IDE: AKShell
![Page 59: Hybrid Apps (Native + Web) using WebKit](https://reader033.vdocuments.site/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/59.jpg)
IDE: Cloud9
![Page 60: Hybrid Apps (Native + Web) using WebKit](https://reader033.vdocuments.site/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/60.jpg)
Recorder and Replayer
![Page 61: Hybrid Apps (Native + Web) using WebKit](https://reader033.vdocuments.site/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/61.jpg)
Get + Compile
![Page 62: Hybrid Apps (Native + Web) using WebKit](https://reader033.vdocuments.site/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/62.jpg)
Using git
git clone git://git.webkit.org/WebKit.gitcd WebKit
≈ 1.2 GB .git
![Page 63: Hybrid Apps (Native + Web) using WebKit](https://reader033.vdocuments.site/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/63.jpg)
Build
Tools/Scripts/build-webkit --qt
--debug for “Debug” mode
![Page 64: Hybrid Apps (Native + Web) using WebKit](https://reader033.vdocuments.site/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/64.jpg)
Launch
Tools/Scripts/run-launcher --qt
![Page 65: Hybrid Apps (Native + Web) using WebKit](https://reader033.vdocuments.site/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/65.jpg)
Conclusion
![Page 66: Hybrid Apps (Native + Web) using WebKit](https://reader033.vdocuments.site/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/66.jpg)
Today
Web technologies are moving really fast
Various frameworks and libraries boost the productivity
Hybrid approach helps the migration
Tools need to catch-up
![Page 67: Hybrid Apps (Native + Web) using WebKit](https://reader033.vdocuments.site/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/67.jpg)
Future
More bindings to the native world
Platinum-grade productivity tools
Ubiquitous mesh and cloud solutions