Introduction to QtWebKit

  • 2,511 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,511
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
63
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Introduction to QtWebKit ARIYA HIDAYATENGINEERING DIRECTOR, SENCHA 1
  • 2. whoami 2
  • 3. Overview 3
  • 4. WebKit EverywhereBrowserDevicesRuntime 4
  • 5. 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
  • 6. Extensive Tests tests≈ 20,000 tests 904 MB the rest 229 MB 6
  • 7. Workflow quality control1 Every commit needs to be reviewed2 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 SVGHTML rendering JavaScriptCore WebKit Library 10
  • 11. Platform Abstractions Network Unicode Clipboard Graphics Theme Events Thread Geolocation Timer 11
  • 12. WebCore Di erent “Ports” graphicsGraphicsContext Mac Chromium Qt Gtk Skia Cairo CoreGraphics QPainter graphics stack 12
  • 13. Get + Compile 13
  • 14. Using gitgit clone git://git.webkit.org/WebKit.gitcd WebKit ≈ 1.2 GB .git 14
  • 15. BuildTools/Scripts/build-webkit --qt --debug for “Debug” mode 15
  • 16. LaunchTools/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 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
  • 20. SVG Rasterizerhttp://labs.qt.nokia.com/2008/08/06/webkit-based-svg-rasterizer/ 20
  • 21. Search + Previewhttp://labs.qt.nokia.com/2008/11/04/search-with-thumbnail-preview/ 21
  • 22. Hybrid: Native + Web 22
  • 23. Exposing to the Web worldQWebFrame::addToJavaScriptWindowObject(QString, QObject*) Public functions Object properties Child objects 23
  • 24. Signal and Slot signalfoobar.modified.connect(refresh); QObject instance JavaScript functionfoobar.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 Animationshttp://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 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
  • 44. Typical Scenario This is awesome! n t to ru forge ests the t REGRESSION 44
  • 45. 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
  • 46. 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
  • 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 fastVarious 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 toolsUbiquitous mesh and cloud solutions 53
  • 54. THANK YOU! ariya @ kde.org ariya.blogspot.com ariyahidayat 54