Building Web Apps of the future. Tomorrow, today and yesterday.

ME
DEVELOPER ADVOCATE AT GOOGLE
@Paul Kinlan

View Slide

BUILDING WEB APPS OF
THE FUTURE TODAY,
TOMORROW AND
YESTERDAY
By @Paul Kinlan

View Slide

@AEROTWIST IS RUNNING A SWEEP-STAKE
ON MY "NERVOUS" WORD.
Tweet him.

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

BUILDING
APPS FOR
YESTERDAY

View Slide

STOP IT

View Slide

BUILDING
APPS FOR
TODAY

View Slide

IT'S HARD
IT IS ALSO BROKEN
DateDiff anyone?

View Slide

WE CAN STILL DO SOME
AMAZING
AMAZING
AMAZING
AMAZING
AMAZING
AMAZING
AMAZING
AMAZING
AMAZING
AMAZING
AMAZING
AMAZING
AMAZING
AMAZING
AMAZING
AMAZING
AMAZING
AMAZING
AMAZING
AMAZING
AMAZING
AMAZING STUFF

View Slide

E.G WEB LAB

View Slide

chromeweblab.com

View Slide

AND JAM WITH CHROME
LAUNCHED YESTERDAY!

View Slide

jamwithchrome.com

View Slide

WHAT I WANT FROM AN APP
1. Availability
With added
2. Interoperability
3. Experience

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

APPCACHE HINTS
Listen to Andrew Betts + Jake Archibald
Prefer client side templating
Avoid HTML5 history, prefer onhashchange
Put webfonts in to the app cache
NETWORK: * for using analytics

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

INTEROPERABILITY
“No App is an island. — Paul Kinlan”

View Slide

WEB INTENTS
AW SNAP.

View Slide

Photo by Shawn Hoke

View Slide

I HAD WEB INTENTS FOR 25 MINUTES
I suppose I have this time free now for questions?

View Slide

REGISTER PROTOCOL HANDLER
Use well known schemes
Create new schemes
Warning: Does not work well offline.
n
a
v
i
g
a
t
o
r
.
r
e
g
i
s
t
e
r
P
r
o
t
o
c
o
l
H
a
n
d
l
e
r
(
"
m
a
i
l
t
o
"
, "
h
t
t
p
:
/
/
p
a
u
l
.
k
i
n
l
a
n
.
m
e
/
?
%
s
"
)
n
a
v
i
g
a
t
o
r
.
r
e
g
i
s
t
e
r
P
r
o
t
o
c
o
l
H
a
n
d
l
e
r
(
"
w
e
b
+
I
m
O
n
a
H
o
r
s
e
"
, "
h
t
t
p
:
/
/
p
a
u
l
.
k
i
n
l
a
n
.
m
e
/
?
%
s
"
)

View Slide

REGISTER CONTENT HANDLER
Warning: Does not work well offline.
n
a
v
i
g
a
t
o
r
.
r
e
g
i
s
t
e
r
C
o
n
t
e
n
t
H
a
n
d
l
e
r
(
"
t
e
x
t
/
p
l
a
i
n
"
, "
h
t
t
p
:
/
/
p
a
u
l
.
k
i
n
l
a
n
.
m
e
/
?
%
s
"
)

View Slide

API'S ARE ONLY HALF THE PROBLEM
Eco-systems need to be built around API's.
You have to provide value to the developer.

View Slide

EXPERIENCE
“Do what the user expects — Paul Kinlan”

View Slide

DOWNLOAD
Navigating cool.
/to something isn't
N
a
v
i
g
a
t
i
n
g <
a h
r
e
f
=
"
i
m
a
g
e
s
/
m
e
.
p
n
g
" d
o
w
n
l
o
a
d
=
"
a
w
e
s
o
m
e
.
p
n
g
"
>
/
t
o s
o
m
e
t
h
i
n
g i
s
n
'
t <
/
a
> c
o
o
l
.

View Slide

CREATEOBJECTURL
This is a story all about how...
MyFile.txt Create file
w
i
n
d
o
w
.
U
R
L
.
c
r
e
a
t
e
O
b
j
e
c
t
U
R
L
(
b
)
;
v
a
r d
o
w
n
l
o
a
d
F
i
l
e = f
u
n
c
t
i
o
n
(
) {
w
i
n
d
o
w
.
U
R
L = w
i
n
d
o
w
.
w
e
b
k
i
t
U
R
L |
| w
i
n
d
o
w
.
U
R
L
;
v
a
r t
y
p
e
r = d
o
c
u
m
e
n
t
.
g
e
t
E
l
e
m
e
n
t
B
y
I
d
(
"
t
y
p
e
r
"
)
;
v
a
r b = n
e
w B
l
o
b
(
[
t
y
p
e
r
.
t
e
x
t
C
o
n
t
e
n
t
]
, {
t
y
p
e
: "
t
e
x
t
/
p
l
a
i
n
"
}
)
v
a
r a = d
o
c
u
m
e
n
t
.
c
r
e
a
t
e
E
l
e
m
e
n
t
(
'
a
'
)
;
a
.
d
o
w
n
l
o
a
d = c
o
n
t
a
i
n
e
r
.
q
u
e
r
y
S
e
l
e
c
t
o
r
(
'
i
n
p
u
t
[
t
y
p
e
=
"
t
e
x
t
"
]
'
)
.
v
a
l
u
e
;
a
.
h
r
e
f = w
i
n
d
o
w
.
U
R
L
.
c
r
e
a
t
e
O
b
j
e
c
t
U
R
L
(
b
)
;
a
.
t
e
x
t
C
o
n
t
e
n
t = '
D
o
w
n
l
o
a
d r
e
a
d
y
'
;
a
.
d
a
t
a
s
e
t
.
d
o
w
n
l
o
a
d
u
r
l = [
"
t
e
x
t
/
p
l
a
i
n
"
, a
.
d
o
w
n
l
o
a
d
, a
.
h
r
e
f
]
.
j
o
i
n
(
'
:
'
)
;
o
u
t
p
u
t
.
a
p
p
e
n
d
C
h
i
l
d
(
a
)
;
}
;

View Slide

No file chosen
Choose File
ACCESSING FILES
<
i
n
p
u
t t
y
p
e
=
f
i
l
e [
w
e
b
k
i
t
D
i
r
e
c
t
o
r
y
]
>
i
n
p
u
t
.
o
n
c
h
a
n
g
e = f
u
n
c
t
i
o
n
(
e
) {
v
a
r f
i
l
e
s = e
.
s
r
c
E
l
e
m
e
n
t
.
f
i
l
e
s
;
f
o
r
(
v
a
r f i
n f
i
l
e
s
) {
v
a
r f
i
l
e = f
i
l
e
s
[
f
]
;
v
a
r l
i = d
o
c
u
m
e
n
t
.
c
r
e
a
t
e
E
l
e
m
e
n
t
(
"
l
i
"
)
;
l
i
.
t
e
x
t
C
o
n
t
e
n
t = f
i
l
e
.
n
a
m
e
;
f
i
l
e
l
i
s
t
.
a
p
p
e
n
d
C
h
i
l
d
(
l
i
)
;
}
}
;

View Slide

ACCESSING DRAGGED FILES
t
a
r
g
e
t
.
o
n
d
r
o
p = f
u
n
c
t
i
o
n
(
e
) {
e
.
p
r
e
v
e
n
t
D
e
f
a
u
l
t
(
)
;
v
a
r f
i
l
e
s = e
.
d
a
t
a
T
r
a
n
s
f
e
r
.
f
i
l
e
s
;
f
o
r
(
v
a
r f = 0
; f < f
i
l
e
s
.
l
e
n
g
t
h
; f
+
+
) {
v
a
r f
i
l
e = f
i
l
e
s
[
f
]
;
v
a
r l
i = d
o
c
u
m
e
n
t
.
c
r
e
a
t
e
E
l
e
m
e
n
t
(
"
l
i
"
)
;
l
i
.
t
e
x
t
C
o
n
t
e
n
t = f
i
l
e
.
n
a
m
e
;
f
i
l
e
l
i
s
t
.
a
p
p
e
n
d
C
h
i
l
d
(
l
i
)
;
}
}
;

View Slide

ACTUALLY READING THE FILE
v
a
r f
i
l
e = /
/ R
e
s
u
l
t o
f o
p
e
r
a
t
i
o
n
v
a
r r
e
a
d
e
r = n
e
w F
i
l
e
R
e
a
d
e
r
(
)
;
r
e
a
d
e
r
.
o
n
l
o
a
d = f
u
n
c
t
i
o
n
(
e
) {
/
/ R
E
A
D f
i
r
s
t 1
0 b
y
t
e
s
v
a
r b
y
t
e
s = n
e
w U
i
n
t
8
A
r
r
a
y
(
e
.
t
a
r
g
e
t
.
r
e
s
u
l
t
.
s
l
i
c
e
(
0
,
1
0
)
)
;
f
o
r
(
v
a
r b = 0
; b < b
y
t
e
s
.
l
e
n
g
t
h
; b
+
+ ) {
d
r
o
p
2
.
i
n
n
e
r
T
e
x
t +
= "
0
x
" + b
y
t
e
s
[
b
]
.
t
o
S
t
r
i
n
g
(
1
6
)
;
}
}
;
/
/ R
e
a
d t
h
e d
a
t
a i
n
r
e
a
d
e
r
.
r
e
a
d
A
s
A
r
r
a
y
B
u
f
f
e
r
(
f
i
l
e
)
;

View Slide

I CAN HAZ FILE SYSTEM
w
i
n
d
o
w
.
r
e
q
u
e
s
t
F
i
l
e
S
y
s
t
e
m
(
T
E
M
P
O
R
A
R
Y
, /
/ p
e
r
s
i
s
t
e
n
t v
s
. t
e
m
p
o
r
a
r
y s
t
o
r
a
g
e
1
0
2
4 * 1
0
2
4
, /
/ s
i
z
e (
b
y
t
e
s
) o
f n
e
e
d
e
d s
p
a
c
e
i
n
i
t
F
s
, /
/ s
u
c
c
e
s
s c
a
l
l
b
a
c
k
o
p
t
_
e
r
r
o
r
H
a
n
d
l
e
r /
/ o
p
t
. e
r
r
o
r c
a
l
l
b
a
c
k
, d
e
n
i
a
l o
f a
c
c
e
s
s
)
;

View Slide

CACHING FILES
v
a
r x
h
r = n
e
w X
M
L
H
t
t
p
R
e
q
u
e
s
t
(
)
;
x
h
r
.
o
p
e
n
(
'
G
E
T
'
, '
/
p
a
t
h
/
t
o
/
i
m
a
g
e
.
p
n
g
'
, t
r
u
e
)
;
x
h
r
.
r
e
s
p
o
n
s
e
T
y
p
e = '
a
r
r
a
y
b
u
f
f
e
r
'
;
x
h
r
.
o
n
l
o
a
d = f
u
n
c
t
i
o
n
(
e
) {
w
i
n
d
o
w
.
r
e
q
u
e
s
t
F
i
l
e
S
y
s
t
e
m
(
T
E
M
P
O
R
A
R
Y
, 1
0
2
4 * 1
0
2
4
, f
u
n
c
t
i
o
n
(
f
s
) {
f
s
.
r
o
o
t
.
g
e
t
F
i
l
e
(
'
i
m
a
g
e
.
p
n
g
'
, {
c
r
e
a
t
e
: t
r
u
e
}
, f
u
n
c
t
i
o
n
(
f
i
l
e
E
n
t
r
y
) {
f
i
l
e
E
n
t
r
y
.
c
r
e
a
t
e
W
r
i
t
e
r
(
f
u
n
c
t
i
o
n
(
w
r
i
t
e
r
) {
w
r
i
t
e
r
.
o
n
w
r
i
t
e
e
n
d = f
u
n
c
t
i
o
n
(
e
) { .
.
. }
;
w
r
i
t
e
r
.
o
n
e
r
r
o
r = f
u
n
c
t
i
o
n
(
e
) { .
.
. }
;
w
r
i
t
e
r
.
w
r
i
t
e
(
n
e
w B
l
o
b
(
[
x
h
r
.
r
e
s
p
o
n
s
e
]
, {
t
y
p
e
: '
i
m
a
g
e
/
p
n
g
'
}
)
)
;
}
, o
n
E
r
r
o
r
)
;
}
, o
n
E
r
r
o
r
)
;
}
, o
n
E
r
r
o
r
)
;
}
;
x
h
r
.
s
e
n
d
(
)
;

View Slide

FILER.JS MAKES IT EASY
github.com/ebidel/filer.js
v
a
r f
i
l
e
r = n
e
w F
i
l
e
r
(
)
;
f
i
l
e
r
.
i
n
i
t
(
{
p
e
r
s
i
s
t
e
n
t
: f
a
l
s
e
, s
i
z
e
: 1
0
2
4 * 1
0
2
4
}
, f
u
n
c
t
i
o
n
(
f
s
) {
.
.
.
}
, o
n
E
r
r
o
r
)
;
f
i
l
e
r
.
l
s
(
'
p
a
t
h
/
t
o
/
s
o
m
e
/
d
i
r
/
'
, f
u
n
c
t
i
o
n
(
e
n
t
r
i
e
s
) { .
.
. }
, o
n
E
r
r
o
r
)
;
f
i
l
e
r
.
c
p
(
'
f
i
l
e
.
t
x
t
'
, '
/
p
a
t
h
/
t
o
/
f
o
l
d
e
r
'
, '
n
e
w
n
a
m
e
.
t
x
t
'
, f
u
n
c
t
i
o
n
(
e
n
t
r
y
) {
/
/ e
n
t
r
y
.
f
u
l
l
P
a
t
h =
= '
/
p
a
t
h
/
t
o
/
f
o
l
d
e
r
/
n
e
w
n
a
m
e
.
t
x
t
'
}
, o
n
E
r
r
o
r
)
;
v
a
r b = n
e
w B
l
o
b
(
[
'
b
o
d
y { c
o
l
o
r
: r
e
d
; }
'
]
, {
t
y
p
e
: '
t
e
x
t
/
c
s
s
'
}
)
;
f
i
l
e
r
.
w
r
i
t
e
(
'
s
t
y
l
e
s
.
c
s
s
'
, {
d
a
t
a
: b
, t
y
p
e
: b
.
t
y
p
e
}
, f
u
n
c
t
i
o
n
(
e
n
t
r
y
, w
r
i
t
e
r
) {
.
.
.
}
, o
n
E
r
r
o
r
)
;

View Slide

MAKE THE FILE SYSTEM API CROSS
BROWSER
and a
(http://goo.gl/WSRy0)
https://github.com/ebidel/idb.filesystem.js Demo
I
t
'
s j
u
s
t t
h
e s
a
m
e
. F
T
W
.

View Slide

BUILDING
APPS FOR
TOMORROW...

View Slide

CAMERA INPUT
v
a
r o
p
t
i
o
n
s = {
v
i
d
e
o
: t
r
u
e
, a
u
d
i
o
: f
a
l
s
e
}
;
v
a
r v = d
o
c
u
m
e
n
t
.
q
u
e
r
y
S
e
l
e
c
t
o
r
(
'
#
c
a
m
e
r
a
'
)
;
v
a
r c
a
l
l
b
a
c
k = f
u
n
c
t
i
o
n
(
s
)
{
v
.
s
r
c = w
i
n
d
o
w
.
U
R
L
.
c
r
e
a
t
e
O
b
j
e
c
t
U
R
L
(
s
)
;
}
n
a
v
i
g
a
t
o
r
.
g
e
t
U
s
e
r
M
e
d
i
a
(
o
p
t
i
o
n
s
, c
a
l
l
b
a
c
k
)
;

View Slide

AUDIO INPUT
0:13
/
/ s
u
c
c
e
s
s c
a
l
l
b
a
c
k w
h
e
n r
e
q
u
e
s
t
i
n
g a
u
d
i
o i
n
p
u
t s
t
r
e
a
m
f
u
n
c
t
i
o
n g
o
t
S
t
r
e
a
m
(
s
t
r
e
a
m
) {
v
a
r a
u
d
i
o
C
o
n
t
e
x
t = n
e
w w
e
b
k
i
t
A
u
d
i
o
C
o
n
t
e
x
t
(
)
;
/
/ C
r
e
a
t
e a
n A
u
d
i
o
N
o
d
e f
r
o
m t
h
e s
t
r
e
a
m
.
v
a
r m
S
t
r
e
a
m
S
o
u
r
c
e = a
u
d
i
o
C
o
n
t
e
x
t
.
c
r
e
a
t
e
M
e
d
i
a
S
t
r
e
a
m
S
o
u
r
c
e
(
s
t
r
e
a
m
)
;
/
/ C
o
n
n
e
c
t i
t t
o t
h
e d
e
s
t
i
n
a
t
i
o
n t
o h
e
a
r y
o
u
r
s
e
l
f (
o
r a
n
y o
t
h
e
r n
o
d
e f
o
r p
r
o
c
e
s
s
i
n
g
!
)
m
S
t
r
e
a
m
S
o
u
r
c
e
.
c
o
n
n
e
c
t
( a
u
d
i
o
C
o
n
t
e
x
t
.
d
e
s
t
i
n
a
t
i
o
n )
;
}
n
a
v
i
g
a
t
o
r
.
w
e
b
k
i
t
G
e
t
U
s
e
r
M
e
d
i
a
( {
a
u
d
i
o
:
t
r
u
e
}
, g
o
t
S
t
r
e
a
m )
;

View Slide

APPLY CSS FILTERS
v
i
d
e
o
.
c
s
s
f
i
l
t
e
r {
-
w
e
b
k
i
t
-
a
n
i
m
a
t
i
o
n
: f
i
l
t
e
r
s
-
a
n
i
m 2
s i
n
f
i
n
i
t
e a
l
t
e
r
n
a
t
e
;
}
@
-
w
e
b
k
i
t
-
k
e
y
f
r
a
m
e
s f
i
l
t
e
r
s
-
a
n
i
m {
0
% {
-
w
e
b
k
i
t
-
f
i
l
t
e
r
: b
l
u
r
(
0
p
x
) g
r
a
y
s
c
a
l
e
(
0
)
;
}
5
0
% {
-
w
e
b
k
i
t
-
f
i
l
t
e
r
: b
l
u
r
(
3
p
x
) g
r
a
y
s
c
a
l
e
(
0
.
5
)
;
}
1
0
0
% {
-
w
e
b
k
i
t
-
f
i
l
t
e
r
: b
l
u
r
(
6
p
x
) g
r
a
y
s
c
a
l
e
(
1
)
;
}
}

View Slide

CSS SHADERS
.
d
e
m
o
-
5 .
t
a
r
g
e
t {
t
r
a
n
s
i
t
i
o
n
: a
l
l 2
0
0
0
m
s
;
-
w
e
b
k
i
t
-
f
i
l
t
e
r
: c
u
s
t
o
m
(
u
r
l
(
s
h
a
d
e
r
s
/
d
e
m
o
5
.
v
e
r
t
) m
i
x
(
u
r
l
(
s
h
a
d
e
r
s
/
d
e
m
o
5
.
f
r
a
g
) n
o
r
m
a
l s
o
u
r
c
e
-
a
t
o
p
)
,
4
0 4
0
,
t
i
m
e 0
,
t
r
a
n
s
f
o
r
m p
e
r
s
p
e
c
t
i
v
e
(
6
0
0
)
)
;
}
.
d
e
m
o
-
5 .
t
a
r
g
e
t
:
h
o
v
e
r {
-
w
e
b
k
i
t
-
f
i
l
t
e
r
: c
u
s
t
o
m
(
u
r
l
(
s
h
a
d
e
r
s
/
d
e
m
o
5
.
v
e
r
t
) m
i
x
(
u
r
l
(
s
h
a
d
e
r
s
/
d
e
m
o
5
.
f
r
a
g
) n
o
r
m
a
l s
o
u
r
c
e
-
a
t
o
p
)
,
4
0 4
0
,
t
i
m
e 2
,
t
r
a
n
s
f
o
r
m p
e
r
s
p
e
c
t
i
v
e
(
6
0
0
) r
o
t
a
t
e
X
(
3
5
d
e
g
) s
c
a
l
e
(
0
.
8
)
)
;
}

View Slide

WEB RTC
Start Call Hang Up

View Slide

NOW FOR SOMETHING
MORE AWESOME.
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

Building Web Apps of the future. Tomorrow, today and yesterday.

Building Web Apps of the future. Tomorrow, today and yesterday.

Paul Kinlan

More Decks by Paul Kinlan

Other Decks in Programming

Featured

Transcript