Your SlideShare is downloading. ×
0
Introduction to   QtWebKit       ARIYA HIDAYATENGINEERING DIRECTOR, SENCHA                               1
whoami         2
Overview           3
WebKit EverywhereBrowserDevicesRuntime                    4
History                                   ~2000 commits/month            90000            80000            70000          ...
Extensive Tests                  tests≈ 20,000 tests   904 MB   the rest                          229 MB                  ...
Workflow                        quality control1   Every commit needs to be reviewed2   Broken commit must be reverted     ...
Level of Involvement  Contributor                 after 10-20 patches                                       after 80 patch...
WebKit Reviewers            Apple             39                            Google                              19     Mis...
Components of WebKit  DOM             CSS        WebCore             SVGHTML         rendering                            ...
Platform Abstractions    Network     Unicode      Clipboard    Graphics     Theme        Events     Thread    Geolocation ...
WebCore Di erent “Ports”                           graphicsGraphicsContext       Mac   Chromium        Qt      Gtk        ...
Get + Compile                13
Using gitgit clone git://git.webkit.org/WebKit.gitcd WebKit                ≈ 1.2 GB .git                                  ...
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"));                               ...
Capture to ImageQWebPage page;QImage image(size, QImage::Format_ARGB32_Premultiplied);image.fill(Qt::transparent);QPainter...
SVG Rasterizerhttp://labs.qt.nokia.com/2008/08/06/webkit-based-svg-rasterizer/                                            ...
Search + Previewhttp://labs.qt.nokia.com/2008/11/04/search-with-thumbnail-preview/                                        ...
Hybrid: Native + Web                       22
Exposing to the Web worldQWebFrame::addToJavaScriptWindowObject(QString, QObject*)                                    Publ...
Signal and Slot        signalfoobar.modified.connect(refresh); QObject instance          JavaScript functionfoobar.modifie...
Coming back to the Native  QVariant QWebFrame::evaluateJavaScript(QString)    mostly key-value pair   (like JavaScript obj...
Other Bridging Solutions                                    Custom network protocol                                    QNe...
Deployment   O    ine          Packaging Cache Manifest                  QtWebKit boilerplate  Local Storage              ...
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                                                   ...
Diagrams & Visualization JavaScript InfoVis Toolkit   http://thejit.org/                                                  ...
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                                              ...
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.goo...
Typical Scenario                     This is                   awesome!               n       t to ru  forge ests     the ...
Test Frameworkspecrunner SpecRunner.html5 specs, 0 failures in 0.013sspecrunner SpecRunner.htmlFAIL: 5 specs, 1 failure in...
Headless WebKitif (phantom.state.length === 0) {    phantom.state = pizza;    phantom.open(http://www.google.com/m/local?s...
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 ...
Future More bindings to the native world Platinum-grade productivity toolsUbiquitous mesh and cloud solutions             ...
THANK YOU!       ariya @ kde.org       ariya.blogspot.com       ariyahidayat                            54
Upcoming SlideShare
Loading in...5
×

Introduction to QtWebKit

2,803

Published on

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

No Downloads
Views
Total Views
2,803
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
67
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×