hybrid apps (native + web) using webkit
Post on 27-Jun-2015
2.068 Views
Preview:
DESCRIPTION
TRANSCRIPT
Hybrid Apps (Native + Web) using WebKit
ARIYA HIDAYAT, SENCHA
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
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);
Exposing to the Web world
<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
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
CSS3 Animations
http://mozillademos.org/demos/planetarium/demo.html
Accelerated Composition
GPU FTW
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!
ariya.hidayat@gmail.com
ariyahidayat
ariya.blogspot.com
top related