0
Hybrid Apps (Native + Web) using WebKit             ARIYA HIDAYAT, SENCHA
whoami
Overview
Going Hybrid?   Platform Integration      Security                            App Store/    Advanced Technologies   Market...
WebKit Everywhere Browser DevicesRuntime
~2000 commits/month            History            90000            80000            70000            60000Revisions       ...
Extensive Tests ≈ 20,000 tests    tests                  904 MB   the rest                           229 MB
Workflow                             quality control    1     Every commit needs to be reviewed    2     Broken commit must...
Level of Involvement    Contributor                       after 10-20 patches                                             ...
WebKit Reviewers              Apple               39                              Google                                25...
Components of WebKit        DOM              CSS              WebCore             SVG HTML                   rendering    ...
Platform Abstractions       Network     Unicode      Clipboard       Graphics     Theme        Events       Thread     Geo...
WebCoreDi erent “Ports”                                      graphicsGraphicsContext                      Mac        Chrom...
Use
Web Browsers                          Arora  Demo Browser         http://arora.googlecode.com       demos/browser
QWebView, QWebPage, QWebFrame                    QWebView (widget)                  QWebPage (object)                     ...
Using WebView QWebView webView; webView.show(); webView.setUrl(QUrl("http://meego.com"));
Contents via String QWebView webView; webView.show(); webView.setContent("<body>Hello, MeeGo!</body>");
Contents via Resource                      <RCC>                          <qresource prefix="/">                          ...
Capture to ImageQWebPage page;QImage image(size, QImage::Format_ARGB32_Premultiplied);image.fill(Qt::transparent);QPainter...
SVG Rasterizer     http://labs.qt.nokia.com/2008/08/06/webkit-based-svg-rasterizer/
Search + Preview     http://labs.qt.nokia.com/2008/11/04/search-with-thumbnail-preview/
Bridging the Two Worlds
Exposing to the Web worldQWebFrame::addToJavaScriptWindowObject(QString, QObject*)                                  Public...
Exposing to the Web worldpage()->mainFrame()->addToJavaScriptWindowObject("Dialog", new Dialog);                 class Dia...
Exposing to the Web world   <input type="button" value="Try this"   onClick="Dialog.showMessage(You clicked me!)">    inst...
Signal and Slot              signal   foobar.modified.connect(refresh);    QObject instance       JavaScript function  foo...
Triggering Action from Nativeclass Stopwatch: public QObject{                                     Stopwatch::Stopwatch(QOb...
Triggering Action from Native   instance of Stopwatch object                                  signal      <script>      St...
Coming back to the Native  QVariant QWebFrame::evaluateJavaScript(QString)      mostly key-value pair     (like JavaScript...
Other Bridging Solutions                                           Custom network protocol                                ...
Platform Integration                   Menu and Menu Bar                                              Dialogs             ...
Debugging     Web Inspectorsettings()->setAttribute(QWebSettings::DeveloperExtrasEnabled, true);
Deployment     O ine                Packaging Cache Manifest      QtWebKit boilerplate  Local Storage                     ...
Real-world Hybrid Apps      Ext Designer       Sencha Animator
Technologies
Key Technologies
JavaScript
Libraries and Frameworks
Content Editing      http://labs.qt.nokia.com/2009/03/12/wysiwyg-html-editor/
Consume Web 2.0http://labs.qt.nokia.com/2009/03/08/creating-a-google-chat-client-in-15-minutes/
Vector Graphics           http://raphaeljs.com/polar-clock.html
Canvas-based Game      http://ariya.blogspot.com/2010/09/invade-destroy.html
Diagrams & Visualization    JavaScript InfoVis Toolkit   http://thejit.org/
CSS3 Animations      http://mozillademos.org/demos/planetarium/demo.html
Accelerated Composition                          GPU FTW
Sencha Animator
Device Access           http://ariya.github.com/js/marblebox/
WebGL for 3-D        http://webglsamples.googlecode.com/hg/aquarium/aquarium.html
PhiloGL: WebGL Framework            http://senchalabs.github.com/philogl/
Tools
Web Inspector
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!                   un            t to r   ...
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
IDE: AKShell
IDE: Cloud9
Recorder and Replayer
Get + Compile
Using git  git clone git://git.webkit.org/WebKit.git  cd WebKit                       ≈ 1.2 GB .git
BuildTools/Scripts/build-webkit --qt      --debug for “Debug” mode
LaunchTools/Scripts/run-launcher --qt
Conclusion
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.hidayat@gmail.com         ariya.blogspot.com         ariyahidayat
Upcoming SlideShare
Loading in...5
×

Hybrid Apps (Native + Web) using WebKit

2,184

Published on

In term of innovations and mobile availability, WebKit is known to be the premier web rendering engine with the leading support for web standards such as HTML5, CSS3, and SVG. On MeeGo platform, WebKit can be leveraged easily via the use QtWebKit module which combines powerful WebKit features with the ease of use of Qt. The ground of developing applications using native technologies has been much explored, however there are still confusions, myths and misunderstanding as to what can be achieved with web technologies and hybrid native-web approach. This talk will highlight several tools and best practices in developing and testing good looking, feature-rich, and hardware-accelerated applications using web technologies targeting MeeGo platform in particular.

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

No Downloads
Views
Total Views
2,184
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
57
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "Hybrid Apps (Native + Web) using WebKit"

  1. 1. Hybrid Apps (Native + Web) using WebKit ARIYA HIDAYAT, SENCHA
  2. 2. whoami
  3. 3. Overview
  4. 4. Going Hybrid? Platform Integration Security App Store/ Advanced Technologies Marketplace
  5. 5. WebKit Everywhere Browser DevicesRuntime
  6. 6. ~2000 commits/month History 90000 80000 70000 60000Revisions 50000 40000 30000 20000 10000 0 0 1 2 3 4 5 6 7 8 9 10 Years
  7. 7. Extensive Tests ≈ 20,000 tests tests 904 MB the rest 229 MB
  8. 8. Workflow quality control 1 Every commit needs to be reviewed 2 Broken commit must be reverted zero-regression policy
  9. 9. Level of Involvement Contributor after 10-20 patches after 80 patches Committer ≈ 150 Reviewer checks in reviewed patches ≈ 90 accept or reject patches
  10. 10. WebKit Reviewers Apple 39 Google 25 Misc 11 1 RIM Nokia 7 7
  11. 11. Components of WebKit DOM CSS WebCore SVG HTML rendering JavaScriptCore WebKit Library
  12. 12. Platform Abstractions Network Unicode Clipboard Graphics Theme Events Thread Geolocation Timer
  13. 13. WebCoreDi erent “Ports” graphicsGraphicsContext Mac Chromium Qt Gtk Skia Cairo CoreGraphics QPainter graphics stack
  14. 14. Use
  15. 15. Web Browsers Arora Demo Browser http://arora.googlecode.com demos/browser
  16. 16. QWebView, QWebPage, QWebFrame QWebView (widget) QWebPage (object) QWebFrame (object) At least one, i.e. the main frame of the page
  17. 17. Using WebView QWebView webView; webView.show(); webView.setUrl(QUrl("http://meego.com"));
  18. 18. Contents via String QWebView webView; webView.show(); webView.setContent("<body>Hello, MeeGo!</body>");
  19. 19. Contents via Resource <RCC> <qresource prefix="/"> <file>content.html</file> </qresource> </RCC>QWebView webView;webView.show();webView.setUrl(QUrl("qrc:/content.html"));
  20. 20. 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/
  21. 21. SVG Rasterizer http://labs.qt.nokia.com/2008/08/06/webkit-based-svg-rasterizer/
  22. 22. Search + Preview http://labs.qt.nokia.com/2008/11/04/search-with-thumbnail-preview/
  23. 23. Bridging the Two Worlds
  24. 24. Exposing to the Web worldQWebFrame::addToJavaScriptWindowObject(QString, QObject*) Public functions Object properties Child objects
  25. 25. Exposing to the Web worldpage()->mainFrame()->addToJavaScriptWindowObject("Dialog", new Dialog); class Dialog: public QObject { Q_OBJECT public: Dialog(QObject *parent = 0); public slots: void showMessage(const QString& msg); };
  26. 26. Exposing to the Web world <input type="button" value="Try this" onClick="Dialog.showMessage(You clicked me!)"> instance of public slot Dialog object
  27. 27. Signal and Slot signal foobar.modified.connect(refresh); QObject instance JavaScript function foobar.modified.connect(obj, refresh); any object
  28. 28. Triggering Action from Nativeclass Stopwatch: public QObject{ Stopwatch::Stopwatch(QObject *parent) Q_OBJECT : QObject(parent) , m_index(0)public: { Stopwatch(QObject *parent = 0); QTimer *timer = new QTimer(this); timer->setInterval(1000);signals: connect(timer, SIGNAL(timeout()), SLOT(update())); void tick(int t); timer->start(); }private slots: void update(); void Stopwatch::update() {private: emit tick(m_index++); int m_index; }};
  29. 29. Triggering Action from Native instance of Stopwatch object signal <script> Stopwatch.tick.connect(function(t) { document.getElementById(tick).innerText = t; }); </script>
  30. 30. Coming back to the Native QVariant QWebFrame::evaluateJavaScript(QString) mostly key-value pair (like JavaScript objects)
  31. 31. Other Bridging Solutions Custom network protocol QNetworkAccessManager http://labs.qt.nokia.com/2010/11/16/some-webkit-hybrid-stu /
  32. 32. Platform Integration Menu and Menu Bar Dialogs Application System Access Notifications
  33. 33. Debugging Web Inspectorsettings()->setAttribute(QWebSettings::DeveloperExtrasEnabled, true);
  34. 34. Deployment O ine Packaging Cache Manifest QtWebKit boilerplate Local Storage Tools PhoneGap AppUp Encapsulator
  35. 35. Real-world Hybrid Apps Ext Designer Sencha Animator
  36. 36. Technologies
  37. 37. Key Technologies
  38. 38. JavaScript
  39. 39. Libraries and Frameworks
  40. 40. Content Editing http://labs.qt.nokia.com/2009/03/12/wysiwyg-html-editor/
  41. 41. Consume Web 2.0http://labs.qt.nokia.com/2009/03/08/creating-a-google-chat-client-in-15-minutes/
  42. 42. Vector Graphics http://raphaeljs.com/polar-clock.html
  43. 43. Canvas-based Game http://ariya.blogspot.com/2010/09/invade-destroy.html
  44. 44. Diagrams & Visualization JavaScript InfoVis Toolkit http://thejit.org/
  45. 45. CSS3 Animations http://mozillademos.org/demos/planetarium/demo.html
  46. 46. Accelerated Composition GPU FTW
  47. 47. Sencha Animator
  48. 48. Device Access http://ariya.github.com/js/marblebox/
  49. 49. WebGL for 3-D http://webglsamples.googlecode.com/hg/aquarium/aquarium.html
  50. 50. PhiloGL: WebGL Framework http://senchalabs.github.com/philogl/
  51. 51. Tools
  52. 52. Web Inspector
  53. 53. 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?...
  54. 54. Typical Scenario This is awesome! un t to r forge ests the t
  55. 55. 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, ...
  56. 56. 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
  57. 57. UI Designer
  58. 58. IDE: AKShell
  59. 59. IDE: Cloud9
  60. 60. Recorder and Replayer
  61. 61. Get + Compile
  62. 62. Using git git clone git://git.webkit.org/WebKit.git cd WebKit ≈ 1.2 GB .git
  63. 63. BuildTools/Scripts/build-webkit --qt --debug for “Debug” mode
  64. 64. LaunchTools/Scripts/run-launcher --qt
  65. 65. Conclusion
  66. 66. Today Web technologies are moving really fastVarious frameworks and libraries boost the productivity Hybrid approach helps the migration Tools need to catch-up
  67. 67. Future More bindings to the native world Platinum-grade productivity toolsUbiquitous mesh and cloud solutions
  68. 68. THANK YOU! ariya.hidayat@gmail.com ariya.blogspot.com ariyahidayat
  1. A particular slide catching your eye?

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

×