Intel AppUp Elements 2011 Talent and Ideas

Arya MirInternet and Web Development

Oct 11, 2011 (6 years and 1 month ago)

798 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