►
From YouTube: PWA Studio Community Sync 27 Jan, 2021
Description
Demos: Dialog component changes, performance improvements with render blocking, and React 17 upgrades.
Discussion on upcoming PWA Studio 9.0.0 release.
A
Good
morning,
good
afternoon,
good
evening,
everyone
thanks
for
joining
again
on
another
pwa
studio
community
sink.
We
have
some
really
good
attendance
today.
Some
people
that
I
haven't
seen
on
the
line
here
in
a
few
months
since
I've
been
out
but
good
good
to
see
you
all
and
and
thanks
for
joining
us
today,
we
have
a
a
relatively
light
agenda.
A
B
Hey,
hey
yeah,
so
I
have
not.
I
won't
go
too
in
depth.
I'll
leave
the
kind
of
pr
description
up
here
for
you.
If
you
want
to
read
all
the
nitty
gritty
details,
but
I
wanted
to
share
that
the
dialog
component,
one
of
the
the
should
unmount
on
hide,
prop
the
default
value
change,
so
just
kind
of
a
general
awareness
plug
here.
B
Some
of
you
may
not
know
some
of
you
do.
The
dialog
component
has
a
form
inside
of
it,
and
so
when
we
hide
the
dialogue
component,
actually
just
kind
of
slides
off
screen,
and
so
that
form
is
still
mounted
and
the
bug
that
that
this
pr
is
solving
is
that
you
would
enter
values
into
that
form.
Click
submit,
it
would
hide,
and
then
you
bring
up
the
form
again
and
all
those
values
are
still
you
know
populated
in
the
form.
B
So
there's
code,
you
could
write
to
get
it
to
not
do
that,
but
we
thought
that
the
best
kind
of
you
know
help
everybody
fall
into.
A
pit
of
his
success
approach
would
be
to
change
that
default
value,
so
that
form
is
going
to
get
when
the
dialogue
is
hidden.
That
form
is
going
to
get
unmounted
now
and
so
that
the
next
time
you
bring
it
up,
it'll
be
a
fresh
new
form.
B
This
also
fixes
some,
I
won't
call
them
bugs
but
kind
of
quarks
with
initial
values
and
the
informed
library
that
we're
using
so
again
out
of
the
box.
It
should
work
now
after
this
pr,
as
you
would
expect,
as
opposed
to
needing
to
know
kind
of
the
finer
details
of
how
the
dialogue
and
how
informed
initial
values
work
and
all
that
stuff.
B
So
so
there
was
a
change
in
the
in
the
default
value
for
that
prop
in
the
dialog
component
and
also
in
our
vennia
storefront
every
instance
that
was
using
the
dialog
component.
You
know
we
kind
of
had
to
make
sure
that
it
was.
It
was
correctly
expecting
the
value,
so
we
had
to
switch
some
of
the
values
around.
B
So
you
may
have
to
do
that
to
you
if
you're,
if,
after
this
update
goes
out,
this
is
not
included
in
9.0,
but
just
a
heads
up
that
that
default
value
change
for
the
should
unmount
on
hide
prop
and
the
dialog
component.
So
if
you're
relying
on
the
default
value,
that'll
switch
up
on
you,
the
easiest
thing
to
do
is
just
kind
of
explicitly
say
yes
or
true
or
false
for
that
value.
Now,
but
that's
it.
B
A
C
All
right,
thank
you,
andrew
hello,
everybody,
a
little
crazy,
seeing
like
this
entire
board
of
blue
people.
We
actually
have
people
at
community
sync.
This
is
awesome,
so
today
I'm
gonna
be
talking
about
something,
that's
kind
of
become
a
passion.
You
know
performance
we're
a
pwa.
We
need
to
have
a
kind
of
heartbeat
on
or
a
pulse
on
performance.
C
So
today
I'm
going
to
talk
about,
render
blocking
and
kind
of
how
how
to
detect
it,
how
to
fix
it
in
your
own
app
and
maybe
just
kind
of
open
a
conversation
to
kind
of
discuss
some
patterns
that
we
currently
use
in
pwa,
studio
and
kind
of
why
you
should
consider
using
those
patterns.
So
your
kind
of
storefront
looks
as
performant
as
it
really
is,
and
you're
not
just
sitting
behind
big
loading
spinners
waiting
for
something
to
happen.
C
So
I
am
on
develop
right
now,
I'm
going
to
show
you
kind
of
the
the
render
blocking
component
that
I
fixed.
I
kind
of
only
found
one
big
one.
It
was
at
the
very
top
of
the
tree
and
that's
kind
of
the
biggest
no-no
is
like
you.
You
don't
want
to
prevent
your
entire
app
from
rendering
based
on
one
query.
C
We
have
another
glaring
one.
Probably
everyone
already
knows
about
it-
that
we
have
to
do
url
resolvers
for
every
page
that
we
hit,
but
I'm
not
gonna
approach
that
one
just
yet
but
anyways.
If
you
ever
are
concerned
about
performance,
lighthouse
is
kind
of
google's
go-to
metric
for
telling
you
kind
of
how
you're
doing
we
have
some
known
problems
on
here.
So
the
score
isn't
going
to
be
perfect,
but
it
should,
you
know,
be
in
the
lower
80s.
C
So
this
is
fine.
These
are
all
great
metrics,
but
to
kind
of
look
into
render
blocking.
You
want
to
go
into
kind
of
this
request
tree
and
when
you
see
stuff
like
this,
where
it
looks
like
there's
a
bunch
of
queries
waiting
on
something
else
to
fire,
you
probably
got
a
problem,
so
we've
identified
here
that
this
probably
get
whatever
is
firing.
C
This
get
locale
query
is
preventing
the
rest
of
the
app
from
rendering
we
probably
don't
want
to
do
that
so
and
then
I'll
quickly
show
that
we've
fixed
it
and
if
we,
if
we
go
back
and
look
at
that
trace
again,
you
know
it
took
about
half
a
second.
So
if
we
fix
this,
maybe
we
should
get
a
half
a
second
improvement.
So,
let's
go
over
to.
I
have
a
pr
instance.
That's
doing
the
same
thing,
I'm
always
mindful
to
clear
all
my
cash,
so
my
results.
C
C
And
you
know,
with
network
latency
you're
never
going
to
get
like
consistent
results,
so
hopefully
this
oh
geez,
so
not
not
the
best
improvement,
I'm
gonna
chalk,
that
up
to
network
latency,
but
we'll
still
go
look
at
the
trace
and
we
can
see
in
the
in
the
request
flow
that
now
we
no
longer
have
this
render
blocking.
So
you
see
we,
we
don't
have
kind
of
these.
C
C
So
we
do
a
query
at
build
time
to
grab
store
config.
So
we
know
what
the
default
locale
is.
That
means
we
can
immediately
render
the
app
with
that
value
and
then
just
to
be
cautious.
I'm
going
to
bump
this
up
a
lot
more.
I
think
I've
seen
in
some
recordings
that
that's
pretty
tiny
so
just
in
case
that
kind
of
value
at
build
time
like
somebody,
may
have
gone
into
the
admin
and
changed
the
default
locale
we
can
go
still
go
ahead
and
true
up
with
the
network.
C
So
what
we
we
still
go
ahead
and
fire
that
query.
But
now
we're
saying,
while
this
query
is
in
flight,
go
ahead
and
use
this
default,
locale
global
that
I
that
I
got
at
build
time-
and
this
is
the
big
bad
piece
here.
If
you
ever
have
something
like
this
in
your
app,
it
means
that
it's
render
blocking
saying
that
until
my
data
comes
back,
I'm
not
rendering
anything,
and
it's
probably
not
the
behavior
that
you
want.
C
So
there's
going
to
be
big
talks
about
kind
of
app
skeletons
for
like
the
next
year,
because
that's
going
to
be
something
that
we
want
to
do.
We
don't
want
a
big
loading
spinner
in
the
user's
face
or
in
the
shopper's
face,
while
they're
waiting
for
this
data
to
come
back,
we
should
be
rendering
some
sort
of
shape
that
might
resemble
the
data
we
expect
to
get
back.
C
It's
a
great
psychological
thing
that
makes
them
feel
like
the
page
is
snappier
and
faster,
even
if
it
takes
the
exact
same
time,
so
keep
an
eye
out
for
patterns
like
this.
If
loading
show
a
loading
indicator,
otherwise
render
this
provider-
and
this
is
what
provides
all
our
translation
strings
and
that's
why
it's
at
the
very
top
of
the
app.
So
what
this
was
doing
before
was
saying:
don't
render
the
rest
of
my
app
until
this
network
request
comes
back,
which
is
what
you
do
not
want.
C
So
now
we
have
solved
that
by
querying
default
locale
build
time.
We
still
go
ahead
and
check
with
the
network
to
see
if
that
value
is
still
accurate.
If
it
is
react,
does
nothing
react,
does
a
a
diff
of
that
value
and
doesn't
re-render
the
rest
of
the
app
if
the
value
comes
back
and
the
locale
is
different,
it
does
a
re-render,
but
at
least
you
gotta
got
that
immediate
render
and
then
they
might
see
like
a
a
little
flash
of
like
some
translated
strings.
C
C
So
there's
like
three
big
queries
that
have
to
fire
before
this
page
is
rendered,
but
you'll
still
see
that,
like
a
lot
of
our
performance
is
still
in
the
in
the
decent
I
already
refreshed,
but
it
is
in
a
decent
range
and
now
we're
kind
of
just
kind
of
nitpicking
trying
to
get
our
way
up
to
that
perfect
hundred
like
we
want.
You
know
those
sub
500
millisecond
load
times
to
give
you
like
instant
instant
feedback.
A
C
Yeah,
so
that's
we,
I
I
think
I
need
the
the
i18n
al's
team
that
implemented
this
to
maybe
provide
some
context
into
why
we
didn't
just
trust
the
browser
we
kind
of
trust
the
store
config
over
whatever
the
user
has
configured
in
there
in
their
os.
That
gets
bubbled
up
to
the
the
browser
I
yeah,
I'm
kind
of
on
the
fence
there
like.
I
think
we
should
just
trust
what
the
browser
says
they
want
to
see
and
then
render
that
language,
but
you
know
we're
stuck
between
that.
C
C
But
you
easily
could
just
pass
grab
locale
from
navigator,
available,
locales
or
default
locale.
I'd
have
to
look
it
up
and
then
pass
that
to
the
react,
i18n
provider
and
you're
off
to
the
races.
You
just
want
to
make
sure
that
you'd
have
language
packs,
for
you
know
the
entire
world,
I
guess
but
yeah
on
the
off
chance.
You
don't
have
a
language
pack.
They
just
see
whatever
your
default
is.
A
D
D
I'm
gonna
share
this
hey
everyone.
I
hope
you
can
see
the
screen.
I'm
sharing
the
react,
17
upgrade
pr.
We
worked
on
this
as
part
of
the
the
lighthouse
improvements
that
that
tommy
mentioned
earlier.
So
this
is
one
of
the
prs
in
this
video.
We
are
looking
at
upgrade
react
and
also
upgrading
informed.
It's
the
it's
the
package
that
we
use
internally
to
render
forms
and
take
care
of
contexts
forms
we
had
to
upgrade
inform
because
react.
It
needs
the
newer
version
of
react.
D
The
pr
is
pretty
simple:
it's
just
an
upgrade
and
most
of
the
file
changes
that
you're
seeing
are
like
test
changes,
because
the
parts
have
changed
for
a
couple
of
time
and
then,
for
some
of
them
inform
has
changed
its
api.
So
it's
not
a
breaking
change,
though
it's
just
that
I
snapped
a
snapshot
test
for
failing,
so
we
had
to
upgrade
everything
and
most
of
the
45
000
lines
of
change.
That
you're
seeing
are
like,
like
the
analog
changes
and
the
snapshot
changes.
C
D
A
They
give
us
some
wiggle
room
there,
but
I
think
that
should
be
the
the
plan
d.
Everything
is
is
moving
ahead
and,
and
you
know,
moving
according
to
playing
on
the
release,
I
think,
as
we
finalize
or
have
already
finalized
the
majority
of
it,
so
we'll
cover
the
release
notes
next
week,
but
there's
some
really
big
big
changes.
Big
features
coming
that
I
think
we're
really
excited
about,
not
only
in
terms
of
improvements
to
extensibility
framework.
Some,
the
international
and
localization
work
that
the
team
has
been
doing.
A
My
account
features
that
are
coming
out
and
I
think
there's
some
other
there's
a
bunch
of
other
goodies
in
there,
of
course,
but
those
are
some
of
the
the
major
highlights
so
we'll
go
through
some
of
those
in
depth
a
little
bit
next
week
talk
through
the
release,
notes,
and
then
everyone
will
obviously,
as
we
get
closer,
be
able
to
have
access
to
those
changes.
Well,
you
can
see
them
today
on
develop
right,
a
lot
of
those
features.
A
I
see
there's
some
already
and
andy
thanks
for
taking
those
questions
in
chat,
so
I
guess
from
here
we'll
take
a
we'll
take
a
a
pause
on
our
side.
I
think
we're
we're
good
on
our
agenda,
but
because
we
have
such
a
a
great
audience
here
today.
If
there
are
any
questions
about
pwa
studio,
what
the
team
has
been
working
on
what's
coming
up,
feel
free
to
to
jump
in
either
the
chat
or
chime
in
here
and
we're
happy
to
take
kind
of
open,
open.
B
D
B
Trying
to
so
christopher
asked
their
plans
to
release
independently
of
the
core
releases.
Yes,
we're
trying
to
do
that.
We
have
to
coordinate
with
some
other
kind
of
internal
stakeholders
and
all
that
and
support
and
things
so
we're
definitely
pushing
for
that.
But
I
don't
want
to
make
any
promises
just
yet,
but
we
are
trying
to.
We
are
trying.
A
Yeah,
for
sure
I
mean
it,
has
certainly
been
a
goal
that
we've
had
on
the
project
and
chris
you
know
because
you've
been
around
long
enough.
It's
been
a
goal
that
we've
had
for
a
while
now
and
we're
making
steps
so
we're
going
to
keep
pushing
that
that
direction
have
the
independent
releases
for
sure.
B
A
A
You
know
we
obviously
demo
what
we're
working
on
as
a
team,
but
we
also
welcome
anybody
in
the
community
to
demo
anything
that
they're
working
on
some
of
the
more
exciting,
not
that
anything
that
we
do
isn't
exciting,
but
some
of
the
more
exciting
demos
are
actually
seeing
what
the
community
members
are
doing
with
pwa
studio
and
some
of
the
projects
there.
We
love
to
see
it.
A
A
Well,
if
there
are
no
other
questions
thanks
everybody
for
joining
today,
we'll
be
back
at
it
again
next
week
again
we
do
record
these
and
throw
them
up
on
youtube.
If
you
want
to
gain
access
to
any
of
this
information
later
and
in
the
meantime,
we
will
see
you
all
next
week
have
a
great
rest
of
your
wednesday.