Introduction to QtWebKit
Upcoming SlideShare
Loading in...5
×
 

Introduction to QtWebKit

on

  • 2,917 views

 

Statistics

Views

Total Views
2,917
Views on SlideShare
2,916
Embed Views
1

Actions

Likes
2
Downloads
58
Comments
0

1 Embed 1

http://www.unscatter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Introduction to QtWebKit Introduction to QtWebKit Presentation Transcript

  • Introduction to QtWebKit ARIYA HIDAYATENGINEERING DIRECTOR, SENCHA 1
  • whoami 2
  • Overview 3
  • WebKit EverywhereBrowserDevicesRuntime 4
  • History ~2000 commits/month 90000 80000 70000 60000Revisions 50000 40000 30000 20000 10000 0 0 1 2 3 4 5 6 7 8 9 10 Years 5
  • Extensive Tests tests≈ 20,000 tests 904 MB the rest 229 MB 6
  • Workflow quality control1 Every commit needs to be reviewed2 Broken commit must be reverted zero-regression policy 7
  • Level of Involvement Contributor after 10-20 patches after 80 patches Committer ≈ 130 Reviewer checks in reviewed patches ≈ 80 accept or reject patches 8
  • WebKit Reviewers Apple 39 Google 19 Misc 12 1 RIM Nokia 6 6 9
  • Components of WebKit DOM CSS WebCore SVGHTML rendering JavaScriptCore WebKit Library 10
  • Platform Abstractions Network Unicode Clipboard Graphics Theme Events Thread Geolocation Timer 11
  • WebCore Di erent “Ports” graphicsGraphicsContext Mac Chromium Qt Gtk Skia Cairo CoreGraphics QPainter graphics stack 12
  • Get + Compile 13
  • Using gitgit clone git://git.webkit.org/WebKit.gitcd WebKit ≈ 1.2 GB .git 14
  • BuildTools/Scripts/build-webkit --qt --debug for “Debug” mode 15
  • LaunchTools/Scripts/run-launcher --qt 16
  • Use 17
  • Using WebView QWebView webView; webView.show(); webView.setUrl(QUrl("http://campkde.org")); 18
  • Capture to ImageQWebPage 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 Rasterizerhttp://labs.qt.nokia.com/2008/08/06/webkit-based-svg-rasterizer/ 20
  • Search + Previewhttp://labs.qt.nokia.com/2008/11/04/search-with-thumbnail-preview/ 21
  • Hybrid: Native + Web 22
  • Exposing to the Web worldQWebFrame::addToJavaScriptWindowObject(QString, QObject*) Public functions Object properties Child objects 23
  • Signal and Slot signalfoobar.modified.connect(refresh); QObject instance JavaScript functionfoobar.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 Custom network protocol QNetworkAccessManager http://labs.qt.nokia.com/2010/11/16/some-webkit-hybrid-stu / 26
  • Deployment O ine Packaging Cache Manifest QtWebKit boilerplate Local Storage 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.html 33
  • Diagrams & Visualization JavaScript InfoVis Toolkit http://thejit.org/ 34
  • CSS3 Animationshttp://mozillademos.org/demos/planetarium/demo.html 35
  • 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 Log28: 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
  • Typical Scenario This is awesome! n t to ru forge ests the t REGRESSION 44
  • Test Frameworkspecrunner SpecRunner.html5 specs, 0 failures in 0.013sspecrunner SpecRunner.htmlFAIL: 5 specs, 1 failure in 0.014s Selenium, Watir, Squish Web, JSUnit, Jasmine, QUnit, ... 45
  • Headless WebKitif (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
  • Today Web technologies are moving really fastVarious frameworks and libraries boost the productivity Hybrid approach helps the migration Tools need to catch-up 52
  • Future More bindings to the native world Platinum-grade productivity toolsUbiquitous mesh and cloud solutions 53
  • THANK YOU! ariya @ kde.org ariya.blogspot.com ariyahidayat 54