Intel AppUp Elements 2011 Talent and Ideas

Arya MirInternet and Web Development

Oct 11, 2011 (5 years and 10 months ago)

788 views

Building HTML5 Apps Ariya Hidayat, Sencha

Building HTML5 Apps
Ariya Hidayat, Sencha
08/29/11
2
08/29/11
Building HTML5 App
Ariya Hidayat
Engineering Director
3
08/29/11
whoami
4
08/29/11
5
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 JavaScript
Tedious to code
Manual layout of apps
No 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 8
Google 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 Cache
Local Storage
08/29/11
Application Cache
17
<html
manifest
=”
foobar.appcache
”>
...
</html>
CACHE MANIFEST
# version 42
CACHE
:
style.css
logic.js
images/logo.png
NETWORK
:
http://api.example.com
login/
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 Animator
Ext Designer
08/29/11
31
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
Revisions
Years
~2000 commits/month
08/29/11
Components of WebKit
33
WebKit Library
JavaScriptCore
WebCore
HTML
rendering
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 functions
Object 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