Your SlideShare is downloading. ×
0
Elements2011 html5-app-110928141627-phpapp01
Elements2011 html5-app-110928141627-phpapp01
Elements2011 html5-app-110928141627-phpapp01
Elements2011 html5-app-110928141627-phpapp01
Elements2011 html5-app-110928141627-phpapp01
Elements2011 html5-app-110928141627-phpapp01
Elements2011 html5-app-110928141627-phpapp01
Elements2011 html5-app-110928141627-phpapp01
Elements2011 html5-app-110928141627-phpapp01
Elements2011 html5-app-110928141627-phpapp01
Elements2011 html5-app-110928141627-phpapp01
Elements2011 html5-app-110928141627-phpapp01
Elements2011 html5-app-110928141627-phpapp01
Elements2011 html5-app-110928141627-phpapp01
Elements2011 html5-app-110928141627-phpapp01
Elements2011 html5-app-110928141627-phpapp01
Elements2011 html5-app-110928141627-phpapp01
Elements2011 html5-app-110928141627-phpapp01
Elements2011 html5-app-110928141627-phpapp01
Elements2011 html5-app-110928141627-phpapp01
Elements2011 html5-app-110928141627-phpapp01
Elements2011 html5-app-110928141627-phpapp01
Elements2011 html5-app-110928141627-phpapp01
Elements2011 html5-app-110928141627-phpapp01
Elements2011 html5-app-110928141627-phpapp01
Elements2011 html5-app-110928141627-phpapp01
Elements2011 html5-app-110928141627-phpapp01
Elements2011 html5-app-110928141627-phpapp01
Elements2011 html5-app-110928141627-phpapp01
Elements2011 html5-app-110928141627-phpapp01
Elements2011 html5-app-110928141627-phpapp01
Elements2011 html5-app-110928141627-phpapp01
Elements2011 html5-app-110928141627-phpapp01
Elements2011 html5-app-110928141627-phpapp01
Elements2011 html5-app-110928141627-phpapp01
Elements2011 html5-app-110928141627-phpapp01
Elements2011 html5-app-110928141627-phpapp01
Elements2011 html5-app-110928141627-phpapp01
Elements2011 html5-app-110928141627-phpapp01
Elements2011 html5-app-110928141627-phpapp01
Elements2011 html5-app-110928141627-phpapp01
Elements2011 html5-app-110928141627-phpapp01
Elements2011 html5-app-110928141627-phpapp01
Elements2011 html5-app-110928141627-phpapp01
Elements2011 html5-app-110928141627-phpapp01
Elements2011 html5-app-110928141627-phpapp01
Elements2011 html5-app-110928141627-phpapp01
Elements2011 html5-app-110928141627-phpapp01
Elements2011 html5-app-110928141627-phpapp01
Elements2011 html5-app-110928141627-phpapp01
Elements2011 html5-app-110928141627-phpapp01
Elements2011 html5-app-110928141627-phpapp01
Elements2011 html5-app-110928141627-phpapp01
Elements2011 html5-app-110928141627-phpapp01
Elements2011 html5-app-110928141627-phpapp01
Elements2011 html5-app-110928141627-phpapp01
Elements2011 html5-app-110928141627-phpapp01
Elements2011 html5-app-110928141627-phpapp01
Elements2011 html5-app-110928141627-phpapp01
Elements2011 html5-app-110928141627-phpapp01
Elements2011 html5-app-110928141627-phpapp01
Elements2011 html5-app-110928141627-phpapp01
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Elements2011 html5-app-110928141627-phpapp01

233

Published on

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

  • Be the first to like this

No Downloads
Views
Total Views
233
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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

×