Getting Into HNPWA with Next.js at Google I/O 2017 Extended in Seoul, Korea

GETTING INTO

View Slide

View Slide

Hacker News
is a social news website focusing on computer
science and entrepreneurship. running by y
combinator, Paul Graham, that have many of clones

View Slide

View Slide

CHECKPOINT
pwa, w
e
b m
a
n
i
f
e
s
t , s
e
r
v
i
c
e w
o
r
k
e
r ...
all of v
i
e
w
s (Top, New, Best ...)
display 3
0 i
t
e
m
s per-page
_
9
0
/
1
0
0
_ s
c
o
r
e by lighthouse auditing
ﬁrst interactive in < 5
s by webpagetest

View Slide

AND MORE
manual inspection by addy osmani
application shell pattern (mandatory)
best to work cross-browser (optional)
supports oﬄine caching of hn data (optional)
server-side rendering (optional)

View Slide

View Slide

most popular news site in tech
simlple main view with list
detail views
trimmed data for oﬄine

View Slide

View Slide

popular frameworks with r
e
a
c
t / p
r
e
a
c
t
production ready
easy integration with own cloud
simple, but powerful performance
zero-conﬁguration of code-splitting and ssr

View Slide

pwa features is not ready yet
not in the list on hnpwa
fan of zeti production

View Slide

create-next-app
page layout & hackernews api
custom server & deployment
pwa features, web manifest & service worker
auditing
optimization, #sizematters

View Slide

View Slide

yarn create next-app

View Slide

View Slide

create-next-app
auditing

View Slide

View Slide

HACKERNEWS API
oﬃcial api on Firebase
unoﬃcial restful-styled api

View Slide

View Slide

e
x
p
o
r
t d
e
f
a
u
l
t c
l
a
s
s e
x
t
e
n
d
s R
e
a
c
t
.
C
o
m
p
o
n
e
n
t {
s
t
a
t
i
c a
s
y
n
c g
e
t
I
n
i
t
i
a
l
P
r
o
p
s
(
{
q
u
e
r
y
, p
a
t
h
n
a
m
e
}
) {
/
/ f
i
r
e
b
a
s
e
-
h
a
c
k
e
r
n
e
w
s
, p
r
o
m
i
s
e a
n
d
/
/ s
e
r
v
i
c
e w
o
r
k
e
r f
e
t
c
h e
v
e
n
t m
a
n
a
g
i
n
g s
u
p
p
o
r
t
s
c
o
n
s
t h
n = h
a
c
k
e
r
n
e
w
s
.
i
n
i
t
(
f
i
r
e
b
a
s
e
)
c
o
n
s
t s
t
o
r
i
e
s = a
w
a
i
t h
n
.
s
t
o
r
i
e
s
(
'
t
o
p
'
)
r
e
t
u
r
n {
s
t
o
r
i
e
s
}
}
}

View Slide

create-next-app
auditing

View Slide

CUSTOM SERVER
next.js supports server-side-rendering api
in order to customize routes

View Slide

c
o
n
s
t e
x
p
r
e
s
s = r
e
q
u
i
r
e
(
'
e
x
p
r
e
s
s
'
) /
/ i
n c
a
s
e o
f e
x
p
r
e
s
s
c
o
n
s
t n
e
x
t = r
e
q
u
i
r
e
(
'
n
e
x
t
'
)
c
o
n
s
t a
p
p = n
e
x
t
(
{
D
E
V
_
O
R
_
N
O
T
}
)
c
o
n
s
t h
a
n
d
l
e = a
p
p
.
g
e
t
R
e
q
u
e
s
t
H
a
n
d
l
e
r
(
) /
/ c
r
e
a
t
e a h
a
n
d
l
e
r
a
p
p
.
p
r
e
p
a
r
e
(
)
.
t
h
e
n
(
(
) =
> {
c
o
n
s
t s
e
r
v
e
r = e
x
p
r
e
s
s
(
)
s
e
r
v
e
r
.
g
e
t
(
'
*
'
, (
r
e
q
, r
e
s
) =
> {
r
e
t
u
r
n h
a
n
d
l
e
(
r
e
q
, r
e
s
) /
/ r
e
t
u
r
n r
e
n
d
e
r
e
d p
a
g
e
}
)
s
e
r
v
e
r
.
l
i
s
t
e
n
(
3
0
0
0
, e
r
r =
> {
c
o
n
s
o
l
e
.
l
o
g
(
'
> R
e
a
d
y o
n h
t
t
p
:
/
/
l
o
c
a
l
h
o
s
t
:
3
0
0
0
'
)
}
)
}
)

View Slide

DEPLOYMENT WITH NOW
cloud service, very friendly to node.js
deployment with zero-conﬁguration

View Slide

NOW COMMANDS
# l
i
s
t
i
n
g
n
o
w l
s
# r
e
m
o
v
e a
l
l o
f d
e
v
e
l
o
p
m
e
n
t v
e
r
s
i
o
n
n
o
w r
m m
y
a
p
p -
-
s
a
f
e
# d
e
p
l
o
y
m
e
n
t a
s o
s
s
n
o
w -
-
n
a
m
e
=
m
y
a
p
p -
-
p
u
b
l
i
c

View Slide

View Slide

create-next-app
auditing

View Slide

PWA FEATURES
web manifest for installable webapp
service worker for oﬄine experience

View Slide

WEB MANIFEST
n
p
m i
n
s
t
a
l
l -
g @
p
w
a
/
m
a
n
i
f
e
s
t
p
w
a
-
m
a
n
i
f
e
s
t .
/
s
t
a
t
i
c .
/
s
t
a
t
i
c
/
i
c
o
n
s -
-
i
c
o
n
s
=
.
/
a
s
s
e
t
s
/
i
c
o
n
.

View Slide

View Slide

SERVICE WORKER
<
S
e
r
v
i
c
e
W
o
r
k
e
r
> react component
w
o
r
k
b
o
x , brand new service worker lib
n
e
x
t
-
p
r
e
c
a
c
h
e , precache list for next.js

View Slide

i
m
p
o
r
t
S
c
r
i
p
t
s
(
'
h
t
t
p
s
:
/
/
u
n
p
k
g
.
c
o
m
/
w
o
r
k
b
o
x
-
s
w
@
0
.
0
.
2
'
)
c
o
n
s
t w
o
r
k
b
o
x
S
W = n
e
w W
o
r
k
b
o
x
S
W
(
{
c
l
i
e
n
t
s
C
l
a
i
m
: t
r
u
e
}
)
/
/ p
l
a
c
e
h
o
l
d
e
r f
o
r p
r
e
c
a
c
h
e
s
w
o
r
k
b
o
x
S
W
.
p
r
e
c
a
c
h
e
(
$
{
p
r
e
c
a
c
h
e
}
)
w
o
r
k
b
o
x
S
W
.
r
o
u
t
e
r
.
r
e
g
i
s
t
e
r
R
o
u
t
e
(
'
/
'
, w
o
r
k
b
o
x
S
W
.
s
t
r
a
t
e
g
i
e
s
.
s
t
a
l
e
W
h
i
l
e
R
e
v
a
l
i
d
a
t
e
(
)
)

View Slide

View Slide

next-precache
supports u
n
i
q
u
e s
t
y
l
e
d r
o
u
t
i
n
g of next.js
n
e
x
t
-
p
r
e
c
a
c
h
e -
-
s
w
=
.
/
s
e
r
v
i
c
e
-
w
o
r
k
e
r
.
j
s

View Slide

create-next-app
auditing

View Slide

AUDITING #sizematters
w
e
b
p
a
g
e
t
e
s
t
.
o
r
g , test in emerging mobile env
l
i
g
h
t
h
o
u
s
e , ref point for modern webapp
b
u
n
d
l
e s
i
z
e , analyze size of your package

View Slide

View Slide

ANALYZING BUNDLE SIZE
to reduce bundle size of critical route path. If there is
downsizing for about 100kb, which the bytes will be
estimated 1s in emerging mobile

View Slide

webpack-bundle-size-analyzer
f
i
r
e
b
a
s
e
: 6
1
8
.
7
3 K
B (
5
1
.
5
%
)
r
e
a
c
t
: 2
2
.
5 K
B (
3
.
8
2
%
)
r
e
a
c
t
-
d
o
m
: 1
2
7
.
2
4 K
B (
2
1
.
6
%
)
n
e
x
t
: 9
3
.
9
3 K
B (
1
6
.
0
%
)

View Slide

create-next-app
auditing

View Slide

BEFORE YOU GO FOR OVER IT

View Slide

View Slide

OPTIMIZING IN NEXT.JS
s
s
r , enhanced ﬁrst meaningful time
p
a
g
e b
a
s
e
d c
o
d
e
-
s
p
l
i
t
t
i
n
g
p
r
e
l
o
a
d , to ensure fast delivery resources
n
e
x
t
-
p
r
e
c
a
c
h
e , cache the pages splitted
k
i
c
k
i
n
g m
e
g
a b
u
n
d
l
e

View Slide

KICKING MEGA BUNDLE
pull back hacker package from the app
lightweight javascript framework

View Slide

PULL BACK HACKERNEWS FROM THE APP
/
/ s
e
r
v
i
c
e w
o
r
k
e
r
i
m
p
o
r
t
S
c
r
i
p
t
s
(
'
h
t
t
p
s
:
/
/
.
.
.
/
f
i
r
e
b
a
s
e
j
s
/
4
.
1
.
2
/
f
i
r
e
b
a
s
e
-
a
p
p
.
j
s
i
m
p
o
r
t
S
c
r
i
p
t
s
(
'
h
t
t
p
s
:
/
/
.
.
.
/
f
i
r
e
b
a
s
e
j
s
/
4
.
1
.
2
/
f
i
r
e
b
a
s
e
-
d
a
t
a
b
a
i
m
p
o
r
t
S
c
r
i
p
t
s
(
'
h
t
t
p
s
:
/
/
.
.
.
/
f
i
r
e
b
a
s
e
-
h
a
c
k
e
r
n
e
w
s
-
s
w
.
j
s
'
)
h
a
c
k
e
r
n
e
w
s
.
i
n
i
t
(
f
i
r
e
b
a
s
e
, {
w
a
t
c
h
: t
r
u
e
}
)

View Slide

PULL BACK HACKERNEWS FROM THE APP API CONT'
/
/ u
n
i
v
e
r
s
a
l f
e
t
c
h
i
m
p
o
r
t n
o
d
e
F
e
t
c
h f
r
o
m '
i
s
o
m
o
r
p
h
i
c
-
f
e
t
c
h
'
i
f (
i
n
N
o
d
e
) {
f
e
t
c
h = n
o
d
e
F
e
t
c
h
}
c
o
n
s
t r
e
s = a
w
a
i
t f
e
t
c
h
(
`
$
{
h
o
s
t
}
/
h
a
c
k
e
r
n
e
w
s
/
$
{
p
a
t
h
n
a
m
e
}
`
)

View Slide

View Slide

/
/ f
i
r
e
b
a
s
e
: 6
1
8
.
7
3 K
B (
5
1
.
5
%
)
r
e
a
c
t
: 2
2
.
5 K
B (
3
.
8
2
%
)
r
e
a
c
t
-
d
o
m
: 1
2
7
.
2
4 K
B (
2
1
.
6
%
)
n
e
x
t
: 9
3
.
9
3 K
B (
1
6
.
0
%
)

View Slide

View Slide

LIGHTWEIGHT JAVASCRIPT FRAMEWORK
c
o
n
f
i
g
.
r
e
s
o
l
v
e
.
a
l
i
a
s = {
"
r
e
a
c
t
"
: "
p
r
e
a
c
t
-
c
o
m
p
a
t
/
d
i
s
t
/
p
r
e
a
c
t
-
c
o
m
p
a
t
"
,
"
r
e
a
c
t
-
d
o
m
"
: "
p
r
e
a
c
t
-
c
o
m
p
a
t
/
d
i
s
t
/
p
r
e
a
c
t
-
c
o
m
p
a
t
"
,
}

View Slide

PREACT
/
/ f
i
r
e
b
a
s
e
: 6
1
8
.
7
3 K
B (
5
1
.
5
%
)
p
r
e
a
c
t
: 1
9
.
9
8 K
B (
4
.
2
0
%
) /
/ r
e
a
c
t
: 2
2
.
5 K
B
p
r
e
a
c
t
-
c
o
m
p
a
t
: 1
6
.
7
5 K
B (
3
.
5
2
%
) /
/ r
e
a
c
t
-
d
o
m
: 1
2
7
.
2
4 K
B
n
e
x
t
: 9
3
.
9
3 K
B (
1
9
.
8
%
)
.
.
.

View Slide

View Slide

FURTHER MORE
cleaned and optimized resources
reactive ux, defer rendering in twitter mobile
latest tools for bundling and javascript
the cutting edge of features on the platform
discover your secrets and share it

View Slide

View Slide

Getting Into HNPWA with Next.js at Google I/O 2017 Extended in Seoul, Korea

Getting Into HNPWA with Next.js at Google I/O 2017 Extended in Seoul, Korea

Jimmy Moon

More Decks by Jimmy Moon

Other Decks in Programming

Featured

Transcript