Build HTML5 App (Intel Elements 2011)

13,940 views

Published on

Published in: Technology, Design
0 Comments
14 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
13,940
On SlideShare
0
From Embeds
0
Number of Embeds
472
Actions
Shares
0
Downloads
147
Comments
0
Likes
14
Embeds 0
No embeds

No notes for slide

Build HTML5 App (Intel Elements 2011)

  1. Building HTML5 AppsAriya Hidayat, Sencha
  2. 08/29/112
  3. Building HTML5 App Ariya HidayatEngineering Director 08/29/11 3
  4. whoami 08/29/11 4
  5. 1Pure web apps (run in the browser)Hybrid solution (delivered as native apps) 2 08/29/11 5
  6. Pure Web Apps 08/29/11 6
  7. Common Myths Slow Does not use GPU acceleration Only works offline Manual layout of apps No GUI designer Only JavaScript Tedious to code Can’t do fluid animation Not crossplatform 08/29/11 7
  8. “Too many phones will kill you...” 08/29/11 8
  9. Supported PlatformsDesktop Mobile 08/29/11 9
  10. Adoption 08/29/11 10
  11. Amazon Kindle Cloud Reader 08/29/11 11
  12. Financial Times 08/29/11 12
  13. JavaScript: Ubiquitous Programming Environment 08/29/11 13
  14. Need for Speed SunSpider 0.9.1Internet Explorer 8 7.43 seconds Google Chrome 13 0.44 seconds Firefox 6 0.41 seconds 08/29/11 14
  15. Libraries and Frameworks 08/29/11 15
  16. Offline Support Application Cache Local Storage 08/29/11 16
  17. Application Cache CACHE MANIFEST # version 42 CACHE: style.css logic.js images/logo.png<html manifest=”foobar.appcache”>...</html> NETWORK: http://api.example.com login/ FALLBACK: *.html offline.html 08/29/11 17
  18. Application Cache offline online CACHE use cache update NETWORK can’t use use remote FALLBACK use fallback use remote 08/29/11 18
  19. Local Storage ~ 5 MB localStorage.setItem(‘foo’, ‘bar’); localStorage.getItem(‘foo’); localStorage.removeItem(‘foo’); localStorage.clear(); 08/29/11 19
  20. CSS3 Animation http://mozillademos.org/demos/planetarium/demo.html 08/29/11 20
  21. Canvas for Visualization JavaScript InfoVis Toolkit http://thejit.org/ 08/29/11 21
  22. Canvas for Games http://ariya.blogspot.com/2010/09/inv ade-destroy.html 08/29/11 22
  23. Pixel Manipulations http://ariya.github.com/canvas/crossfading/ 08/29/11 23
  24. Vector Graphics http://raphaeljs.com/polar-clock.html 08/29/11 24
  25. WebGL for 3-Dhttp://webglsamples.googlecode.com/hg/aquarium/aquarium.html 08/29/11 25
  26. WebGL for Visualization http://senchalabs.github.com/philogl/ 08/29/11 26
  27. Which is for what? CSS3 Canvas SVG WebGL Animation of UI elements ✔ 2-D visualization ✔ ✔ Imperative drawing ✔ 2-D scene-graph ✔ ✔ 3-D scene graph ✔ 2-D game ✔ ✔ ✔ 3-D game ✔ 08/29/11 27
  28. Hybrid Native + Web 08/29/11 28
  29. Going Hybrid? Platform Integration Security Advanced Technologies App Store/ Marketplace 08/29/11 29
  30. Real-world Hybrid Apps Ext Designer Sencha Animator 08/29/11 30
  31. WebKit Everywhere Browser Devices Runtime 08/29/11 31
  32. ~2000 commits/month History 100000 80000 60000Revisions 40000 20000 0 0 1 2 3 4 5 6 7 8 9 10 Years 08/29/11 32
  33. Components of WebKit DOM CSS WebCore SVG HTML rendering JavaScriptCore WebKit Library 08/29/11 33
  34. Platform Abstraction Network Unicode Clipboard Graphics Theme Events Thread Geolocation Timer 08/29/11 34
  35. WebCoreDifferent “Ports” graphicsGraphicsContext Mac Chromium Qt Gtk Skia Cairo CoreGraphics QPainter graphics stack 08/29/11 35
  36. QWeb* classes QWebView (widget) QWebPage (object) QWebFrame (object) At least one, i.e. the main frame of the page 08/29/11 36
  37. Using QWebView QWebView webView; webView.show(); webView.setUrl(QUrl("http://meego.com")); 08/29/11 37
  38. Contents via String QWebView webView; webView.show(); webView.setContent("<body>Hello, MeeGo!</body>"); 08/29/11 38
  39. Contents via Resource <RCC> <qresource prefix="/"> <file>content.html</file> </qresource> </RCC> QWebView webView; webView.show(); webView.setUrl(QUrl("qrc:/content.html")); 08/29/11 39
  40. 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/ 08/29/11 40
  41. SVG Rasterizer http://labs.qt.nokia.com/2008/08/06/webkit-based-svg-rasterizer/ 08/29/11 41
  42. Search + Preview http://labs.qt.nokia.com/2008/11/04/search-with-thumbnail-preview/ 08/29/11 42
  43. Exposing to the Web World QWebFrame::addToJavaScriptWindowObject(QString, QObject*) Public functions Object properties Child objects 08/29/11 43
  44. 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); }; 08/29/11 44
  45. Exposing to the Web World <input type="button" value="Try this" onClick="Dialog.showMessage(You clicked me!)"> instance of Dialog object public slot 08/29/11 45
  46. Signal and Slot signal foobar.modified.connect(refresh); QObject instance JavaScript function foobar.modified.connect(obj, refresh); any object 08/29/11 46
  47. Triggering Action from Nativeclass Stopwatch: public QObject Stopwatch::Stopwatch(QObject *parent){ : QObject(parent) Q_OBJECT , m_index(0) {public: QTimer *timer = new QTimer(this); Stopwatch(QObject *parent = timer->setInterval(1000);0); connect(timer, SIGNAL(timeout()), SLOT(update())); timer->start();signals: } void tick(int t); void Stopwatch::update()private slots: { void update(); emit tick(m_index++); }private: int m_index;}; 08/29/11 47
  48. Triggering Action from Native instance of Stopwatch object signal <script> Stopwatch.tick.connect(function(t) { document.getElementById(tick).innerText = t; }); </script> 08/29/11 48
  49. Coming Back to Native QVariant QWebFrame::evaluateJavaScript(QString) mostly key-value pair (like JavaScript objects) 08/29/11 49
  50. Platform Integration Menu and Menu Bar Dialogs Application System Access Notifications 08/29/11 50
  51. Debuggingsettings()->setAttribute(QWebSettings::DeveloperExtrasEnabled, true); 08/29/11 51
  52. Consume Web 2.0 http://labs.qt.nokia.com/2009/03/08/creating-a-google-chat-client-in-15-minutes/ 08/29/11 52
  53. http://bit.ly/x2-codemirrorCode Editor 08/29/11 53
  54. http://bit.ly/x2-foldervisFolder Visualization 08/29/11 54
  55. GPU Acceleration 08/29/11 55
  56. Game vs Web 08/29/11 56
  57. Primitive Drawing 08/29/11 57
  58. Backing Store when you pinch... 08/29/11 58
  59. Layer Compositing 08/29/11 59
  60. Logical 3-D smooth animation FTW! 08/29/11 60
  61. Conclusions Web technologies are moving really fast Various frameworks and libraries boost the productivity Hybrid approach helps the migration Tools need to catch-up 08/29/11 61
  62. THANK YOU! ariya.hidayat@gmail.com ariya.ofilabs.com @ariyahidayat 08/29/11 62

×