introduction to qtwebkit
TRANSCRIPT
![Page 1: Introduction to QtWebKit](https://reader033.vdocuments.mx/reader033/viewer/2022052619/555ad9a9d8b42a62528b4c37/html5/thumbnails/1.jpg)
Introduction toQtWebKit
ARIYA HIDAYATENGINEERING DIRECTOR, SENCHA
1
![Page 2: Introduction to QtWebKit](https://reader033.vdocuments.mx/reader033/viewer/2022052619/555ad9a9d8b42a62528b4c37/html5/thumbnails/2.jpg)
whoami
2
![Page 3: Introduction to QtWebKit](https://reader033.vdocuments.mx/reader033/viewer/2022052619/555ad9a9d8b42a62528b4c37/html5/thumbnails/3.jpg)
Overview
3
![Page 4: Introduction to QtWebKit](https://reader033.vdocuments.mx/reader033/viewer/2022052619/555ad9a9d8b42a62528b4c37/html5/thumbnails/4.jpg)
WebKit Everywhere
Browser
Devices
Runtime
4
![Page 5: Introduction to QtWebKit](https://reader033.vdocuments.mx/reader033/viewer/2022052619/555ad9a9d8b42a62528b4c37/html5/thumbnails/5.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
5
![Page 6: Introduction to QtWebKit](https://reader033.vdocuments.mx/reader033/viewer/2022052619/555ad9a9d8b42a62528b4c37/html5/thumbnails/6.jpg)
Extensive Tests
the rest229 MB
tests904 MB≈ 20,000 tests
6
![Page 7: Introduction to QtWebKit](https://reader033.vdocuments.mx/reader033/viewer/2022052619/555ad9a9d8b42a62528b4c37/html5/thumbnails/7.jpg)
Workflow
1Every commit needs to be reviewed
2 Broken commit must be reverted
quality control
zero-regression policy
7
![Page 8: Introduction to QtWebKit](https://reader033.vdocuments.mx/reader033/viewer/2022052619/555ad9a9d8b42a62528b4c37/html5/thumbnails/8.jpg)
Level of Involvement
Contributor
Committer
≈ 130 Reviewer
≈ 80accept or reject patches
checks in reviewed patches
after 10-20 patches
after 80 patches
8
![Page 9: Introduction to QtWebKit](https://reader033.vdocuments.mx/reader033/viewer/2022052619/555ad9a9d8b42a62528b4c37/html5/thumbnails/9.jpg)
WebKit ReviewersApple
39
Google19
Nokia6
RIM6
Misc12
1
9
![Page 10: Introduction to QtWebKit](https://reader033.vdocuments.mx/reader033/viewer/2022052619/555ad9a9d8b42a62528b4c37/html5/thumbnails/10.jpg)
Components of WebKit
WebKit Library
JavaScriptCore
WebCore
HTML rendering
SVG
DOM CSS
10
![Page 11: Introduction to QtWebKit](https://reader033.vdocuments.mx/reader033/viewer/2022052619/555ad9a9d8b42a62528b4c37/html5/thumbnails/11.jpg)
Platform Abstractions
Network Unicode Clipboard
Graphics Theme Events
Thread Geolocation Timer
11
![Page 12: Introduction to QtWebKit](https://reader033.vdocuments.mx/reader033/viewer/2022052619/555ad9a9d8b42a62528b4c37/html5/thumbnails/12.jpg)
Di!erent “Ports”WebCore graphics
Mac Chromium Qt Gtk
CoreGraphics
Skia
QPainter
Cairo
graphics stack
GraphicsContext
12
![Page 13: Introduction to QtWebKit](https://reader033.vdocuments.mx/reader033/viewer/2022052619/555ad9a9d8b42a62528b4c37/html5/thumbnails/13.jpg)
Get + Compile
13
![Page 14: Introduction to QtWebKit](https://reader033.vdocuments.mx/reader033/viewer/2022052619/555ad9a9d8b42a62528b4c37/html5/thumbnails/14.jpg)
Using git
git clone git://git.webkit.org/WebKit.gitcd WebKit
≈ 1.2 GB .git
14
![Page 15: Introduction to QtWebKit](https://reader033.vdocuments.mx/reader033/viewer/2022052619/555ad9a9d8b42a62528b4c37/html5/thumbnails/15.jpg)
Build
Tools/Scripts/build-webkit --qt
--debug for “Debug” mode
15
![Page 16: Introduction to QtWebKit](https://reader033.vdocuments.mx/reader033/viewer/2022052619/555ad9a9d8b42a62528b4c37/html5/thumbnails/16.jpg)
Launch
Tools/Scripts/run-launcher --qt
16
![Page 17: Introduction to QtWebKit](https://reader033.vdocuments.mx/reader033/viewer/2022052619/555ad9a9d8b42a62528b4c37/html5/thumbnails/17.jpg)
Use
17
![Page 18: Introduction to QtWebKit](https://reader033.vdocuments.mx/reader033/viewer/2022052619/555ad9a9d8b42a62528b4c37/html5/thumbnails/18.jpg)
Using WebView
QWebView webView;webView.show();webView.setUrl(QUrl("http://campkde.org"));
18
![Page 19: Introduction to QtWebKit](https://reader033.vdocuments.mx/reader033/viewer/2022052619/555ad9a9d8b42a62528b4c37/html5/thumbnails/19.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/
19
![Page 20: Introduction to QtWebKit](https://reader033.vdocuments.mx/reader033/viewer/2022052619/555ad9a9d8b42a62528b4c37/html5/thumbnails/20.jpg)
SVG Rasterizer
http://labs.qt.nokia.com/2008/08/06/webkit-based-svg-rasterizer/20
![Page 21: Introduction to QtWebKit](https://reader033.vdocuments.mx/reader033/viewer/2022052619/555ad9a9d8b42a62528b4c37/html5/thumbnails/21.jpg)
Search + Preview
http://labs.qt.nokia.com/2008/11/04/search-with-thumbnail-preview/21
![Page 22: Introduction to QtWebKit](https://reader033.vdocuments.mx/reader033/viewer/2022052619/555ad9a9d8b42a62528b4c37/html5/thumbnails/22.jpg)
Hybrid: Native + Web
22
![Page 23: Introduction to QtWebKit](https://reader033.vdocuments.mx/reader033/viewer/2022052619/555ad9a9d8b42a62528b4c37/html5/thumbnails/23.jpg)
Exposing to the Web world
QWebFrame::addToJavaScriptWindowObject(QString, QObject*)
Public functionsObject properties
Child objects
23
![Page 24: Introduction to QtWebKit](https://reader033.vdocuments.mx/reader033/viewer/2022052619/555ad9a9d8b42a62528b4c37/html5/thumbnails/24.jpg)
Signal and Slot
foobar.modified.connect(refresh);
QObject instance JavaScript function
signal
foobar.modified.connect(obj, refresh);
any object
24
![Page 25: Introduction to QtWebKit](https://reader033.vdocuments.mx/reader033/viewer/2022052619/555ad9a9d8b42a62528b4c37/html5/thumbnails/25.jpg)
Coming back to the Native
QVariant QWebFrame::evaluateJavaScript(QString)
mostly key-value pair(like JavaScript objects)
25
![Page 26: Introduction to QtWebKit](https://reader033.vdocuments.mx/reader033/viewer/2022052619/555ad9a9d8b42a62528b4c37/html5/thumbnails/26.jpg)
Other Bridging Solutions
http://labs.qt.nokia.com/2010/11/16/some-webkit-hybrid-stu"/
Custom network protocolQNetworkAccessManager
26
![Page 27: Introduction to QtWebKit](https://reader033.vdocuments.mx/reader033/viewer/2022052619/555ad9a9d8b42a62528b4c37/html5/thumbnails/27.jpg)
Deployment
O!ine PackagingCache ManifestLocal Storage
QtWebKit boilerplate
27
![Page 28: Introduction to QtWebKit](https://reader033.vdocuments.mx/reader033/viewer/2022052619/555ad9a9d8b42a62528b4c37/html5/thumbnails/28.jpg)
Technologies
28
![Page 29: Introduction to QtWebKit](https://reader033.vdocuments.mx/reader033/viewer/2022052619/555ad9a9d8b42a62528b4c37/html5/thumbnails/29.jpg)
Key Technologies
29
![Page 30: Introduction to QtWebKit](https://reader033.vdocuments.mx/reader033/viewer/2022052619/555ad9a9d8b42a62528b4c37/html5/thumbnails/30.jpg)
JavaScript
30
![Page 31: Introduction to QtWebKit](https://reader033.vdocuments.mx/reader033/viewer/2022052619/555ad9a9d8b42a62528b4c37/html5/thumbnails/31.jpg)
Libraries and Frameworks
31
![Page 32: Introduction to QtWebKit](https://reader033.vdocuments.mx/reader033/viewer/2022052619/555ad9a9d8b42a62528b4c37/html5/thumbnails/32.jpg)
Vector Graphics
http://raphaeljs.com/polar-clock.html
32
![Page 33: Introduction to QtWebKit](https://reader033.vdocuments.mx/reader033/viewer/2022052619/555ad9a9d8b42a62528b4c37/html5/thumbnails/33.jpg)
Canvas-based Game
http://ariya.blogspot.com/2010/09/invade-destroy.html33
![Page 34: Introduction to QtWebKit](https://reader033.vdocuments.mx/reader033/viewer/2022052619/555ad9a9d8b42a62528b4c37/html5/thumbnails/34.jpg)
Diagrams & Visualization
http://thejit.org/JavaScript InfoVis Toolkit
34
![Page 35: Introduction to QtWebKit](https://reader033.vdocuments.mx/reader033/viewer/2022052619/555ad9a9d8b42a62528b4c37/html5/thumbnails/35.jpg)
CSS3 Animations
http://mozillademos.org/demos/planetarium/demo.html35
![Page 36: Introduction to QtWebKit](https://reader033.vdocuments.mx/reader033/viewer/2022052619/555ad9a9d8b42a62528b4c37/html5/thumbnails/36.jpg)
Accelerated Composition
GPU FTW
36
![Page 37: Introduction to QtWebKit](https://reader033.vdocuments.mx/reader033/viewer/2022052619/555ad9a9d8b42a62528b4c37/html5/thumbnails/37.jpg)
Sencha Animator
37
![Page 38: Introduction to QtWebKit](https://reader033.vdocuments.mx/reader033/viewer/2022052619/555ad9a9d8b42a62528b4c37/html5/thumbnails/38.jpg)
Device Access
http://ariya.github.com/js/marblebox/
38
![Page 39: Introduction to QtWebKit](https://reader033.vdocuments.mx/reader033/viewer/2022052619/555ad9a9d8b42a62528b4c37/html5/thumbnails/39.jpg)
WebGL for 3-D
http://webglsamples.googlecode.com/hg/aquarium/aquarium.html
39
![Page 40: Introduction to QtWebKit](https://reader033.vdocuments.mx/reader033/viewer/2022052619/555ad9a9d8b42a62528b4c37/html5/thumbnails/40.jpg)
PhiloGL: WebGL Framework
http://senchalabs.github.com/philogl/
40
![Page 41: Introduction to QtWebKit](https://reader033.vdocuments.mx/reader033/viewer/2022052619/555ad9a9d8b42a62528b4c37/html5/thumbnails/41.jpg)
Tools
41
![Page 42: Introduction to QtWebKit](https://reader033.vdocuments.mx/reader033/viewer/2022052619/555ad9a9d8b42a62528b4c37/html5/thumbnails/42.jpg)
Web Inspector
42
![Page 43: Introduction to QtWebKit](https://reader033.vdocuments.mx/reader033/viewer/2022052619/555ad9a9d8b42a62528b4c37/html5/thumbnails/43.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?...
43
![Page 44: Introduction to QtWebKit](https://reader033.vdocuments.mx/reader033/viewer/2022052619/555ad9a9d8b42a62528b4c37/html5/thumbnails/44.jpg)
forget to run
the tests
REGRESSION
Typical Scenario
This is awesome!
44
![Page 45: Introduction to QtWebKit](https://reader033.vdocuments.mx/reader033/viewer/2022052619/555ad9a9d8b42a62528b4c37/html5/thumbnails/45.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, ...
45
![Page 46: Introduction to QtWebKit](https://reader033.vdocuments.mx/reader033/viewer/2022052619/555ad9a9d8b42a62528b4c37/html5/thumbnails/46.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
46
![Page 47: Introduction to QtWebKit](https://reader033.vdocuments.mx/reader033/viewer/2022052619/555ad9a9d8b42a62528b4c37/html5/thumbnails/47.jpg)
UI Designer
47
![Page 48: Introduction to QtWebKit](https://reader033.vdocuments.mx/reader033/viewer/2022052619/555ad9a9d8b42a62528b4c37/html5/thumbnails/48.jpg)
IDE: AKShell
48
![Page 49: Introduction to QtWebKit](https://reader033.vdocuments.mx/reader033/viewer/2022052619/555ad9a9d8b42a62528b4c37/html5/thumbnails/49.jpg)
IDE: Cloud9
49
![Page 50: Introduction to QtWebKit](https://reader033.vdocuments.mx/reader033/viewer/2022052619/555ad9a9d8b42a62528b4c37/html5/thumbnails/50.jpg)
Recorder and Replayer
50
![Page 51: Introduction to QtWebKit](https://reader033.vdocuments.mx/reader033/viewer/2022052619/555ad9a9d8b42a62528b4c37/html5/thumbnails/51.jpg)
Conclusion
51
![Page 52: Introduction to QtWebKit](https://reader033.vdocuments.mx/reader033/viewer/2022052619/555ad9a9d8b42a62528b4c37/html5/thumbnails/52.jpg)
TodayWeb technologies are moving really fast
Various frameworks and libraries boost the productivity
Hybrid approach helps the migration
Tools need to catch-up
52
![Page 53: Introduction to QtWebKit](https://reader033.vdocuments.mx/reader033/viewer/2022052619/555ad9a9d8b42a62528b4c37/html5/thumbnails/53.jpg)
FutureMore bindings to the native world
Platinum-grade productivity tools
Ubiquitous mesh and cloud solutions
53
![Page 54: Introduction to QtWebKit](https://reader033.vdocuments.mx/reader033/viewer/2022052619/555ad9a9d8b42a62528b4c37/html5/thumbnails/54.jpg)
THANK YOU!
ariya @ kde.org
ariyahidayat
ariya.blogspot.com
54