Build HTML5 App (Intel Elements 2011)

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 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 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 13

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

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-Dhttp://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 60000Revisions 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

WebCoreDifferent “Ports” graphicsGraphicsContext 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 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

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 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

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 Notiﬁcations 08/29/11 50

Debuggingsettings()->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-codemirrorCode Editor 08/29/11 53

http://bit.ly/x2-foldervisFolder 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.oﬁlabs.com @ariyahidayat 08/29/11 62

http://www.meegoexperts.com	165
http://paper.li	82
http://www.tizenexperts.com	81
http://growvc.localhost:8080	24
http://hitso.dev	15
http://devry-prodtest.sophiaapp.com	13
http://us-w1.rockmelt.com	10
http://feeds.feedburner.com	8
http://a0.twimg.com	8
http://nuevospowerpoints.blogspot.com	7
http://blogs.unpad.ac.id	7
http://prodtest.sophiaapp.com	7
http://prodtest.sophiaapp.com	7
http://www.odkryj.imas.pl	7
http://blogs.unpad.ac.id	7
http://www.techgig.com	4
http://hitso.dev.autentika.pl	3
http://local.vivastream.com	2
http://shop.strato.de	2
http://drizzlin.com	2
http://twitter.com	1
http://tube.deldig.com	1
http://bicarait.tumblr.com	1
http://ashtergroup.blogspot.com	1
http://embed.ly	1
http://www.slideshare.net	1
http://admin.hitso.dev	1
http://www.onlydoo.com	1
http://mundo-powerpoints.blogspot.com	1
https://twitter.com	1

Build HTML5 App (Intel Elements 2011)

by Ariya Hidayat on Sep 28, 2011

Accessibility

Categories

Upload Details

Usage Rights

30 Embeds 471

Statistics

Build HTML5 App (Intel Elements 2011) Presentation Transcript