The Next Evolution of Chrome Apps - Devoxx 2012

ME
DEVELOPER ADVOCATE AT GOOGLE
@Paul Kinlan

View Slide

NEXT EVOLUTION OF
CHROME APPS
DEVOXX 2012
By @Paul Kinlan

View Slide

I HEARD THIS ON A TRAIN
“Oh I don't use apps on the web, I just use it for news and
wikipedia” — Some guy

View Slide

AVAILABILITY
“Availability - noun: The act of being awesome all the time.”
— Kinsters Compendium of Wordage

View Slide

WHY OFFLINE?
1. Mobile?
2. Responsiveness?
Be there when your users need you.

View Slide

EXPERIMENT WITH OFFLINE APPS
Top 50(ish) apps on iOS and Android
Downloaded App
Pulled the plug
Loaded app

View Slide

View Slide

SAME EXPERIMENT WITH OFFLINE WEB
APPS

View Slide

MOST APPS

View Slide

THE EXCEPTION

View Slide

SUMMARY
Native Apps win hands down
Lots works brilliantly offline, no online requirement.
Many load and offer UI with cached content but needs
web for more information.
Many games loads and then download even more data.
Minority of apps fail to load.
The user is kept inside the app experience

View Slide

WEB DEVELOPERS ARE FROM VENUS
“I will add offline support into my app” — A Web Dev
“I will add online support into my app” — An App Dev

View Slide

WARNING
OFFLINE APPS ARE A PARADIGM SHIFT
FOR WEB DEVELOPERS
THE WEB IS A HODGE-PODGE OF API'S THAT DON'T QUITE
WORK TOGETHER

View Slide

APPCACHE
If you want to have any offline experience at all, you have
to use it.

View Slide

View Slide

STORAGE?
If you want to have any offline storage at all, you have to
use both indexedDB and WebSQL.
Note: The versioning API just changed :\

View Slide

CHROME APPS
A NEW PLATFORM

View Slide

WHY?!?!

View Slide

APPS SHOULD BE OFFLINE BY DEFAULT
Apps should load regardless of connection.

View Slide

APPS SHOULD LOOK AND FEEL NATIVE

View Slide

APPS SHOULD BE ABLE ACCESS TO NATIVE
API'S
Network Sockets
Serial Ports
USB and Bluetooth
File System
Media Galleries

View Slide

APPS SHOULD BE SECURE BY DEFAULT
CSP FTW!
# B
l
o
c
k e
v
e
r
y
t
h
i
n
g
, t
h
e
n w
h
i
t
e
l
i
s
t f
r
o
m t
h
e
r
e
.
d
e
f
a
u
l
t
-
s
r
c '
n
o
n
e
'
;
# A
c
c
e
p
t C
S
S f
r
o
m t
h
e e
x
t
e
n
s
i
o
n
'
s p
a
c
k
a
g
e
.
s
t
y
l
e
-
s
r
c '
s
e
l
f
'
;
# A
c
c
e
p
t J
a
v
a
S
c
r
i
p
t f
r
o
m t
h
e e
x
t
e
n
s
i
o
n
'
s p
a
c
k
a
g
e
.
s
c
r
i
p
t
-
s
r
c '
s
e
l
f
'
;
# A
l
l
o
w i
m
a
g
e
s f
r
o
m G
o
o
g
l
e M
a
p
s t
o l
o
a
d o
v
e
r H
T
T
P
S
.
i
m
g
-
s
r
c h
t
t
p
s
:
/
/
m
a
p
s
.
g
o
o
g
l
e
.
c
o
m
;
a
l
e
r
t
(
e
v
a
l
(
"
f
o
o
.
b
a
r
.
b
a
z
"
)
)
;
w
i
n
d
o
w
.
s
e
t
T
i
m
e
o
u
t
(
"
a
l
e
r
t
(
'
h
i
'
)
"
, 1
0
)
;
w
i
n
d
o
w
.
s
e
t
I
n
t
e
r
a
l
(
"
a
l
e
r
t
(
'
h
i
'
)
"
, 1
0
)
;
n
e
w F
u
n
c
t
i
o
n
(
"
r
e
t
u
r
n f
o
o
.
b
a
r
.
b
a
z
"
)
;

View Slide

FINALLY. APPS SHOULD BE BUILT USING
TECHNOLOGY THAT WE KNOW AND LOVE
HTML
CSS
JAVASCRIPT

View Slide

ACCESS TO HARDWARE
NETWORK SOCKETS
WEB SERVER IN THE
BROWSER

View Slide

IT'S JUST A SOCKET
v
a
r s
o
c
k
e
t = c
h
r
o
m
e
.
s
o
c
k
e
t
;
s
o
c
k
e
t
.
c
r
e
a
t
e
(
"
t
c
p
"
, {
}
, f
u
n
c
t
i
o
n
(
_
s
o
c
k
e
t
I
n
f
o
) {
s
o
c
k
e
t
I
n
f
o = _
s
o
c
k
e
t
I
n
f
o
; /
/ C
a
c
h
e g
l
o
b
a
l
l
y [
e
e
k
]
s
o
c
k
e
t
.
l
i
s
t
e
n
(
s
o
c
k
e
t
I
n
f
o
.
s
o
c
k
e
t
I
d
, "
1
2
7
.
0
.
0
.
1
"
, 8
0
8
0
, 2
0
, f
u
n
c
t
i
o
n
(
r
e
s
u
l
t
) {
/
/
A
c
c
e
p
t t
h
e f
i
r
s
t r
e
s
p
o
n
s
e
s
o
c
k
e
t
.
a
c
c
e
p
t
(
s
o
c
k
e
t
I
n
f
o
.
s
o
c
k
e
t
I
d
, o
n
A
c
c
e
p
t
)
;
}
)
;
}
)
;

View Slide

BUT THERE IS A LOT OF CODE
v
a
r o
n
A
c
c
e
p
t = f
u
n
c
t
i
o
n
(
a
c
c
e
p
t
I
n
f
o
) {
/
/ T
h
i
s i
s a r
e
q
u
e
s
t t
h
a
t t
h
e s
y
s
t
e
m i
s p
r
o
c
e
s
s
i
n
g
.
/
/ R
e
a
d t
h
e d
a
t
a
.
s
o
c
k
e
t
.
r
e
a
d
(
a
c
c
e
p
t
I
n
f
o
.
s
o
c
k
e
t
I
d
, f
u
n
c
t
i
o
n
(
r
e
a
d
I
n
f
o
) {
/
/ P
a
r
s
e t
h
e r
e
q
u
e
s
t
.
v
a
r d
a
t
a = a
r
r
a
y
B
u
f
f
e
r
T
o
S
t
r
i
n
g
(
r
e
a
d
I
n
f
o
.
d
a
t
a
)
;
/
/ W
e o
n
l
y w
a
n
t t
o h
a
n
d
l
e g
e
t r
e
q
u
e
s
t
s
i
f
(
d
a
t
a
.
i
n
d
e
x
O
f
(
"
G
E
T "
) =
= 0
) {
/
/ w
e c
a
n o
n
l
y d
e
a
l w
i
t
h G
E
T r
e
q
u
e
s
t
s
v
a
r u
r
i
E
n
d = d
a
t
a
.
i
n
d
e
x
O
f
(
" "
, 4
)
;
i
f
(
u
r
i
E
n
d < 0
) { /
* t
h
r
o
w a w
o
b
b
l
e
r *
/ r
e
t
u
r
n
; }
v
a
r u
r
i = d
a
t
a
.
s
u
b
s
t
r
i
n
g
(
4
, u
r
i
E
n
d
)
;
v
a
r f
i
l
e = f
i
l
e
s
M
a
p
[
u
r
i
]
; /
/ p
i
c
k o
u
t t
h
e f
i
l
e w
e w
a
n
t t
o s
e
r
v
e
r
i
f
(
!
!
f
i
l
e =
= f
a
l
s
e
) { /
* F
i
l
e d
o
e
s n
o
t e
x
i
s
t *
/ r
e
t
u
r
n
; }
w
r
i
t
e
2
0
0
R
e
s
p
o
n
s
e
(
a
c
c
e
p
t
I
n
f
o
.
s
o
c
k
e
t
I
d
, f
i
l
e
)
;
}
e
l
s
e {
/
/ T
h
r
o
w a
n e
r
r
o
r
s
o
c
k
e
t
.
d
e
s
t
r
o
y
(
a
c
c
e
p
t
I
n
f
o
.
s
o
c
k
e
t
I
d
)
;
/
/ W
e n
e
e
d t
o s
a
y t
h
a
t w
e c
a
n a
c
c
e
p
t a
n
o
t
h
e
r i
n
c
o
m
i
n
g r
e
q
u
e
s
t
.
s
o
c
k
e
t
.
a
c
c
e
p
t
(
s
o
c
k
e
t
I
n
f
o
.
s
o
c
k
e
t
I
d
, o
n
A
c
c
e
p
t
)
;
}
}
)
;
}
;

View Slide

CAN WE USE AN
EXISTING ECO-
SYSTEM?

View Slide

LIKE NODE?

View Slide

NODE API'S IN THE BROWSER
MARKDOWN
o
n
l
o
a
d = f
u
n
c
t
i
o
n
(
) {
v
a
r m
d
E
l = d
o
c
u
m
e
n
t
.
g
e
t
E
l
e
m
e
n
t
B
y
I
d
(
"
m
a
r
k
d
o
w
n
"
)
;
v
a
r h
t
m
l
E
l = d
o
c
u
m
e
n
t
.
g
e
t
E
l
e
m
e
n
t
B
y
I
d
(
"
h
t
m
l
"
)
;
v
a
r m
d = r
e
q
u
i
r
e
( "
m
a
r
k
d
o
w
n
" )
.
m
a
r
k
d
o
w
n
;
m
d
E
l
.
o
n
k
e
y
p
r
e
s
s = f
u
n
c
t
i
o
n
(
) {
v
a
r o
u
t
p
u
t = m
d
.
t
o
H
T
M
L
( m
d
E
l
.
v
a
l
u
e )
;
h
t
m
l
E
l
.
i
n
n
e
r
H
T
M
L = o
u
t
p
u
t
;
}
;
}
;
$ b
r
o
w
s
e
r
i
f
y -
r m
a
r
k
d
o
w
n -
o b
u
n
d
l
e
.
j
s

View Slide

NODE API'S IN THE BROWSER
BROWSERIFY + CHROME MAPPING = WIN
powered by
https://github.com/iceddev/http-chromify
Browserify Chrome
v
a
r h
t
t
p = r
e
q
u
i
r
e
(
'
h
t
t
p
'
)
;
h
t
t
p
.
c
r
e
a
t
e
S
e
r
v
e
r
(
f
u
n
c
t
i
o
n (
r
e
q
, r
e
s
) {
r
e
s
.
w
r
i
t
e
H
e
a
d
(
2
0
0
, {
'
C
o
n
t
e
n
t
-
T
y
p
e
'
: '
t
e
x
t
/
p
l
a
i
n
'
}
)
;
r
e
s
.
e
n
d
(
'
H
e
l
l
o W
o
r
l
d
\
n
'
)
;
}
)
.
l
i
s
t
e
n
(
1
3
3
7
, '
1
2
7
.
0
.
0
.
1
'
)
;
c
o
n
s
o
l
e
.
l
o
g
(
'
S
e
r
v
e
r r
u
n
n
i
n
g a
t h
t
t
p
:
/
/
1
2
7
.
0
.
0
.
1
:
1
3
3
7
/
'
)
;

View Slide

CLOSING
THOUGHTS

View Slide

DO AWESOME

View Slide

AND BUILD
DRONES
youtube.com/watch?v=K7sG1dRSn4c

View Slide

THANKS
@Paul_Kinlan
+Paul Kinlan
http://paul.kinlan.me
LINKS
Browserify -
Chromeify -
net -
http -
github.com/substack/node-browserify
github.com/GoogleChrome/browserify-chrome
github.com/GoogleChrome/net-chromeify
github.com/iceddev/http-chromify

View Slide

View Slide

The Next Evolution of Chrome Apps - Devoxx 2012

The Next Evolution of Chrome Apps - Devoxx 2012

Paul Kinlan

More Decks by Paul Kinlan

Other Decks in Programming

Featured

Transcript