Your SlideShare is downloading. ×
0
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)

8,713

Published on

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

No Downloads
Views
Total Views
8,713
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
146
Comments
0
Likes
14
Embeds 0
No embeds

No notes for slide

Transcript of "Build HTML5 App (Intel Elements 2011)"

  1. 1. Building HTML5 AppsAriya Hidayat, Sencha
  2. 2. 08/29/112
  3. 3. Building HTML5 App Ariya HidayatEngineering Director 08/29/11 3
  4. 4. whoami 08/29/11 4
  5. 5. 1Pure web apps (run in the browser)Hybrid solution (delivered as native apps) 2 08/29/11 5
  6. 6. Pure Web Apps 08/29/11 6
  7. 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. 8. “Too many phones will kill you...” 08/29/11 8
  9. 9. Supported PlatformsDesktop Mobile 08/29/11 9
  10. 10. Adoption 08/29/11 10
  11. 11. Amazon Kindle Cloud Reader 08/29/11 11
  12. 12. Financial Times 08/29/11 12
  13. 13. JavaScript: Ubiquitous Programming Environment 08/29/11 13
  14. 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. 15. Libraries and Frameworks 08/29/11 15
  16. 16. Offline Support Application Cache Local Storage 08/29/11 16
  17. 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. 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. 19. Local Storage ~ 5 MB localStorage.setItem(‘foo’, ‘bar’); localStorage.getItem(‘foo’); localStorage.removeItem(‘foo’); localStorage.clear(); 08/29/11 19
  20. 20. CSS3 Animation http://mozillademos.org/demos/planetarium/demo.html 08/29/11 20
  21. 21. Canvas for Visualization JavaScript InfoVis Toolkit http://thejit.org/ 08/29/11 21
  22. 22. Canvas for Games http://ariya.blogspot.com/2010/09/inv ade-destroy.html 08/29/11 22
  23. 23. Pixel Manipulations http://ariya.github.com/canvas/crossfading/ 08/29/11 23
  24. 24. Vector Graphics http://raphaeljs.com/polar-clock.html 08/29/11 24
  25. 25. WebGL for 3-Dhttp://webglsamples.googlecode.com/hg/aquarium/aquarium.html 08/29/11 25
  26. 26. WebGL for Visualization http://senchalabs.github.com/philogl/ 08/29/11 26
  27. 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. 28. Hybrid Native + Web 08/29/11 28
  29. 29. Going Hybrid? Platform Integration Security Advanced Technologies App Store/ Marketplace 08/29/11 29
  30. 30. Real-world Hybrid Apps Ext Designer Sencha Animator 08/29/11 30
  31. 31. WebKit Everywhere Browser Devices Runtime 08/29/11 31
  32. 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. 33. Components of WebKit DOM CSS WebCore SVG HTML rendering JavaScriptCore WebKit Library 08/29/11 33
  34. 34. Platform Abstraction Network Unicode Clipboard Graphics Theme Events Thread Geolocation Timer 08/29/11 34
  35. 35. WebCoreDifferent “Ports” graphicsGraphicsContext Mac Chromium Qt Gtk Skia Cairo CoreGraphics QPainter graphics stack 08/29/11 35
  36. 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. 37. Using QWebView QWebView webView; webView.show(); webView.setUrl(QUrl("http://meego.com")); 08/29/11 37
  38. 38. Contents via String QWebView webView; webView.show(); webView.setContent("<body>Hello, MeeGo!</body>"); 08/29/11 38
  39. 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. 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. 41. SVG Rasterizer http://labs.qt.nokia.com/2008/08/06/webkit-based-svg-rasterizer/ 08/29/11 41
  42. 42. Search + Preview http://labs.qt.nokia.com/2008/11/04/search-with-thumbnail-preview/ 08/29/11 42
  43. 43. Exposing to the Web World QWebFrame::addToJavaScriptWindowObject(QString, QObject*) Public functions Object properties Child objects 08/29/11 43
  44. 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. 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. 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. 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. 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. 49. Coming Back to Native QVariant QWebFrame::evaluateJavaScript(QString) mostly key-value pair (like JavaScript objects) 08/29/11 49
  50. 50. Platform Integration Menu and Menu Bar Dialogs Application System Access Notifications 08/29/11 50
  51. 51. Debuggingsettings()->setAttribute(QWebSettings::DeveloperExtrasEnabled, true); 08/29/11 51
  52. 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. 53. http://bit.ly/x2-codemirrorCode Editor 08/29/11 53
  54. 54. http://bit.ly/x2-foldervisFolder Visualization 08/29/11 54
  55. 55. GPU Acceleration 08/29/11 55
  56. 56. Game vs Web 08/29/11 56
  57. 57. Primitive Drawing 08/29/11 57
  58. 58. Backing Store when you pinch... 08/29/11 58
  59. 59. Layer Compositing 08/29/11 59
  60. 60. Logical 3-D smooth animation FTW! 08/29/11 60
  61. 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. 62. THANK YOU! ariya.hidayat@gmail.com ariya.ofilabs.com @ariyahidayat 08/29/11 62
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×