Introduction toQtWebKit

ARIYA HIDAYATENGINEERING DIRECTOR, SENCHA

1

whoami

2

Overview

3

WebKit Everywhere

Browser

Devices

Runtime

4

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

Extensive Tests

the rest229 MB

tests904 MB≈ 20,000 tests

6

Workflow

1Every commit needs to be reviewed

2 Broken commit must be reverted

quality control

zero-regression policy

7

Level of Involvement

Contributor

Committer

≈ 130 Reviewer

≈ 80accept or reject patches

checks in reviewed patches

after 10-20 patches

after 80 patches

8

WebKit ReviewersApple

39

Google19

Nokia6

RIM6

Misc12

1

9

Components of WebKit

WebKit Library

JavaScriptCore

WebCore

HTML rendering

SVG

DOM CSS

10

Platform Abstractions

Network Unicode Clipboard

Graphics Theme Events

Thread Geolocation Timer

11

Di!erent “Ports”WebCore graphics

Mac Chromium Qt Gtk

CoreGraphics

Skia

QPainter

Cairo

graphics stack

GraphicsContext

12

Get + Compile

13

Using git

git clone git://git.webkit.org/WebKit.gitcd WebKit

≈ 1.2 GB .git

14

Build

Tools/Scripts/build-webkit --qt

--debug for “Debug” mode

15

Launch

Tools/Scripts/run-launcher --qt

16

Use

17

Using WebView

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

18

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

SVG Rasterizer

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

Search + Preview

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

Hybrid: Native + Web

22

Exposing to the Web world

QWebFrame::addToJavaScriptWindowObject(QString, QObject*)

Public functionsObject properties

Child objects

23

Signal and Slot

foobar.modified.connect(refresh);

QObject instance JavaScript function

signal

foobar.modified.connect(obj, refresh);

any object

24

Coming back to the Native

QVariant QWebFrame::evaluateJavaScript(QString)

mostly key-value pair(like JavaScript objects)

25

Other Bridging Solutions

http://labs.qt.nokia.com/2010/11/16/some-webkit-hybrid-stu"/

Custom network protocolQNetworkAccessManager

26

Deployment

O!ine PackagingCache ManifestLocal Storage

QtWebKit boilerplate

27

Technologies

28

Key Technologies

29

JavaScript

30

Libraries and Frameworks

31

Vector Graphics

http://raphaeljs.com/polar-clock.html

32

Canvas-based Game

http://ariya.blogspot.com/2010/09/invade-destroy.html33

Diagrams & Visualization

http://thejit.org/JavaScript InfoVis Toolkit

34

CSS3 Animations

http://mozillademos.org/demos/planetarium/demo.html35

Accelerated Composition

GPU FTW

36

Sencha Animator

37

Device Access

http://ariya.github.com/js/marblebox/

38

WebGL for 3-D

http://webglsamples.googlecode.com/hg/aquarium/aquarium.html

39

PhiloGL: WebGL Framework

http://senchalabs.github.com/philogl/

40

Tools

41

Web Inspector

42

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

forget to run

the tests

REGRESSION

Typical Scenario

This is awesome!

44

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

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

UI Designer

47

IDE: AKShell

48

IDE: Cloud9

49

Recorder and Replayer

50

Conclusion

51

TodayWeb technologies are moving really fast

Various frameworks and libraries boost the productivity

Hybrid approach helps the migration

Tools need to catch-up

52

FutureMore bindings to the native world

Platinum-grade productivity tools

Ubiquitous mesh and cloud solutions

53

THANK YOU!

ariya @ kde.org

ariyahidayat

ariya.blogspot.com

54