SlideShare a Scribd company logo

Build HTML5 App (Intel Elements 2011)

•
•
Ariya Hidayat
Ariya Hidayat

The document discusses building HTML5 apps. It describes pure web apps that run in browsers and hybrid solutions delivered as native apps. It addresses common myths about HTML5 and covers supported platforms and libraries. It also discusses offline support using application cache and local storage, animation using CSS3 and Canvas, and advanced techniques like WebGL. The document concludes that web technologies are advancing rapidly and hybrid approaches can help migration, though tools still need improvements.

1 of 62
Downloaded 150 times
Building HTML5 Apps Ariya Hidayat, Sencha
08/29/11 2
Building HTML5 App Ariya Hidayat Engineering Director 08/29/11 3
whoami 08/29/11 4
1 Pure web apps (run in the browser) Hybrid solution (delivered as native apps) 2 08/29/11 5
Pure Web Apps 08/29/11 6
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
“Too many phones will kill you...” 08/29/11 8
Supported Platforms Desktop 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 13
Need for Speed SunSpider 0.9.1 Internet Explorer 8 7.43 seconds Google Chrome 13 0.44 seconds Firefox 6 0.41 seconds 08/29/11 14
Libraries and Frameworks 08/29/11 15
Offline Support Application Cache Local Storage 08/29/11 16
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
Application Cache offline online CACHE use cache update NETWORK can’t use use remote FALLBACK use fallback use remote 08/29/11 18
Local Storage ~ 5 MB localStorage.setItem(‘foo’, ‘bar’); localStorage.getItem(‘foo’); localStorage.removeItem(‘foo’); localStorage.clear(); 08/29/11 19
CSS3 Animation http://mozillademos.org/demos/planetarium/demo.html 08/29/11 20
Canvas for Visualization JavaScript InfoVis Toolkit http://thejit.org/ 08/29/11 21
Canvas for Games http://ariya.blogspot.com/2010/09/inv ade-destroy.html 08/29/11 22
Pixel Manipulations http://ariya.github.com/canvas/crossfading/ 08/29/11 23
Vector Graphics http://raphaeljs.com/polar-clock.html 08/29/11 24
WebGL for 3-D http://webglsamples.googlecode.com/hg/aquarium/aquarium.html 08/29/11 25
WebGL for Visualization http://senchalabs.github.com/philogl/ 08/29/11 26
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
Hybrid Native + Web 08/29/11 28
Going Hybrid? Platform Integration Security Advanced Technologies App Store/ Marketplace 08/29/11 29
Real-world Hybrid Apps Ext Designer Sencha Animator 08/29/11 30
WebKit Everywhere Browser Devices Runtime 08/29/11 31
~2000 commits/month History 100000 80000 60000 Revisions 40000 20000 0 0 1 2 3 4 5 6 7 8 9 10 Years 08/29/11 32
Components of WebKit DOM CSS WebCore SVG HTML rendering JavaScriptCore WebKit Library 08/29/11 33
Platform Abstraction Network Unicode Clipboard Graphics Theme Events Thread Geolocation Timer 08/29/11 34
WebCore Different “Ports” graphics GraphicsContext Mac Chromium Qt Gtk Skia Cairo CoreGraphics QPainter graphics stack 08/29/11 35
QWeb* classes QWebView (widget) QWebPage (object) QWebFrame (object) At least one, i.e. the main frame of the page 08/29/11 36
Using QWebView QWebView webView; webView.show(); webView.setUrl(QUrl("http://meego.com")); 08/29/11 37
Contents via String QWebView webView; webView.show(); webView.setContent("<body>Hello, MeeGo!</body>"); 08/29/11 38
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
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
SVG Rasterizer http://labs.qt.nokia.com/2008/08/06/webkit-based-svg-rasterizer/ 08/29/11 41
Search + Preview http://labs.qt.nokia.com/2008/11/04/search-with-thumbnail-preview/ 08/29/11 42
Exposing to the Web World QWebFrame::addToJavaScriptWindowObject(QString, QObject*) Public functions Object properties Child objects 08/29/11 43
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); }; 08/29/11 44
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
Signal and Slot signal foobar.modified.connect(refresh); QObject instance JavaScript function foobar.modified.connect(obj, refresh); any object 08/29/11 46
Triggering Action from Native class 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
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
Coming Back to Native QVariant QWebFrame::evaluateJavaScript(QString) mostly key-value pair (like JavaScript objects) 08/29/11 49
Platform Integration Menu and Menu Bar Dialogs Application System Access Notifications 08/29/11 50
Debugging settings()->setAttribute(QWebSettings::DeveloperExtrasEnabled, true); 08/29/11 51
Consume Web 2.0 http://labs.qt.nokia.com/2009/03/08/creating-a-google-chat-client-in-15-minutes/ 08/29/11 52
http://bit.ly/x2-codemirror Code Editor 08/29/11 53
http://bit.ly/x2-foldervis Folder Visualization 08/29/11 54
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 60
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
THANK YOU! ariya.hidayat@gmail.com ariya.ofilabs.com @ariyahidayat 08/29/11 62

More Related Content

Build HTML5 App (Intel Elements 2011)

  • 1. Building HTML5 Apps Ariya Hidayat, Sencha
  • 3. Building HTML5 App Ariya Hidayat Engineering Director 08/29/11 3
  • 4. whoami 08/29/11 4
  • 5. 1 Pure 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
  • 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.1 Internet Explorer 8 7.43 seconds Google Chrome 13 0.44 seconds Firefox 6 0.41 seconds 08/29/11 14
  • 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
  • 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 60000 Revisions 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. WebCore Different “Ports” graphics GraphicsContext 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 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); }; 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 Native class 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
  • 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
  • 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