Build HTML5 App (Intel Elements 2011)

Building HTML5 Apps
Ariya Hidayat, Sencha

Building HTML5 App

Ariya Hidayat
Engineering Director

08/29/11
3

1
Pure 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 Platforms

Desktop

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

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

http://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

60000
Revisions

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

WebCore
Different “Ports” graphics

GraphicsContext 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


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


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

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

Debugging

settings()->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-codemirror
Code Editor

08/29/11
53

http://bit.ly/x2-foldervis
Folder 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

Build HTML5 App (Intel Elements 2011)

Build HTML5 App (Intel Elements 2011)

Recommended

More Related Content

What's hot

What's hot(20)

Similar to Build HTML5 App (Intel Elements 2011)

Similar to Build HTML5 App (Intel Elements 2011)(20)

More from Ariya Hidayat

More from Ariya Hidayat(7)

Recently uploaded

Recently uploaded(20)

Build HTML5 App (Intel Elements 2011)