Introduction to QtWebKit

0 views
3,330 views

Published on

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
0
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
72
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Introduction to QtWebKit

  1. 1. Introduction to QtWebKit ARIYA HIDAYATENGINEERING DIRECTOR, SENCHA 1
  2. 2. whoami 2
  3. 3. Overview 3
  4. 4. WebKit EverywhereBrowserDevicesRuntime 4
  5. 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. 6. Extensive Tests tests≈ 20,000 tests 904 MB the rest 229 MB 6
  7. 7. Workflow quality control1 Every commit needs to be reviewed2 Broken commit must be reverted zero-regression policy 7
  8. 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. 9. WebKit Reviewers Apple 39 Google 19 Misc 12 1 RIM Nokia 6 6 9
  10. 10. Components of WebKit DOM CSS WebCore SVGHTML rendering JavaScriptCore WebKit Library 10
  11. 11. Platform Abstractions Network Unicode Clipboard Graphics Theme Events Thread Geolocation Timer 11
  12. 12. WebCore Di erent “Ports” graphicsGraphicsContext Mac Chromium Qt Gtk Skia Cairo CoreGraphics QPainter graphics stack 12
  13. 13. Get + Compile 13
  14. 14. Using gitgit clone git://git.webkit.org/WebKit.gitcd WebKit ≈ 1.2 GB .git 14
  15. 15. BuildTools/Scripts/build-webkit --qt --debug for “Debug” mode 15
  16. 16. LaunchTools/Scripts/run-launcher --qt 16
  17. 17. Use 17
  18. 18. Using WebView QWebView webView; webView.show(); webView.setUrl(QUrl("http://campkde.org")); 18
  19. 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. 20. SVG Rasterizerhttp://labs.qt.nokia.com/2008/08/06/webkit-based-svg-rasterizer/ 20
  21. 21. Search + Previewhttp://labs.qt.nokia.com/2008/11/04/search-with-thumbnail-preview/ 21
  22. 22. Hybrid: Native + Web 22
  23. 23. Exposing to the Web worldQWebFrame::addToJavaScriptWindowObject(QString, QObject*) Public functions Object properties Child objects 23
  24. 24. Signal and Slot signalfoobar.modified.connect(refresh); QObject instance JavaScript functionfoobar.modified.connect(obj, refresh); any object 24
  25. 25. Coming back to the Native QVariant QWebFrame::evaluateJavaScript(QString) mostly key-value pair (like JavaScript objects) 25
  26. 26. Other Bridging Solutions Custom network protocol QNetworkAccessManager http://labs.qt.nokia.com/2010/11/16/some-webkit-hybrid-stu / 26
  27. 27. Deployment O ine Packaging Cache Manifest QtWebKit boilerplate Local Storage 27
  28. 28. Technologies 28
  29. 29. Key Technologies 29
  30. 30. JavaScript 30
  31. 31. Libraries and Frameworks 31
  32. 32. Vector Graphics http://raphaeljs.com/polar-clock.html 32
  33. 33. Canvas-based Game http://ariya.blogspot.com/2010/09/invade-destroy.html 33
  34. 34. Diagrams & Visualization JavaScript InfoVis Toolkit http://thejit.org/ 34
  35. 35. CSS3 Animationshttp://mozillademos.org/demos/planetarium/demo.html 35
  36. 36. Accelerated Composition GPU FTW 36
  37. 37. Sencha Animator 37
  38. 38. Device Access http://ariya.github.com/js/marblebox/ 38
  39. 39. WebGL for 3-D http://webglsamples.googlecode.com/hg/aquarium/aquarium.html 39
  40. 40. PhiloGL: WebGL Framework http://senchalabs.github.com/philogl/ 40
  41. 41. Tools 41
  42. 42. Web Inspector 42
  43. 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. 44. Typical Scenario This is awesome! n t to ru forge ests the t REGRESSION 44
  45. 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. 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. 47. UI Designer 47
  48. 48. IDE: AKShell 48
  49. 49. IDE: Cloud9 49
  50. 50. Recorder and Replayer 50
  51. 51. Conclusion 51
  52. 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. 53. Future More bindings to the native world Platinum-grade productivity toolsUbiquitous mesh and cloud solutions 53
  54. 54. THANK YOU! ariya @ kde.org ariya.blogspot.com ariyahidayat 54

×