View
8.596
Download
1
Category
Preview:
Citation preview
Building HTML5 AppsAriya Hidayat, Sencha
08/29/112
08/29/11
Building HTML5 App
Ariya HidayatEngineering Director
3
08/29/11
whoami
4
08/29/115
1
Pure web apps (run in the browser)
2
Hybrid solution (delivered as native apps)
08/29/11
Pure Web Apps
6
08/29/11
Common Myths
7
Only works offline
Slow Does not use GPU acceleration
Only JavaScriptTedious to code
Manual layout of appsNo GUI designer
Can’t do fluid animation Not crossplatform
08/29/11
“Too many phones will kill you...”
8
08/29/11
Supported Platforms
9
Desktop
Mobile
08/29/11
Adoption
10
08/29/11
Amazon Kindle Cloud Reader
11
08/29/11
Financial Times
12
08/29/11
JavaScript: Ubiquitous Programming Environment
13
08/29/11
Need for Speed
14
Internet Explorer 8Google Chrome 13
Firefox 6 0.41 seconds
0.44 seconds
7.43 seconds
SunSpider 0.9.1
08/29/11
Libraries and Frameworks
15
08/29/11
Offline Support
16
Application CacheLocal Storage
08/29/11
Application Cache
17
<html manifest=”foobar.appcache”>...</html>
CACHE MANIFEST# version 42
CACHE:style.csslogic.jsimages/logo.png
NETWORK:http://api.example.comlogin/
FALLBACK:*.html offline.html
08/29/11
Application Cache
18
offline online
CACHE use cache update
NETWORK can’t use use remote
FALLBACK use fallback use remote
08/29/11
Local Storage
19
localStorage.setItem(‘foo’, ‘bar’);
localStorage.getItem(‘foo’);
localStorage.removeItem(‘foo’);
localStorage.clear();
~ 5 MB
08/29/11
CSS3 Animation
20
http://mozillademos.org/demos/planetarium/demo.html
08/29/11
Canvas for Visualization
21
http://thejit.org/JavaScript InfoVis Toolkit
08/29/11
Canvas for Games
22
http://ariya.blogspot.com/2010/09/invade-destroy.html
08/29/11
Pixel Manipulations
23
http://ariya.github.com/canvas/crossfading/
08/29/11
Vector Graphics
24
http://raphaeljs.com/polar-clock.html
08/29/11
WebGL for 3-D
25
http://webglsamples.googlecode.com/hg/aquarium/aquarium.html
08/29/11
WebGL for Visualization
26
http://senchalabs.github.com/philogl/
08/29/11
Which is for what?
27
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
Hybrid Native + Web
28
08/29/11
Going Hybrid?
29
Security
Advanced Technologies App Store/ Marketplace
Platform Integration
08/29/11
Real-world Hybrid Apps
30
Sencha AnimatorExt Designer
08/29/1131
WebKit Everywhere
Browser
Devices
Runtime
08/29/11
History
32
0
20000
40000
60000
80000
100000
0 1 2 3 4 5 6 7 8 9 10
Rev
isio
ns
Years
~2000 commits/month
08/29/11
Components of WebKit
33
WebKit Library
JavaScriptCore
WebCore
HTMLrendering
SVG
DOM CSS
08/29/11
Platform Abstraction
34
Network Unicode Clipboard
Graphics Theme Events
Thread Geolocation Timer
08/29/11
Different “Ports”
35
WebCore graphics
Mac Chromium Qt Gtk
CoreGraphics
Skia
QPainter
Cairo
graphics stack
GraphicsContext
08/29/11
QWeb* classes
36
QWebView (widget)
QWebPage (object)
QWebFrame (object)
At least one, i.e. the main frame of the page
08/29/11
Using QWebView
37
QWebView webView;webView.show();webView.setUrl(QUrl("http://meego.com"));
08/29/11
Contents via String
38
QWebView webView;webView.show();webView.setContent("<body>Hello, MeeGo!</body>");
08/29/11
Contents via Resource
39
QWebView webView;webView.show();webView.setUrl(QUrl("qrc:/content.html"));
<RCC> <qresource prefix="/"> <file>content.html</file> </qresource></RCC>
08/29/11
Capture to Image
40
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
SVG Rasterizer
41
http://labs.qt.nokia.com/2008/08/06/webkit-based-svg-rasterizer/
08/29/11
Search + Preview
42
http://labs.qt.nokia.com/2008/11/04/search-with-thumbnail-preview/
08/29/11
Exposing to the Web World
43
QWebFrame::addToJavaScriptWindowObject(QString, QObject*)
Public functionsObject properties
Child objects
08/29/11
Exposing to the Web World
44
class Dialog: public QObject{ Q_OBJECT
public: Dialog(QObject *parent = 0);
public slots: void showMessage(const QString& msg);};
page()->mainFrame()->addToJavaScriptWindowObject("Dialog", new Dialog);
08/29/11
Exposing to the Web World
45
<input type="button" value="Try this" onClick="Dialog.showMessage('You clicked me!')">
instance of Dialog object public slot
08/29/11
Signal and Slot
46
foobar.modified.connect(refresh);
QObject instance JavaScript function
signal
foobar.modified.connect(obj, refresh);
any object
08/29/11
Triggering Action from Native
47
class Stopwatch: public QObject{ Q_OBJECT
public: Stopwatch(QObject *parent = 0);
signals: void tick(int t);
private slots: void update();
private: int m_index;};
Stopwatch::Stopwatch(QObject *parent) : QObject(parent) , m_index(0){ QTimer *timer = new QTimer(this); timer->setInterval(1000); connect(timer, SIGNAL(timeout()), SLOT(update())); timer->start();}
void Stopwatch::update(){ emit tick(m_index++);}
08/29/11
Triggering Action from Native
48
<script>Stopwatch.tick.connect(function(t) { document.getElementById('tick').innerText = t;});</script>
instance of Stopwatch object
signal
08/29/11
Coming Back to Native
49
QVariant QWebFrame::evaluateJavaScript(QString)
mostly key-value pair(like JavaScript objects)
08/29/11
Platform Integration
50
Application
Menu and Menu Bar
Dialogs
Notifications
System Access
08/29/11
Debugging
51
settings()->setAttribute(QWebSettings::DeveloperExtrasEnabled, true);
08/29/11
Consume Web 2.0
52
http://labs.qt.nokia.com/2009/03/08/creating-a-google-chat-client-in-15-minutes/
08/29/11
Code Editor
53
http://bit.ly/x2-codemirror
08/29/11
Folder Visualization
54
http://bit.ly/x2-foldervis
08/29/11
GPU Acceleration
55
08/29/11
Game vs Web
56
08/29/11
Primitive Drawing
57
08/29/11
Backing Store
58
when you pinch...
08/29/11
Layer Compositing
59
08/29/11
Logical 3-D
60
smooth animation FTW!
08/29/11
Conclusions
Web technologies are moving really fast
Various frameworks and libraries boost the productivity
Hybrid approach helps the migration
Tools need to catch-up
61
08/29/11
THANK YOU!
62
ariya.hidayat@gmail.com
@ariyahidayat
ariya.ofilabs.com
Recommended