Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Semelhante a Build HTML5 App (Intel Elements 2011)
Semelhante a Build HTML5 App (Intel Elements 2011) (20)
Mais de Ariya Hidayat
Último
Último (20)
Build HTML5 App (Intel Elements 2011)
- 1. Building HTML5 Apps Ariya Hidayat, Sencha
- 2. 08/29/11 2
- 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
- 9. Supported Platforms Desktop 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.1 Internet 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
- 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
- 53. http://bit.ly/x2-codemirror Code Editor 08/29/11 53
- 54. http://bit.ly/x2-foldervis Folder 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