Hybrid Apps (Native + Web) using WebKit
-
Upload
ariya-hidayat -
Category
Technology
-
view
2.841 -
download
6
description
Transcript of Hybrid Apps (Native + Web) using WebKit
![Page 1: Hybrid Apps (Native + Web) using WebKit](https://reader033.fdocuments.net/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.fdocuments.net/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/2.jpg)
whoami
![Page 3: Hybrid Apps (Native + Web) using WebKit](https://reader033.fdocuments.net/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/3.jpg)
Overview
![Page 4: Hybrid Apps (Native + Web) using WebKit](https://reader033.fdocuments.net/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.fdocuments.net/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/5.jpg)
WebKit Everywhere
Browser
Devices
Runtime
![Page 6: Hybrid Apps (Native + Web) using WebKit](https://reader033.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/14.jpg)
Use
![Page 15: Hybrid Apps (Native + Web) using WebKit](https://reader033.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/23.jpg)
Bridging the Two Worlds
![Page 24: Hybrid Apps (Native + Web) using WebKit](https://reader033.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/36.jpg)
Technologies
![Page 37: Hybrid Apps (Native + Web) using WebKit](https://reader033.fdocuments.net/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/37.jpg)
Key Technologies
![Page 38: Hybrid Apps (Native + Web) using WebKit](https://reader033.fdocuments.net/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/38.jpg)
JavaScript
![Page 39: Hybrid Apps (Native + Web) using WebKit](https://reader033.fdocuments.net/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/39.jpg)
Libraries and Frameworks
![Page 40: Hybrid Apps (Native + Web) using WebKit](https://reader033.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/46.jpg)
Accelerated Composition
GPU FTW
![Page 47: Hybrid Apps (Native + Web) using WebKit](https://reader033.fdocuments.net/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/47.jpg)
Sencha Animator
![Page 48: Hybrid Apps (Native + Web) using WebKit](https://reader033.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/51.jpg)
Tools
![Page 52: Hybrid Apps (Native + Web) using WebKit](https://reader033.fdocuments.net/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/52.jpg)
Web Inspector
![Page 53: Hybrid Apps (Native + Web) using WebKit](https://reader033.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/57.jpg)
UI Designer
![Page 58: Hybrid Apps (Native + Web) using WebKit](https://reader033.fdocuments.net/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/58.jpg)
IDE: AKShell
![Page 59: Hybrid Apps (Native + Web) using WebKit](https://reader033.fdocuments.net/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/59.jpg)
IDE: Cloud9
![Page 60: Hybrid Apps (Native + Web) using WebKit](https://reader033.fdocuments.net/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/60.jpg)
Recorder and Replayer
![Page 61: Hybrid Apps (Native + Web) using WebKit](https://reader033.fdocuments.net/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/61.jpg)
Get + Compile
![Page 62: Hybrid Apps (Native + Web) using WebKit](https://reader033.fdocuments.net/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.fdocuments.net/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.fdocuments.net/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/64.jpg)
Launch
Tools/Scripts/run-launcher --qt
![Page 65: Hybrid Apps (Native + Web) using WebKit](https://reader033.fdocuments.net/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/65.jpg)
Conclusion
![Page 66: Hybrid Apps (Native + Web) using WebKit](https://reader033.fdocuments.net/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.fdocuments.net/reader033/viewer/2022052410/555ad9a2d8b42a62528b4c35/html5/thumbnails/67.jpg)
Future
More bindings to the native world
Platinum-grade productivity tools
Ubiquitous mesh and cloud solutions