Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Building HTML5 AppsAriya Hidayat, Sencha
08/29/112
Building HTML5 App Ariya HidayatEngineering Director 08/29/11 3
whoami 08/29/11 4
1Pure web apps (run in the browser)Hybrid solution (delivered as native apps) 2 ...
Pure Web Apps 08/29/11 6
Common Myths Slow Does not use GPU acceleration Only works offline Ma...
“Too many phones will kill you...” 08/29/11 8
Supported PlatformsDesktop Mobile 08/29/11 9
Adoption 08/29/11 10
Amazon Kindle Cloud Reader 08/29/11 11
Financial Times 08/29/11 12
JavaScript: Ubiquitous Programming Environment 08/29/11 ...
Need for Speed SunSpider 0.9.1Internet Explorer 8 7.43 se...
Libraries and Frameworks 08/29/11 15
Offline Support Application Cache Local Storage 08/29/11 ...
Application Cache CACHE MANIFEST # version 42 ...
Application Cache offline online CACHE use cache update NETWORK ...
Local Storage ~ 5 MB localStorage.setItem(‘foo’, ‘bar’); localStorage.getItem(‘foo’...
CSS3 Animation http://mozillademos.org/demos/planetarium/demo.html ...
Canvas for Visualization JavaScript InfoVis Toolkit http://thejit.org/ ...
Canvas for Games http://ariya.blogspot.com/2010/09/inv ade-destroy.html ...
Pixel Manipulations http://ariya.github.com/canvas/crossfading/ ...
Vector Graphics http://raphaeljs.com/polar-clock.html ...
WebGL for 3-Dhttp://webglsamples.googlecode.com/hg/aquarium/aquarium.html ...
WebGL for Visualization http://senchalabs.github.com/philogl/ ...
Which is for what? CSS3 Canvas SVG WebGL Animation of UI elements ✔ 2-...
Hybrid Native + Web 08/29/11 28
Going Hybrid? Platform Integration Security Advanced Technologies App Store/ Ma...
Real-world Hybrid Apps Ext Designer Sencha Animator 08/29/11 ...
WebKit Everywhere Browser Devices Runtime 08/29/11 31
~2000 commits/month History 100000 80000 60000Revisions 40000 20...
Components of WebKit DOM CSS WebCore SVG HTML re...
Platform Abstraction Network Unicode Clipboard Graphics Theme Events Thre...
WebCoreDifferent “Ports” graphicsGraphicsContext Mac Chromium Qt ...
QWeb* classes QWebView (widget) QWebPage (object) QWebFrame (object) ...
Using QWebView 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 Image QWebPage page; QImage image(size, QImage::Format_ARGB32_Premultiplied); image.fill(Qt::...
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/ ...
Exposing to the Web World QWebFrame::addToJavaScriptWindowObject(QString, QObject*) Publ...
Exposing to the Web Worldpage()->mainFrame()->addToJavaScriptWindowObject("Dialog", new Dialog); class Di...
Exposing to the Web World <input type="button" value="Try this" onClick="Dialog.showMessage(You clicked me!)"> ...
Signal and Slot signal foobar.modified.connect(refresh); QObject instance JavaScript f...
Triggering Action from Nativeclass Stopwatch: public QObject Stopwatch::Stopwatch(QObject *parent){ ...
Triggering Action from Native instance of Stopwatch object signal <script> ...
Coming Back to Native QVariant QWebFrame::evaluateJavaScript(QString) mostly key-value pair (like JavaS...
Platform Integration Menu and Menu Bar Dialogs ...
Debuggingsettings()->setAttribute(QWebSettings::DeveloperExtrasEnabled, true); ...
Consume Web 2.0 http://labs.qt.nokia.com/2009/03/08/creating-a-google-chat-client-in-15-minutes/ ...
http://bit.ly/x2-codemirrorCode Editor 08/29/11 53
http://bit.ly/x2-foldervisFolder Visualization 08/29/11 ...
GPU Acceleration 08/29/11 55
Game vs Web 08/29/11 56
Primitive Drawing 08/29/11 57
Backing Store when you pinch... 08/29/11 58
Layer Compositing 08/29/11 59
Logical 3-D smooth animation FTW! 08/29/11 ...
Conclusions Web technologies are moving really fast Various frameworks and libraries boost the producti...
THANK YOU! ariya.hidayat@gmail.com ariya.ofilabs.com @ariyahidayat ...
Upcoming SlideShare
Loading in …5
×

Build HTML5 App (Intel Elements 2011)

16,598 views

Published on

Published in: Technology, Design
no profile picture user

  • Be the first to comment

Show More

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

×