Hybrid Apps (Native + Web) using WebKit

Download Hybrid Apps (Native + Web) using WebKit

Post on 27-Jun-2015




2 download


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.


1. Hybrid Apps (Native + Web) using WebKit ARIYA HIDAYAT, SENCHA 2. whoami 3. Overview 4. Going Hybrid? Platform IntegrationSecurityApp Store/Advanced Technologies Marketplace 5. WebKit Everywhere Browser DevicesRuntime 6. ~2000 commits/monthHistory90000800007000060000Revisions5000040000300002000010000 00 1 2 3 4 5 67 8 910Years 7. Extensive Tests 20,000 teststests904 MB the rest 229 MB 8. Workow quality control1 Every commit needs to be reviewed2 Broken commit must be reverted zero-regression policy 9. Level of InvolvementContributor after 10-20 patchesafter 80 patches Committer 150 Reviewer checks in reviewed patches 90 accept or reject patches 10. WebKit ReviewersApple 39Google25Misc 11 1 RIMNokia77 11. Components of WebKitDOMCSSWebCore SVG HTML renderingJavaScriptCore WebKit Library 12. Platform Abstractions Network UnicodeClipboard Graphics ThemeEvents Thread GeolocationTimer 13. WebCoreDi erent PortsgraphicsGraphicsContextMacChromiumQt Gtk SkiaCairoCoreGraphics QPaintergraphics stack 14. Use 15. Web BrowsersAroraDemo Browser http://arora.googlecode.com demos/browser 16. QWebView, QWebPage, QWebFrameQWebView (widget)QWebPage (object)QWebFrame (object) At least one, i.e. the main frame of the page 17. Using WebView QWebView webView; webView.show(); webView.setUrl(QUrl("http://meego.com")); 18. Contents via String QWebView webView; webView.show(); webView.setContent("Hello, MeeGo!"); 19. Contents via Resourcecontent.htmlQWebView webView;webView.show();webView.setUrl(QUrl("qrc:/content.html")); 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. SVG Rasterizer http://labs.qt.nokia.com/2008/08/06/webkit-based-svg-rasterizer/ 22. Search + Preview http://labs.qt.nokia.com/2008/11/04/search-with-thumbnail-preview/ 23. Bridging the Two Worlds 24. Exposing to the Web worldQWebFrame::addToJavaScriptWindowObject(QString, QObject*)Public functionsObject propertiesChild objects 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. Exposing to the Web world instance of public slot Dialog object 27. Signal and Slotsignal foobar.modified.connect(refresh);QObject instance JavaScript functionfoobar.modified.connect(obj, refresh); any object 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. Triggering Action from Native instance of Stopwatch objectsignalStopwatch.tick.connect(function(t) {document.getElementById(tick).innerText = t;}); 30. Coming back to the NativeQVariant QWebFrame::evaluateJavaScript(QString)mostly key-value pair (like JavaScript objects) 31. Other Bridging Solutions Custom network protocol QNetworkAccessManager http://labs.qt.nokia.com/2010/11/16/some-webkit-hybrid-stu / 32. Platform Integration Menu and Menu BarDialogsApplication System Access Notications 33. Debugging Web Inspectorsettings()->setAttribute(QWebSettings::DeveloperExtrasEnabled, true); 34. Deployment O inePackaging Cache ManifestQtWebKit boilerplateLocal Storage ToolsPhoneGapAppUp Encapsulator 35. Real-world Hybrid AppsExt Designer Sencha Animator 36. Technologies 37. Key Technologies 38. JavaScript 39. Libraries and Frameworks 40. Content Editinghttp://labs.qt.nokia.com/2009/03/12/wysiwyg-html-editor/ 41. Consume Web 2.0http://labs.qt.nokia.com/2009/03/08/creating-a-google-chat-client-in-15-minutes/ 42. Vector Graphics http://raphaeljs.com/polar-clock.html 43. Canvas-based Gamehttp://ariya.blogspot.com/2010/09/invade-destroy.html 44. Diagrams & VisualizationJavaScript InfoVis Toolkit http://thejit.org/ 45. CSS3 Animationshttp://mozillademos.org/demos/planetarium/demo.html 46. Accelerated CompositionGPU FTW 47. Sencha Animator 48. Device Access http://ariya.github.com/js/marblebox/ 49. WebGL for 3-Dhttp://webglsamples.googlecode.com/hg/aquarium/aquarium.html 50. PhiloGL: WebGL Frameworkhttp://senchalabs.github.com/philogl/ 51. Tools 52. Web Inspector 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. Typical Scenario This isawesome! unt to r forge eststhe t 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. 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. UI Designer 58. IDE: AKShell 59. IDE: Cloud9 60. Recorder and Replayer 61. Get + Compile 62. Using gitgit clone git://git.webkit.org/WebKit.gitcd WebKit 1.2 GB .git 63. BuildTools/Scripts/build-webkit --qt--debug for Debug mode 64. LaunchTools/Scripts/run-launcher --qt 65. Conclusion 66. Today Web technologies are moving really fastVarious frameworks and libraries boost the productivity Hybrid approach helps the migrationTools need to catch-up 67. Future More bindings to the native world Platinum-grade productivity toolsUbiquitous mesh and cloud solutions 68. THANK YOU! ariya.hidayat@gmail.com ariya.blogspot.com ariyahidayat