Hybrid Apps (Native + Web) using WebKit
•
4 likes•2,445 views
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.
More Related Content
What's hot
What's hot (20)
Similar to Hybrid Apps (Native + Web) using WebKit
Similar to Hybrid Apps (Native + Web) using WebKit (20)
More from Ariya Hidayat
More from Ariya Hidayat (7)
Recently uploaded
Recently uploaded (20)
Hybrid Apps (Native + Web) using WebKit
- 1. Hybrid Apps (Native + Web) using WebKit ARIYA HIDAYAT, SENCHA
- 2. whoami
- 3. Overview
- 4. Going Hybrid? Platform Integration Security App Store/ Advanced Technologies Marketplace
- 5. WebKit Everywhere Browser Devices Runtime
- 6. ~2000 commits/month History 90000 80000 70000 60000 Revisions 50000 40000 30000 20000 10000 0 0 1 2 3 4 5 6 7 8 9 10 Years
- 7. Extensive Tests ≈ 20,000 tests tests 904 MB the rest 229 MB
- 8. Workflow quality control 1 Every commit needs to be reviewed 2 Broken commit must be reverted zero-regression policy
- 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. WebKit Reviewers Apple 39 Google 25 Misc 11 1 RIM Nokia 7 7
- 11. Components of WebKit DOM CSS WebCore SVG HTML rendering JavaScriptCore WebKit Library
- 12. Platform Abstractions Network Unicode Clipboard Graphics Theme Events Thread Geolocation Timer
- 13. WebCore Di erent “Ports” graphics GraphicsContext Mac Chromium Qt Gtk Skia Cairo CoreGraphics QPainter graphics stack
- 14. Use
- 15. Web Browsers Arora Demo Browser http://arora.googlecode.com demos/browser
- 16. QWebView, QWebPage, QWebFrame QWebView (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("<body>Hello, MeeGo!</body>");
- 19. Contents via Resource <RCC> <qresource prefix="/"> <file>content.html</file> </qresource> </RCC> QWebView webView; webView.show(); webView.setUrl(QUrl("qrc:/content.html"));
- 20. 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/
- 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 world QWebFrame::addToJavaScriptWindowObject(QString, QObject*) Public functions Object properties Child objects
- 25. Exposing to the Web world page()->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 <input type="button" value="Try this" onClick="Dialog.showMessage('You clicked me!')"> instance of public slot Dialog object
- 27. Signal and Slot signal foobar.modified.connect(refresh); QObject instance JavaScript function foobar.modified.connect(obj, refresh); any object
- 28. Triggering Action from Native class 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 object signal <script> Stopwatch.tick.connect(function(t) { document.getElementById('tick').innerText = t; }); </script>
- 30. Coming back to the Native QVariant 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 Bar Dialogs Application System Access Notifications
- 33. Debugging Web Inspector settings()->setAttribute(QWebSettings::DeveloperExtrasEnabled, true);
- 34. Deployment O ine Packaging Cache Manifest QtWebKit boilerplate Local Storage Tools PhoneGap AppUp Encapsulator
- 35. Real-world Hybrid Apps Ext Designer Sencha Animator
- 36. Technologies
- 37. Key Technologies
- 38. JavaScript
- 40. Content Editing http://labs.qt.nokia.com/2009/03/12/wysiwyg-html-editor/
- 41. Consume Web 2.0 http://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 Game http://ariya.blogspot.com/2010/09/invade-destroy.html
- 44. Diagrams & Visualization JavaScript InfoVis Toolkit http://thejit.org/
- 45. CSS3 Animations http://mozillademos.org/demos/planetarium/demo.html
- 46. Accelerated Composition GPU FTW
- 47. Sencha Animator
- 48. Device Access http://ariya.github.com/js/marblebox/
- 49. WebGL for 3-D http://webglsamples.googlecode.com/hg/aquarium/aquarium.html
- 50. PhiloGL: WebGL Framework http://senchalabs.github.com/philogl/
- 51. Tools
- 52. Web Inspector
- 53. 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?...
- 54. Typical Scenario This is awesome! un t to r forge ests the t
- 55. 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, ...
- 56. 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
- 57. UI Designer
- 58. IDE: AKShell
- 59. IDE: Cloud9
- 61. Get + Compile
- 62. Using git git clone git://git.webkit.org/WebKit.git cd WebKit ≈ 1.2 GB .git
- 63. Build Tools/Scripts/build-webkit --qt --debug for “Debug” mode
- 65. Conclusion
- 66. Today Web technologies are moving really fast Various frameworks and libraries boost the productivity Hybrid approach helps the migration Tools need to catch-up
- 67. Future More bindings to the native world Platinum-grade productivity tools Ubiquitous mesh and cloud solutions
- 68. THANK YOU! ariya.hidayat@gmail.com ariya.blogspot.com ariyahidayat