Successfully reported this slideshow.

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Introduction to QtWebKit

  1. 1. Introduction to QtWebKit ARIYA HIDAYAT ENGINEERING DIRECTOR, SENCHA 1
  2. 2. whoami 2
  3. 3. Overview 3
  4. 4. WebKit Everywhere Browser Devices Runtime 4
  5. 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. 6. Extensive Tests tests ≈ 20,000 tests 904 MB the rest 229 MB 6
  7. 7. Workflow quality control 1 Every commit needs to be reviewed 2 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 SVG HTML 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” graphics GraphicsContext Mac Chromium Qt Gtk Skia Cairo CoreGraphics QPainter graphics stack 12
  13. 13. Get + Compile 13
  14. 14. Using git git clone git://git.webkit.org/WebKit.git cd WebKit ≈ 1.2 GB .git 14
  15. 15. Build Tools/Scripts/build-webkit --qt --debug for “Debug” mode 15
  16. 16. Launch Tools/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 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. 20. SVG Rasterizer http://labs.qt.nokia.com/2008/08/06/webkit-based-svg-rasterizer/ 20
  21. 21. Search + Preview http://labs.qt.nokia.com/2008/11/04/search-with-thumbnail-preview/ 21
  22. 22. Hybrid: Native + Web 22
  23. 23. Exposing to the Web world QWebFrame::addToJavaScriptWindowObject(QString, QObject*) Public functions Object properties Child objects 23
  24. 24. Signal and Slot signal foobar.modified.connect(refresh); QObject instance JavaScript function foobar.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 Animations http://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 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. 44. Typical Scenario This is awesome! n t to ru forge ests the t REGRESSION 44
  45. 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. 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. 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 fast Various 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 tools Ubiquitous mesh and cloud solutions 53
  54. 54. THANK YOU! ariya @ kde.org ariya.blogspot.com ariyahidayat 54

×