►
From YouTube: The Polymer PWA Starter Kit - Mike Geyser
Description
Today we will build a PWA! We will take one part polymer, one part lit-html, and one part redux. We will then mix thoroughly and place on top of a sw-precache configured service worker. Covering the result with a combination of chrome puppeteer and WCT suites, we will bake it for approximately 45 minutes using the polymer-cli.
This code-heavy talk will look at lit-html, LitElement, and the PWA Starter Kit. We will explore how the starter kit is set up, and build a simple PWA using it.
This talk was recorded at the Jozi.JS meetup group on the 21 June 2018.
https://www.meetup.com/Jozi-JS/events/249460250/
Disclaimer: The opinions in this talk are those of the individual and do not necessarily represent those of this channel, the meetup group, or it’s sponsors.
A
A
But
then,
if
you
keep
shopping,
I
think
you
could
there's
something
cool.
There's
some
cool
stuff
coming
down
the
pike,
so
I'm
going
to
be
talking
about
the
fundamental,
particularly
the
problem.
@Pw
a
start
to
get
just
a
lot
of
words,
and
this
is
a
lot
and
it
doesn't
really
say
very
much
about
what
it's
about
anyway.
So
let's
get
started
with
polymer
itself,
this
closest
window
and
go
to
the
polymer.
So
polymer
three
is
the
foundation
of
all
of
this,
and
as
you
as
some
of
you
may
know,
it
was
launched
at
Google.
A
I/O
last
men
and
polymer
3
is
is
a
weird
one,
because
yes
yeah
awesome,
where
we've
just
launched
a
new
version
of
our
framework
and
they're
immediately
talking
about
welcome
to
the
future
the
sort
rhythmic
next-
and
this
is
what
you
should
be
interested.
This
is
our
roadmap
and
there's
a
part
of
that
that
jars,
with
our
understanding
but
which
was
window
but
the
fun
of
the
project,
is
that
it's
not
just
a
framework.
It's
trying
to
push
the
platform
as
a
whole
forward
right.
A
So,
there's
nothing
like
a
little
bit
about
what
they
did
with
polymer
three.
So
with
the
river.
The
polymer
three
is
try
and
make
it
a
lot
less
weird
and
a
lot
more
component
types.
So
this
weird
in
the
sense
that
they'd
appointees
barla
and
they
didn't
want
to
use
HTML
imports
which
are
not
in
the
standardization
part
at
the
moment,
and
then
it
becomes
all
of
that
stuff
so
that
you
could
use
NPM
and
you
could
use
normal
JavaScript
modules
and
write
in
a
way
that
everything
else
was
being
written.
A
Think
what's
really
interesting
is
where
that
led
to
so
they'd
last
you're
in
conjunction
with
this,
and
they
wrap
the
development
for
polymer
three,
they
embark
on
an
experiment
called
what
HTML
and
that
hTML
is
a
way
to
try
and
create
a
really
really
fast
and
extensive
or
extensible
platform,
rendering
thankfull
native
rendering
will
brighten.
So
to
use
the
features
that
the
platform
has
to
do,
something
that
quite
obviously
gives
you
the
kind
of
expressiveness
that
react
has
and
the
way
that
they
did.
This
is
with
template.
Literals,
okay,
particularly
tag
template
literacy.
A
A
A
A
A
A
La
is
a
function
that
will
take
the
string
bits
and
an
array
of
the
data
bits
right,
so
they
just
call
them
elements
other
points
of
evidence
and
let
you
operate
on
them.
So
look
at
what
you
can
do
is
you
can
do
something
and
I'm
going
to
be
really
really
simple.
Yeah
just
do
a
console
that
log
off
the
string,
bits
and
console.log
other
bets
to
show
you
what
I
mean
yeah
I'm,
also
just
going
to
add
console.
Oh
thank
you
very
much
hey.
A
A
I
missed
the
party,
so
I
don't
actually
use
the
tag
and
how
you
use.
The
tag
is
like
as
follows:
putting
in
a
defense
of
the
temperamental
okay,
now
what
that
gives
us?
Sorry,
okay,
that's
undefined
I
forgot
to
return
something
so
return,
something
the
spot
is
really
good
because
only
thought
of
it
at
four
o'clock.
So
I'm,
really,
sorry,
okay,
so
something
and
you
can
see
that
we
get
to
two
parts
of
informations.
A
A
There's
a
default,
something
meaningful
about
the
structure
and
if
you
were
to
put
HTML
in
there,
you
can
start
putting
me
doing
meaningful
things
with
HTML
bits
and
pieces,
and
this
is
way
let's
HTML
enters
the
equation,
because
it
uses
this
fundamental
premise
of
being
able
to
build
up
the
street
of
the
bunch
of
pieces
that
don't
change
in
a
page
and
the
bits
of
pieces.
They
do
change
an
appendage
and
efficiently
update
those.
So
it
turns
out,
javascript
is
insanely
insanely
efficient
at
the
string
processing.
Much
more
than
anything
else.
A
A
And
do
with
the
important
rights
I'm
just
going
to
import
HTML
and
rendered
from
that
extended
and
then
I
get
to
do
some
cool
stuff.
Okay,
so
I
get
to
for
examples,
sake,
change
what
into
a
function!
That's
going
to
take
name
and
it's
going
to
return
and
attack
temple
for
the
troll
called
HTML.
That's
going
to
do
the
following!
So
it's
going
to
render
an
h1.
A
A
A
B
A
A
Next
herb
records
300
for
the
second
is
going
to
render
and
we
see
rendering
there
and
in
fact
you
can
go
a
lot
more
aggressively
and
I
think
that's
the
point
right
to
jobs
to
truly
of
Muslims
in
America
nation,
and
it
can
take
this
and
render
something
really
really
quickly.
Now,
an
important
coming
to
remember
about
learn
to
HTML,
just
till
this
important
come
here
to
remember
is
that
this
HTML
doesn't
return
a
string.
A
It
returns
HTML
element
tree
okay,
so
if
I
just
string
manipulations,
thanking
the
strings
and
doing
something
else
with
it
and
I'm
gonna
close
this
cuz,
that's
the
foundation
of
the
rendering
that's
in
these.
So
so
looking
at
this
really
really
exciting
development.
The
polymer
team
was
like
a
vehicle,
that's
awesome.
We
want
to
do
that
and.
A
A
A
It's
the
way
that
the
standard
works
right-
okay,
they
designed
it
like
that,
so
that
you
could
start
writing
you
don't
even
need
to
have
any
country
consecutive
you
can
have
a
displaced
and
then
you
can
have
them
nested
inside
one
another.
So
it's
designed
for
DSL
functionality.
Have
you
ever
written.
You
really
repeat
yourself.
Anyone,
okay,
so
Ruby
has
very
some
of
the
stuff
with
some
of
the
ceremony
to
let
you
write
for
yourself.
B
A
The
reason
why
I
bring
this
up
is
not
necessarily
for
the
letter
itself
right,
but
it's
the
the
next
part
it's
taking
the
web
component
particles,
it's
taking
the
property
change,
identifies
a
property
handling,
identifies
for
the
web
components
and
then
let
the
HTML
they're
combining
those
into
something
called.
Let's
element.
A
That's
the
foundation
of
what
we're
going
to
look
at
as
a
part
of
a
start
to
get
is
how
to
use,
let's
element
to
start
building
meaningful
web
components
in
a
way
that
we
used
either
from
a
reactor
somewhat
of
an
angular
way.
Who's
familiar
with
reactive
is
done
with
a
bunch
of
react
work,
so
some
of
us
will
look
close
to
what
you're
used
to
from
an
aesthetic
perspective
at
the
very
least
okay.
So
that's
a
let
detective
literals
and
then
you
start
to
get
so.
A
The
star
ticket
is
basically
get
github
repo
that
you
can
clone.
That's
got
a
number
of
options
to
lose
right.
They
want
to
all
an
individual
some
pieces
to
work
well
together,
be
glued
together,
so
you
can
get
started
quickly,
so
got
a
little
element
in
there.
They've
got
Redux
in
there
because
that
I
think
it
is
that
the
effect
have
standard
sort
of
state
management
framework.
A
For
you
know
across
very
many
frameworks,
it's
got
testing
baked
in
and
it's
got
a
whole
bunch
of
utility
culpers
that
are
important
for
a
framework
to
work
effectively
like
routing
and
some
offline
helpers
and
a
whole
bunch
of
really
really
small
things
that
you
can
then
pick
and
choose
which
parts
you
want.
Okay,
so
that's
really
really
useful.
A
It
has
testing
center
out
of
the
box
that
you
can
just
start
with
using
web
component
tests,
which
are
tests
or
the
functionality
and
isolation
and
using
chrome,
puppeteer
or
in
integration,
testing,
continuous,
being
shot
testing
and
so
on
and
so
forth.
And
then
the
final
part
are
suppose
is
that
it
has
a
number
of
sample
applications.
A
A
This
is
the
simple
default
start,
application
that
it
comes
with,
which
is
a
static
page
with
three
routes,
one
which
has
a
really
really
simple
counter
in
it,
and
one
that
has
a
really
really
simple.
Like
shopping
cart,
thing:
okay,
so
showing
this
off
just
very
briefly,
to
show
you
how
it
fits
together,
oh
and
I
didn't
mention
the
purple
server,
okay,
so
one
of
the
patents
that
they
they
recommend.
A
A
So
that
you
can,
you
can
not
hit
the
network
next
time
if
you
require
it
and
they
thought
that
sets
up
by
the
phone
which
we'll
look
at
a
little
bit
further
later.
So
the
default
code
is
really
really
heavy
because
it
is
a
full
application
to
show
you
how
to
puts
together.
So
majority
of
stuff
sits
in
the
source
folder,
and
there
are
three
folders
underneath
their
actions,
components
and
reducers.
So
in
components
you
can
see
all
of
the
individual
web
components
so
the
appropriate
containing
add
component.
A
That's
got
all
of
its
bits
and
pieces
in
its
own
CSS
because
remember
that
was
where
the
components
in
CSS
it's
wrapped
inside
shadow
done.
So
then
it's
standalone
completely
standalone.
It
can
be
used
about
without
fear
of
collision
and
then
underneath
that
it's
got
all
of
the
the
mark-up
render
and
a
whole
bunch
of
stuff
will
show
the
how
the
redux
gets
wired
in
later,
but
there's
two
other
folders,
so
actions,
primarily
things
that
you
can
do
trigger
for
the
relaxed
pipeline.
I'm,
not
a
real
expert,
there's
something
in
the
second
room.
A
So
you
can
ask
them,
and
then
you
write
a
whole
bunch
of
reducers
and
the
reducers
or
the
things
that
actually
do
the
work.
So
you've
got
the
cycle
flow
mob
data,
which
I
think
will
impact
a
little
bit
later.
They've
got
all
of
the
test
stuff
in
here,
so
either
the
unit
tests
that
are
your
web
component
test
bits
and
pieces,
and
then
your
screenshots
and
integration
tests,
then
using
chrome
puppeteer,
which
is
really
really
really
cool.
It's
a
screenshot.
The
thing
between
test
drive
is
this
amazing.
A
The
last
part
which
will
I
think
will
look
at
a
lot
later.
Is
I've
got
some
configuration
and
setup
for
that
protocol
server.
So
so
this
is
the
lay
of
the
land.
But
there's
a
lot
here.
There's
a
lot
to
dig
through,
as
you
can
see
like
the
class
files
are
champion.
They've
got
lots
of
detailed
implementations
and
I'm.
A
minimalist
and
I
like
starting
from
grassroots
and
my
way
of
viewing
the
world
is
by
pulling
to
do
MVC
applications.
A
A
That's
got
a
class
or
two
do's
and
a
whole
bunch
of
stuff
that
I
didn't
want
to
type
out
and
I,
have
a
single
app
component
and
has
been
set
up
with
just
a
bare
minimum
amount
of
markup
inside
a
render
method,
and
then
I've
got
a
whole
bunch
of
shared
styles,
which
I
wasn't
going
to
type
on
CSS.
So.
B
A
Going
to
talk
about
too
much
okay
right,
so
we've
got
this
my
app
there's
my
act
when
we
start
to
that
and
just
make
sure
you
close
that
one
no
need
to
start
this.
One
I
need
to
start
this
one.
Okay,
all
I've
done
is
I've
removed
all
of
the
other
craft
that
I
don't
care
about
from
a
component
and
redux
perspective.
Okay.
A
That
says
to
do's
and
all
a
bunch
of
template
is
done.
Okay,
so
we
got
to
get
started
and
the
first
thing
we
need
to
do
is
to
and
to
do
so
to
do
that,
let's
say
there's
a
moment:
it
gets
all
really
really
quickly.
I
promise
to
do
that.
We're
going
to
create
a
new
component
called
sorry
add
to
do
yes,
and
now
we
need
a
bunch
of
stuff.
A
So
we
can
import
the
bits
that
we
need,
so
we
can
import,
let's
element
and
we're
going
to
import
a
mixin
called
connected
and
we're
going
to
import
our
store,
which
is
I.
Read
that
store
that
I'm
not
going
to
look
at
because
it's
a
bunch
of
boilerplate
code
that
I
haven't
wanted
to
dig
through
and
then
we've
got
our
shared
stars.
A
A
A
So
you
can
be
very
explicit
about
what
you're
asking
okay
and
then
the
last
thing
you
need
to
do
is
you
need
to
define
your
custom
element
and
you're
going
to
say
we
don't
know,
custom
elements
that
define
and
you're
going
to
define
your
selector,
which
is
going
to
be
add.
To
do
this
case.
See
I,
wasn't
shouting.
A
A
The
additional
stuff
that
I
need
here
is
I'm
going
to
just
add
a
placeholder,
because
my
notes
tell
me
to
what
is
and
then
I'm
going
to
autofocus
it,
because
that's
going
to
make
my
life
easier
later
on.
Okay
and
then
I
went
to
add
an
event
now
on
to
the
step,
we're
going
to
we're
going
to
tear
off
of
earth
Aniki
up
event.
A
A
So
that's
just
going
to
be
an
instance
method
called
air
to
do,
and
it's
going
to
take
the
e,
which
is
the
event
args
and
then
inside.
Here
it's
going
to
do
a
bunch
of
stuff.
Now,
importantly,
by
convention,
you'll
see
that
all
of
these
methods
are
prefixed
by
underscores.
That
is
just
the
convention,
because
JavaScript
out-of-the-box
doesn't
have
anything
that
has
an
understanding
of
the
private.
A
So
the
underscore
is
visual
cue
to
say
well,
if
you're
accessing
something
on
a
different
object
and
it's
got
an
end,
the
school
don't
touch
it
because
that's
a
private
state
and
everything.
So
it's
just
a
bit
of
discipline.
Okay,
now,
here
the
first
thing,
that's
going
to
happen
is
I'm
going
to
try
and
limit
it
to
my
TV
on
hinges,
photographer
the
text
and
hit
enter
I'm
going
to
go
Yod
key.
A
If
the
key
is
not
equal
to
enter,
then
I'm
going
to
return
and
failing
that
I
want
to
add
the
bird
to
do
and
after
that
I'm
going
to
update
the
text.
So
you
not
target
value
equals
to
refit.
Okay,
now
ever
do
I
need
to
send
off
an
action
for
Redux
to
deal
with
right.
So
I'm
going
to
create
my
first
action.
It's
going
to
be
aired
to
do
DOJ's
now,
you'll,
forgive
me,
I
was
going
to
type
this
up
over
and
over
so
I've
created
a
little
stuffer
to
create
an
action.
A
So
the
first
thing
is
that
I
need
a
variable,
a
constant
variable.
That's
going
to
be
my
key,
that
I'm
going
to
use
elsewhere
and
that's
going
to
be
add
to
do
I'm
going
to
export
a
creative
function
which
is
going
to
be
add
to
do
and
to
do
and
then
the
last
thing
I'm
going
to
do
is
pass
in
to
do
text,
unbelievers
and.
A
Do
depths
takes
the
caller
to
do
text
as
a
property
on
that
stop?
If
you
have
questions
and
then
in
my
component
here,
I'm
going
to
dispatch
them
so
I'm
going
to
use
the
stored
on
dispatch
and
that's
going
to
dispatch
and
to
do
this
air
to
do
method
and
inside
there
I'm
going
to
pass
in
either
target
value.
A
In
Visual
Studio
code-
great,
so
that's
the
one
side
of
it
and
now
I
need
to
respond
to
it
in
the
reducer
tomb
and
actually
action
the
state.
So
the
reducer
has
a
whole
bunch
of
stuff
in
it.
This
is
probably
all
going
to
be
an
anti-pattern
because
I'm
not
very
experienced
of
three
a
green
expert.
Don't.
A
B
A
State
and
everything
that's
attracted
is
going
to
going
to
get
that
we're
not
going
to
be
able
to
see
anything
off
of
this
right,
because
we
could
not
even
create
and
add
events
into
a
point.
We
need
to
then
show
the
stuff.
So
we're
going
to
go
back
to
my
app
here.
Oh
wait.
We
need
to
do
one
more
thing,
so
my
app
is
just
a
bunch
of
playing
mark
pepper
that
doesn't
actually
use
that
custom
element
that
we've
defined.
A
And
we
need
to
import
that
component
is
some
of
the
code
gets
triggered,
so
this
I'm
not
sure
how
I
feel
about
it,
but
in
JavaScript
this
is
called
an
important
side
effects,
so
I'm
importing
that
module
I'm,
not
using
anything
that
they've
module
digs
forwards
in
this
case
is
actually
nothing
but
I'm,
getting
it
to
run
code.
So
that's
going
to
define
the
custom
elements
that
I'm
going
to
use
their
custom
element
locally.
A
The
top
so
for
that
component,
I'm
not
going
to
create
it,
create
your
component
to
do
list
Jas
and
I'm
not
going
to
talk
about
all
that
stuff
individually,
also
created
a
rule.
That's
going
to
create
the
pieces
that
I
need,
which
we've
taken
a
look
at
borrowing
one.
So
this
is
going
to
be
a
duelist
class
and
at
the
bottom,
data
is
going
to
be
exported
as
a
to-do
list
element.
A
A
A
Yeah,
cousin,
okay
and
now
I
can
use
those
things.
Now.
Importantly,
I
can,
as
a
part
of
the
props
destructor,
just
say,
I'm
looking
forward
to
do
this
on
whatever
their
project
is
and
it
will
be
passed
in
and
then
just
use
it
internally.
So
now,
I
can
just
go
and
say
well
to
dues
that
map
and
each
other's
going
to
be
a
to
do-
and
you
know
this
is
just
all
plain
JavaScript
and
inside
yeah.
A
A
A
I'm
going
to
just
is
my
component
shortcut
for
you
to
do
if
you
to
do
is
going
to
be
the
element
inside
here,
I'm
going
to
use
that
same
property
rate.
If
you
remember
I
said
the
property
was
going
to
be
to
do
another,
a
property
getter
and
I'm
going
to
set
it
to
type
object.
That's
going
to
be
plastic
I'm
not
going
to
use
the
snake
change
for
the
moment.
A
I'm
not
going
to
suspect
age
for
the
moment
and
rather
just
render
what
does
needs
to
look
like
and
inside
here,
I'm
going
to
create
a
dirt
dot
you
and
inside
that
duck
dive.
You
we're
gonna
have
three
things.
It's
the
first
thing
we're
gonna
have
is
we're
going
to
have
an
input
of
class
toggle
that
is
going
to
be
a
checkbox?
A
To-Do
title
in
it
and
our
to
do
is
going
to
be
passed
in
here
as
a
part
of
the
props
object,
so
the
properties
are
speaking
straight
to
the
props
of
the
renter
and
then
the
last
thing
I'm
going
to
do
is
the
button
off
type
of
class
destroy
that
later?
Okay,
so
now
I
found
all
of
those
three
things
and
I
reload.
A
A
A
Yes
and
we're
going
to
do
two
things.
The
first
thing
we're
going
to
do
is
we're
going
to
create
an
unclick
event
and
then
we're
going
to
set
checked
okay,
so
we
can
respond
to
the
data
and
we
see
it
checked,
we're
going
to
set
it
to
2,
do
not
complete
it
and
that's
all
good
and
well,
but
our
unclick
we
care
about
this
so
previously
when
we
pass
it
the
function
reference.
This
was
the
reference
to
that
function
right
because
of
of
how
that
works
in
JavaScript.
A
A
Okay,
that
looks
familiar
to
people
right
and
that's
just
going
to
be
an
instance
function
on
here
or
toggle.
Completion
I,
don't
care
about
the
e
in
this
case
and
I'm
just
going
to
dispatch
an
action.
That's
going
to
completion
so
I'm
going
to
create
a
new
action
called
toggle
completion,
DOJ's
and
inside
here.
A
A
Completion
is
about
dated.
10
cents
has
an
update
to
get
it
soldered
by
hand,
and
we
want
the
stuff
to
do.
We
should
probably
then
I'm
just
showing
you
so
that
you
can
see
how
it
would
work
if
you
care
about
local
this,
but
to
me
you're
a
far
more
functional.
You
would
want
to
pass
in
to
do
because
then
you've
got
that
consistent
flow
and
you're,
not
relying
on
any
internal
set.
A
A
Toggle
completion
and
as
a
part
of
that
and
I
need
to,
unfortunately
do
something
a
little
bit
more
complicated,
so
we're
going
to
return
a
map
of
the
state,
but
on
that
that
map
of
the
state
we're
going
to
need
to
do
we're
going
to
need
to
change
some
stuff
right.
So
what
we're
going
to
do
is
we're
going
to
try
and
find
that
particular
element.
So
if
item
dot
ID
or
action
to
do
dot,
ID,
then
I
want
to
return
shallow
copy
of
it.
A
A
A
A
A
Completed
CSS
right
because
one
of
the
other
attributes
work
like
that,
but
you'd
be
wrong
and
you'd
be
wrong
for
a
very
specific
reason
that
the
react
people
are
probably
smiling
internally
yet
because
class
is
a
loaded
term
and
it
should
always
in
a
reserved
keyword
in
JavaScript
and
amount
is,
and
it's
used
for
meta
programming
right.
So
while
there
can't
ignore
that
point.
But
if
you,
if
you're
looking
at
HTML
element
right
an.
A
It
has
a
class
property
that
could
be
confusing
as
to
whether
it's
talking
about
the
class
vegetable
element,
the
CSS
class
or
a
reserved
to
reserved
word
keyword.
So
they
change
that
and
they
made
a
class
name,
which
is
what
you
would
use
in
reacted
right.
So
this
won't
work,
but
you
can
use
classname
completely
fine
if
there.
A
Like
this,
you
can
also
additionally
use
class
dollar,
which
is
a
shortcut
in
the
HTML
saying
this
is
class,
but
it's
the
element.
The
HTML
element,
part
of
class
font,
the
javascript
in
HTML,
because
that
make
sense
doesn't
make
sense.
Okay,
I
see
people
nodding
so
I'm,
assuming
my
watchin
explanations,
even
baby
clothes.
So
hopefully,
what
that
means
is
that
if
we
reload.
B
B
A
A
B
A
A
B
A
A
A
Okay,
awesome.
The
last
thing
we
have
to
do
is
we
need
to
be
able
to
get
it
and
update
that
to
do
so.
For
that
we're
going
to
start
off
with-
and
this
is
quite
a
long
one-
we're
going
to
start
off
with
the
view
component
we're
going
to
when
you
double
click
on
label.
Let
you
edit
it
so
for
that
we're
going
to
use
the
unbel
click
method
and
we're
going
to
since
two.
A
B
A
A
A
A
A
A
A
A
A
A
A
A
B
A
You
sure
haven't
missed
anything
now
we
need
to
write
the
reducer
on
the
other,
so
we've
got
two
methods
that
we
need
to
write
it
so,
firstly
case
or
complete,
complete
editing
and
for
complete
editing.
It's
going
to
be
very
similar
to
the
Edit
except,
firstly,
that's
going
to
be
the
opposite,
and
then
secondly,
it's
going
to
set
title
to
updated
sorry
action
to
do
text.
A
However,
when
we
reload
it
you'll
see
that
the
page
looks
awful
was
a
Brenda's
both
of
those
components,
because
we
need
to
elect
to
show
and
hide
those
pieces
ourselves
now,
if
we
just
simply
return
null
from
here,
for
example,
sake:
it's
going
to
break
that
rendering
pipeline.
So
what
we
actually
want
to
do
is
return
some
empty
marker,
so
I
don't
remove
it
explicitly
so
for
that
bucket.
A
A
A
Notices
just
leave
everything:
okay
cool,
so
we've
at
least
got
some
functionality
now.
I
think
that
it's
a
it's
a
small
right,
it's
something
very,
very
simple,
but
we've
created
all
five
component
with
a
bit
of
interaction,
so
it
shows
some
non-trivial
bits
and
pieces.
The
Redux
stuff
is
heavy
handed
what
this
kind
of
thing,
but
it
scales
relatively
linearly
with
large
systems.
A
So
this
doesn't
change
when
you
have
hundreds
of
complaints,
so
I
want
to
show
you
the
bold
bits
and
pieces
quickly,
just
because
I
haven't
really
important
progress
yeah,
so
it
has
the
purple
server
stuff
built
in,
but
we
want
to
change
a
couple
things,
but
I
think
on
purpose.
So
the
first
thing
is
the
push
manifest
that
came
by
default
specifies
all
of
the
routes
and
what
to
push
down.
Windows
routes
get
access
and
we
really
don't
care
about
any
of
the
stuff,
because
we
only
have
one
route.
A
A
A
A
Now,
if
you
take
a
look
at
our
precache
conflict,
this
is
the
thing
that
is
going
to
generate
all
of
our
pre
cached
data
for
our
progressive
web,
app
it's
good
by
default
if
a
little
bit
aggressive,
so
it's
literally
pre-caching
all
of
your
files.
You
know
that
that's
a
potential
question
one!
I
want
to
tweak
that,
but
either
way
all
we
want
to
do.
A
Is
we
want
to
make
sure
that
it'll
also
pre
catch
those
two
CSS
things
for
us
out
of
the
box
and
I'm
just
going
to
make
sure
that
it's
looking
for
anything
to
do
VC.
So
if
it
matches
a
URL
that
has
that
in
it
it's
going
to
pre
cache
it
which
it'll
be
sent
through
an
h2
Bush.
So
if
I
cancel
this
and
I
knock
NPM
run
old,
:
purple
server,
it
will
compile
a
whole
bunch
of
stuff.
A
Now
the
important
thing
or
the
interesting
thing
is
that
it's
generating
target
CA
sources
target
jeaious
for
a
whole
bunch
of
environments.
So
it's
got
environments
where
es6
is
supported,
but
not
modules.
It's
got
a
fallback
es5
and
then
it's
got
in
here
M.
So
if
you're
supporting
es
module
and
classes
and
although
they
are
the
JavaScript
bits
and
pieces,
the
reason
that
does
that
is
because
then
I
can
push.
This
JavaScript
is
less
the
push
this
poly
the.
A
To
see
there's
AI
applications,
we
can
look
at
the
application
tab
and
we
can
see
our
service
worker
installed
and
running.
We
can
see
our
cache
storage
with
pre
cached
bits
and
pieces
already
there,
and
if
we
go
back
to
the
network
panel
and
reload,
the
page
we'll
see
that
everything
gets
served
first
and
foremost
from
serviceworker,
and
then
it
hits
the
network
and
what
that
means
is
I
can
do
just
cover
zoom
out
a
little
bit.
So
I
can
see
the
offline
button.
So
we
can
take
this
offline.
A
A
Okay,
so
so
perhaps
last
thing
I'll
show
you
and
then
we
can
fill
some
questions
is
the
progressive
web
app
in
us?
So
you
might
mother
who
hasn't
food
has
played
with
White
House
before
okay
baked
into
Chrome
has
just
been
updated.
Recently,
I'm
going
to
run
audits
on
performance
and
progressive
web
app.
So
it's
a
teeny
bit
faster
and
unless
it's
be
done,
anyone
has
any
questions.
We
can
ask
quality.
A
Cool,
so
you
can
see
we
get
a
near-perfect
score
on
performance,
a
very
good
score
for
progressive
way
back
in
us,
and
there
are
some
some
individual
bits
and
pieces
that
we
can
change.
Some
of
this
is
where
we're
running
both
serve
our
local
and
some
of
it
is,
you
know,
just
time
to
interact
because
I've
been
super
lazy
with
those
messes
CSS
files
that
I've
imported
right
again.
B
A
Network
panel
I
think
you
can
see
if
we
go
back
online
now,
because
everything
is
pre,
cached
and
start
loading,
seven
kilobytes
for
this
page
and
if
we
clear
if
we
clear
the
cache,
is
taking
me
a
while.
But
if
we
clear
the
caches
make
know
that
you
can
trust
me
on
this
one
as
it
ends
up
being
about
50,
kilobytes
or
in
an
entire
application
and
I've
been
super
super
waist
big
external
stylesheets,
not
necessarily
optimizing.
My
code,
the.
B
A
B
A
Could
you
please
react
with
us?
It's
not
a
straight
swap,
obviously
I
think
going.
Pre-Act
is
probably
a
bit
of
a
step
or
react,
but
the
idea
is
that
react
will
never
run
the
natively
in
browser
and
will
never
get
rid
of
their
trans
faster,
whereas
the
stud
is
largely
mated
and
the
better
web
components
get
the
beta
versus
so.
A
Material
design,
components
those
are
all
both
using
using
LEDs
Department.
So
but
then
you
want
the
material.
He
means
that
and
there's
a
there's
a
whole
additional
world.
Why
you
want
to
go
this
way?
Everything's,
maybe
not
everything's,
going
goodness,
but
there's
a
lot
of
investment
in
this
stuff.
So
one
of
the
things
that
the
part
of
a
budget
is
focusing
on
is
this
problem
is
something
that
every
single
JavaScript
framework
tries
to
reinvent
the
wheel.
How
do
I
efficiently
update
that
Dom
template
with
data?
So
that's.
A
Interesting
all
parts-
that's
nice,
I'll,
find
it
finance
if
anyone's
interested.
So
that's
pretty
cool
in
this
stuff,
like
they're,
coming
down
the
way
shadow
DOM
is
reaching
maturity.
It's
very
cool
and
it's
a
good
way
of
building
reusable
components
where
your
styling
then
is
encapsulated,
and
you
can
specifically
expose
the
things
using
CSS
properties,
which
are
also
just
mature
and
stable.
A
So
the
plenum
asthama
threepence
are
the
ones
that
really
care
about
browser
support
and
those
are
I
think
they
definitely
support
ie11
and
they
run
natively
in
a
lot
of
my
process
and
to
support
web
components.
So
it's
got
very,
very
good
support.
All
legacy
browsers,
nothing's
gonna
help
you
with
I,
yet
sorry
and
obviously
it'll
just
get
back
to
going
on,
that's
stuff,
I
think
is-
is
properly
polyfill
for
all
the
process,
but
I
don't
know
that
it
makes
sense
if
you've
got
a
predominantly
all
the
browser
base,
which
was
then.
A
A
Until
you
get
a
performances
yeah,
unfortunately,
that's
the
sidebar.
So
when
you
get
the
formatives
and
you
prioritize
code
and
code
aesthetics,
then
it
becomes
a
bigger
problem
to
focus,
because
you
have
to
throw
all
of
that
away
and
rewrite
this.
So
it's
nice
to
have
something:
that's
got
some
reasonable
as
that
it's
reasonable
default.
That
is
also
possible
yeah,
which
is
what
I
think
makes
the
reactor
to
react
without
creating
relationships.