1. Introduction to
QtWebKit
ARIYA HIDAYAT
ENGINEERING DIRECTOR, SENCHA
1

2. whoami
2

3. Overview
3

4. WebKit Everywhere
Browser
Devices
Runtime
4

5. History ~2000 commits/month
90000
80000
70000
60000
Revisions
50000
40000
30000
20000
10000
0
0 1 2 3 4 5 6 7 8 9 10
Years
5

6. Extensive Tests
tests
≈ 20,000 tests 904 MB the rest
229 MB
6

7. Workflow
quality control
1 Every commit needs to be reviewed
2 Broken commit must be reverted
zero-regression policy
7

8. Level of Involvement
Contributor
after 10-20 patches
after 80 patches
Committer
≈ 130 Reviewer
checks in reviewed patches
≈ 80
accept or reject patches
8

9. WebKit Reviewers
Apple
39
Google
19
Misc
12
1 RIM Nokia
6 6
9

10. Components of WebKit
DOM CSS
WebCore SVG
HTML rendering
JavaScriptCore
WebKit Library
10

11. Platform Abstractions
Network Unicode Clipboard
Graphics Theme Events
Thread Geolocation Timer
11

12. WebCore
Di erent “Ports” graphics
GraphicsContext Mac Chromium Qt Gtk
Skia Cairo
CoreGraphics
QPainter
graphics stack
12

13. Get + Compile
13

14. Using git
git clone git://git.webkit.org/WebKit.git
cd WebKit
≈ 1.2 GB .git
14

15. Build
Tools/Scripts/build-webkit --qt
--debug for “Debug” mode
15

16. Launch
Tools/Scripts/run-launcher --qt
16

17. Use
17

18. Using WebView
QWebView webView;
webView.show();
webView.setUrl(QUrl("http://campkde.org"));
18

19. 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

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

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

22. Hybrid: Native + Web
22

23. Exposing to the Web world
QWebFrame::addToJavaScriptWindowObject(QString, QObject*)
Public functions
Object properties
Child objects
23

24. Signal and Slot
signal
foobar.modified.connect(refresh);
QObject instance JavaScript function
foobar.modified.connect(obj, refresh);
any object
24

25. Coming back to the Native
QVariant QWebFrame::evaluateJavaScript(QString)
mostly key-value pair
(like JavaScript objects)
25

26. Other Bridging Solutions
Custom network protocol
QNetworkAccessManager
http://labs.qt.nokia.com/2010/11/16/some-webkit-hybrid-stu /
26

27. Deployment
O ine Packaging
Cache Manifest
QtWebKit boilerplate
Local Storage
27

28. Technologies
28

29. Key Technologies
29

30. JavaScript
30

31. Libraries and Frameworks
31

32. Vector Graphics
http://raphaeljs.com/polar-clock.html
32

33. Canvas-based Game
http://ariya.blogspot.com/2010/09/invade-destroy.html
33

34. Diagrams & Visualization
JavaScript InfoVis Toolkit http://thejit.org/
34

35. CSS3 Animations
http://mozillademos.org/demos/planetarium/demo.html
35

36. Accelerated Composition
GPU FTW
36

37. Sencha Animator
37

38. Device Access
http://ariya.github.com/js/marblebox/
38

39. WebGL for 3-D
http://webglsamples.googlecode.com/hg/aquarium/aquarium.html
39

40. PhiloGL: WebGL Framework
http://senchalabs.github.com/philogl/
40

41. Tools
41

42. Web Inspector
42

43. Network Log
28: GET http://www.google.com/m/gp
292: Response 200 application/xhtml+xml; charset=UTF-8 0 bytes http://www.google.com/m/gp
311: 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/gp
324: Finish fail http://www.google.com/m/gp
328: GET http://www.google.com/m/gn/user?...
329: Finish success http://www.google.com/m/gn/user?...
43

44. Typical Scenario
This is
awesome!
n
t to ru
forge ests
the t
REGRESSION
44

45. Test Framework
specrunner SpecRunner.html
5 specs, 0 failures in 0.013s
specrunner SpecRunner.html
FAIL: 5 specs, 1 failure in 0.014s
Selenium, Watir, Squish Web, JSUnit,
Jasmine, QUnit, ...
45

46. 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

47. UI Designer
47

48. IDE: AKShell
48

49. IDE: Cloud9
49

50. Recorder and Replayer
50

51. Conclusion
51

52. Today
Web technologies are moving really fast
Various frameworks and libraries boost the productivity
Hybrid approach helps the migration
Tools need to catch-up
52

53. Future
More bindings to the native world
Platinum-grade productivity tools
Ubiquitous mesh and cloud solutions
53

54. THANK YOU!
ariya @ kde.org
ariya.blogspot.com
ariyahidayat
54